feat: add root-level error fallback

agrc · Nov 29, 2024 · afbff8c · afbff8c
1 parent 12d0fb5
commit afbff8c
Showing 1 changed file with 24 additions and 7 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,7 @@
 import '@arcgis/core/assets/esri/themes/light/main.css';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
 import App from './App';
 import { AnalyticsProvider, FirebaseAppProvider, MapProvider } from './components/contexts';
 import './index.css';
@@ -19,14 +20,30 @@ if (import.meta.env.VITE_FIREBASE_CONFIG) {
   firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
 }
 
+const MainErrorFallback = ({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) => {
+  return (
+    <div className="static flex h-screen w-screen items-center justify-center">
+      <div className="flex-col items-center">
+        <h1>Something went wrong</h1>
+        <pre style={{ color: 'red' }}>{error.message}</pre>
+        <button className="w-full rounded-full border p-1" onClick={resetErrorBoundary}>
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+};
+
 createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
-      <AnalyticsProvider>
-        <MapProvider>
-          <App />
-        </MapProvider>
-      </AnalyticsProvider>
-    </FirebaseAppProvider>
+    <ErrorBoundary FallbackComponent={MainErrorFallback} onReset={() => window.location.reload()}>
+      <FirebaseAppProvider firebaseConfig={firebaseConfig}>
+        <AnalyticsProvider>
+          <MapProvider>
+            <App />
+          </MapProvider>
+        </AnalyticsProvider>
+      </FirebaseAppProvider>
+    </ErrorBoundary>
   </React.StrictMode>,
 );