added recover page on unexpected error

package.json

@@ -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"
 }

src/App.tsx

@@ -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()}>

src/UnexpectedError.tsx

@@ -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;