Add a crash handler

gingershaped · gingershaped · commit d9df33d9b588 · 2024-11-10T13:34:21.000-05:00
diff --git a/src/latest/latest.html b/src/latest/latest.html
@@ -23,7 +23,7 @@
 </head>
 
 <body data-bs-theme="dark">
-    <div id="react-container">
+    <div id="fallback-ui">
         <header id="header">
             <nav class="navbar navbar-expand bg-body-tertiary">
                 <div class="container">
@@ -46,6 +46,7 @@ <h3><i class="bi bi-braces me-2 text-warning"></i>Please enable JavaScript</h3>
             </noscript>
         </main>
     </div>
+    <div id="react-container"></div>
 </body>
 
 </html>
diff --git a/src/latest/scripts/main.tsx b/src/latest/scripts/main.tsx
@@ -3,9 +3,13 @@ import { createRoot } from "react-dom/client";
 import { decodeHash } from "./interpreter/permalink";
 import { ElementDataContext, parseElementData } from "./interpreter/element-data";
 import { Theseus } from "./ui/Theseus";
+import { ErrorBoundary } from "react-error-boundary";
+import { CatastrophicFailure } from "./ui/CatastrophicFailure";
 
 enableMapSet();
 const root = createRoot(document.getElementById("react-container")!);
+const fallback = document.getElementById("fallback-ui")!;
+fallback.hidden = true;
 const permalink = window.location.hash.length ? await decodeHash(window.location.hash.slice(1)) : null;
 if (permalink != null && !permalink.compatible) {
     window.location.replace(`https://vyxal.github.io/versions/v${permalink.version}#${location.hash.substring(1)}`);
@@ -14,7 +18,9 @@ if (permalink != null && !permalink.compatible) {
     const elementData = parseElementData(await fetch(`${DATA_URI}/theseus.json`).then((r) => r.json()));
     root.render(
         <ElementDataContext.Provider value={elementData}>
-            <Theseus permalink={permalink?.permalink ?? null} />
+            <ErrorBoundary fallbackRender={CatastrophicFailure}>
+                <Theseus permalink={permalink?.permalink ?? null} />
+            </ErrorBoundary>
         </ElementDataContext.Provider>,
     );
 }
diff --git a/src/latest/scripts/ui/CatastrophicFailure.tsx b/src/latest/scripts/ui/CatastrophicFailure.tsx
@@ -0,0 +1,26 @@
+import { FallbackProps } from "react-error-boundary";
+
+export function CatastrophicFailure({ resetErrorBoundary }: FallbackProps) {
+    return <>
+        <header >
+            <nav className="navbar navbar-expand bg-body-tertiary">
+                <div className="container">
+                    <span className="navbar-brand">
+                        &nbsp;
+                    </span>
+                </div>
+            </nav>
+        </header>
+        <main className="container-sm my-auto">
+            <div className="border border-danger bg-danger-subtle rounded p-4 mx-auto" style={{ maxWidth: "768px" }}>
+                <h3><i className="bi bi-exclamation-circle-fill me-2 text-danger"></i>Catastrophic failure</h3>
+                <p>
+                    The interpreter has crashed. Sorry about that! Don't worry, your code has  been preserved.
+                    If you can reproduce this crash, please open an issue
+                    on <a href="https://github.com/vyxal/vyxal.github.io/issues/">the GitHub repository</a>.
+                </p>
+                <button className="btn btn-danger" onClick={resetErrorBoundary}>Restart</button>
+            </div>
+        </main>
+    </>;
+}
diff --git a/src/latest/scripts/ui/Theseus.tsx b/src/latest/scripts/ui/Theseus.tsx
@@ -153,6 +153,7 @@ export function Theseus({ permalink }: TheseusProps) {
         }
     }, [code, flags, inputs, timeout, runnerRef, state]);
 
+    throw new Error("frob")
     return <>
         <SettingsDialog
             settings={settings}

Original file line number	Diff line number	Diff line change
`@@ -153,6 +153,7 @@ export function Theseus({ permalink }: TheseusProps) {`
`153`	`153`	`}`
`154`	`154`	`}, [code, flags, inputs, timeout, runnerRef, state]);`
`155`	`155`
	`156`	`+ throw new Error("frob")`
`156`	`157`	`return <>`
`157`	`158`	`<SettingsDialog`
`158`	`159`	`settings={settings}`