131 lines
3.4 KiB
JavaScript
131 lines
3.4 KiB
JavaScript
import { useState } from 'react'
|
|
import Markdown from 'react-markdown'
|
|
|
|
// If these vars are missing, we suspect they are not desctructured in the draft method
|
|
const knownVars = [
|
|
'sa',
|
|
'Path',
|
|
'Point',
|
|
'Snippet',
|
|
'paths',
|
|
'points',
|
|
'snippets',
|
|
'absoluteOptions',
|
|
'complete',
|
|
'measurements',
|
|
'options',
|
|
'paperless',
|
|
'sa',
|
|
'scale',
|
|
'context',
|
|
'getId',
|
|
'hide',
|
|
'log',
|
|
'macro',
|
|
'setHidden',
|
|
'store',
|
|
'unhide',
|
|
'units',
|
|
'utils',
|
|
'Bezier',
|
|
'part',
|
|
]
|
|
|
|
// Make it easy to suppress escapint in i18next
|
|
const interpolation = { escapeValue: false }
|
|
|
|
// Extend this method if you want to handle other things than errors
|
|
export const analyzeDraftLogLine = ({ type, line, t }) => {
|
|
if (type === 'error' && line.stack) return <DraftError err={line} t={t} />
|
|
|
|
return null
|
|
}
|
|
|
|
// Helper component to toggle the stack trace
|
|
const ShowStackButton = ({ setDetails, details, t, txt = 'clickHereForStackTrace' }) => (
|
|
<button className="text-secondary font-medium px-1" onClick={() => setDetails(!details)}>
|
|
{t(txt)}
|
|
</button>
|
|
)
|
|
|
|
// This explains how the error is likely do to restructuring
|
|
const NotDestructured = ({ missing, setDetails, details, t }) => (
|
|
<div className="pattern-logs">
|
|
<Markdown>{t('notDestructured', { missing })}</Markdown>
|
|
<br />
|
|
<Markdown>
|
|
{t('seeLinkOrClick', {
|
|
link: `[${t('theDraftMethodDocs')}](https://freesewing.dev/reference/api/part/draft)`,
|
|
click: '',
|
|
interpolation,
|
|
})}
|
|
</Markdown>
|
|
<ShowStackButton {...{ setDetails, details, t }} />
|
|
</div>
|
|
)
|
|
|
|
// This explains a var is undefined in the design
|
|
const DesignsVarUndefined = ({ missing, err, t }) => (
|
|
<div className="pattern-logs" key={missing}>
|
|
<Markdown>
|
|
{t('designVarUndefined', {
|
|
missing,
|
|
file: err.stack.split('\n')[0].split('/designs/').pop(),
|
|
interpolation,
|
|
})}
|
|
</Markdown>
|
|
</div>
|
|
)
|
|
|
|
// Some other var not being defined
|
|
const OtherVarUndefined = ({ details, setDetails, missing, err, t }) => (
|
|
<div key={missing}>
|
|
<Markdown>{t('otherVarUndefined', { missing, interpolation })}</Markdown>
|
|
<br />
|
|
<Markdown>
|
|
{t('checkForDetailsOrClick', {
|
|
file: err.stack[0],
|
|
click: '',
|
|
interpolation,
|
|
})}
|
|
</Markdown>
|
|
<ShowStackButton {...{ setDetails, details, t }} />
|
|
</div>
|
|
)
|
|
|
|
// Component that displays an error log line
|
|
const DraftError = ({ err, t }) => {
|
|
const [details, setDetails] = useState(false)
|
|
const data = []
|
|
const stack = err.stack.split('\n')
|
|
// Leave this here, it's intentional. We log the error to you can inpect it.
|
|
console.log(err)
|
|
|
|
if (err.name === 'ReferenceError') {
|
|
if (err.message.includes('is not defined')) {
|
|
const missing = err.message.split(' ').shift()
|
|
if (stack[0].includes('/designs/')) {
|
|
data.push(<DesignsVarUndefined {...{ err, missing, t }} />)
|
|
if (knownVars.includes(missing))
|
|
data.push(<NotDestructured key="nd" {...{ details, setDetails, err, missing, t }} />)
|
|
} else data.push(<OtherVarUndefined {...{ details, setDetails, err, missing, t }} />)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{data}
|
|
{t('alsoLogged')}
|
|
{details ? (
|
|
<>
|
|
<h6>{t('stackTrace')}</h6>
|
|
<ol className="list list-inside list-decimal text-sm font-mono">
|
|
{stack.map((line, i) => (
|
|
<li key={i}>{line}</li>
|
|
))}
|
|
</ol>
|
|
</>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|