tutu/src/UnexpectedError.tsx
2024-10-13 16:12:16 +08:00

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;