feat: add error boundary

package.json

@@ -79,6 +79,7 @@
     "pubsub-js": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^3.1.4",
     "react-leaflet": "^4.2.1",
     "react-toastify": "^9.1.1",
     "use-immer": "^0.8.1",

src/index.scss

@@ -17,3 +17,15 @@
 @use '../node_modules/react-toastify/scss/main.scss';
 @use '../node_modules/leaflet/dist/leaflet.css';
 @import url('../node_modules/bootstrap/dist/css/bootstrap.css');
+
+.error-boundary {
+  position: absolute;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  .alert {
+    width: 50%;
+  }
+}

src/main.jsx

@@ -2,11 +2,71 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.jsx';
 import './index.scss';
+import { ErrorBoundary } from 'react-error-boundary';
+import PropTypes from 'prop-types';
+import { getAuth } from 'firebase/auth';
+
+function Fallback({ error }) {
+  function reload() {
+    window.location.reload();
+  }
+
+  function clearSettings() {
+    localStorage.clear();
+    reload();
+  }
+
+  function clearData() {
+    if (window.confirm('Are you sure you want to clear any in-progress data? This cannot be undone.')) {
+      window.indexedDB.deleteDatabase('electrofishing');
+      reload();
+    }
+  }
+
+  function signOut() {
+    const auth = getAuth();
+    auth.signOut();
+  }
+
+  return (
+    <div className="error-boundary">
+      <div role="alert" className="alert alert-danger" style={{ width: '50%' }}>
+        <p>Something went wrong:</p>
+        <pre>{error.message}</pre>
+        <p>You can try:</p>
+        <button onClick={reload} className="btn btn-block btn-info">
+          Reload the page
+        </button>
+        <button onClick={signOut} className="btn btn-block btn-default">
+          Log out
+        </button>
+        <button onClick={clearSettings} className="btn btn-block btn-warning">
+          Clear cached settings
+        </button>
+        <button onClick={clearData} className="btn btn-block btn-danger">
+          Clear in-progress report data
+        </button>
+      </div>
+    </div>
+  );
+}
+
+Fallback.propTypes = {
+  error: PropTypes.object,
+  resetErrorBoundary: PropTypes.func,
+};
 
 const container = document.getElementById('root');
 const root = createRoot(container);
 root.render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary
+      FallbackComponent={Fallback}
+      onReset={() => {
+        window.location.reload();
+      }}
+    >
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>
 );