tutu/src/UnexpectedError.tsx

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;