react-okr-ui/.docz/.cache/fast-refresh-overlay/components/build-error.js

A React user interface toolkit for building OKR centric applications.

import React from "react"
import Overlay from "./overlay"
import Anser from "anser"
import CodeFrame from "./code-frame"
import { prettifyStack } from "../utils"

const BuildError = ({ error, open, dismiss }) => {
  const [file, cause, _emptyLine, ...rest] = error.split(`\n`)
  const [_fullPath, _detailedError] = rest
  const detailedError = Anser.ansiToJson(_detailedError, {
    remove_empty: true,
    json: true,
  })
  const lineNumberRegex = /^[0-9]*:[0-9]*$/g
  const lineNumberFiltered = detailedError.filter(
    d => d.content !== ` ` && d.content.match(lineNumberRegex)
  )[0]?.content
  const lineNumber = lineNumberFiltered.substr(
    0,
    lineNumberFiltered.indexOf(`:`)
  )
  const decoded = prettifyStack(rest)

  const header = (
    <>
      <div data-gatsby-overlay="header__cause-file">
        <p>{cause}</p>
        <span>{file}</span>
      </div>
      <button
        onClick={() => open(file, lineNumber)}
        data-gatsby-overlay="header__open-in-editor"
      >
        Open in editor
      </button>
    </>
  )

  const body = <CodeFrame decoded={decoded} />

  return <Overlay header={header} body={body} dismiss={dismiss} />
}

export default BuildError