41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
|
import { Button } from '@suid/material';
|
||
|
|
import {Component, createResource} from 'solid-js'
|
||
|
|
import { css } from 'solid-styled';
|
||
|
|
|
||
|
|
const UnexpectedError: Component<{error?: any}> = (props) => {
|
||
|
|
|
||
|
|
const [errorMsg] = createResource(() => props.error, async (err) => {
|
||
|
|
if (err instanceof Error) {
|
||
|
|
const mod = await import('stacktrace-js')
|
||
|
|
const stacktrace = await mod.fromError(err)
|
||
|
|
const strackMsg = stacktrace.map(entry => `${entry.functionName ?? "<unknown>"}@${entry.fileName}:(${entry.lineNumber}:${entry.columnNumber})`).join('\n')
|
||
|
|
return `${err.name}: ${err.message}\n${strackMsg}`
|
||
|
|
}
|
||
|
|
|
||
|
|
return err.toString()
|
||
|
|
})
|
||
|
|
|
||
|
|
css`
|
||
|
|
main {
|
||
|
|
padding: calc(var(--safe-area-inset-top) + 20px) calc(var(--safe-area-inset-right) + 20px) calc(var(--safe-area-inset-bottom) + 20px) calc(var(--safe-area-inset-left) + 20px);
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
return <main>
|
||
|
|
<h1>Oh, it is our fault.</h1>
|
||
|
|
<p>There is an unexpected error in our app, and it's not your fault.</p>
|
||
|
|
<p>You can reload to see if this guy is gone. If you meet this guy repeatly, please report to us.</p>
|
||
|
|
<div>
|
||
|
|
<Button onClick={() => window.location.reload()}>Reload</Button>
|
||
|
|
</div>
|
||
|
|
<details>
|
||
|
|
<summary>{errorMsg.loading ? 'Generating ' : " "}Technical Infomation (Bring to us if you report the problem)</summary>
|
||
|
|
<pre>
|
||
|
|
{errorMsg()}
|
||
|
|
</pre>
|
||
|
|
</details>
|
||
|
|
</main>
|
||
|
|
}
|
||
|
|
|
||
|
|
export default UnexpectedError;
|