60 lines
1.7 KiB
TypeScript
60 lines
1.7 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");
|
|
try {
|
|
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}`;
|
|
} catch (reason) {
|
|
return `<failed to build the stacktrace of "${err}"...>\n${reason}`;
|
|
}
|
|
}
|
|
|
|
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
|
|
</summary>
|
|
<pre>{errorMsg()}</pre>
|
|
</details>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default UnexpectedError;
|