added recover page on unexpected error

This commit is contained in:
thislight 2024-08-05 16:24:34 +08:00
parent 93b4cd065a
commit 4b17c426ab
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
4 changed files with 45 additions and 2 deletions

BIN
bun.lockb

Binary file not shown.

View file

@ -40,7 +40,8 @@
"masto": "^6.8.0",
"nanostores": "^0.9.5",
"solid-js": "^1.8.18",
"solid-styled": "^0.11.1"
"solid-styled": "^0.11.1",
"stacktrace-js": "^2.0.2"
},
"packageManager": "bun@1.1.21"
}

View file

@ -53,11 +53,13 @@ const App: Component = () => {
);
});
const UnexpectedError = lazy(() => import("./UnexpectedError.js"))
return (
<ErrorBoundary
fallback={(err, reset) => {
console.error(err);
return <></>;
return <UnexpectedError error={err} />;
}}
>
<ThemeProvider theme={theme()}>

40
src/UnexpectedError.tsx Normal file
View file

@ -0,0 +1,40 @@
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;