feat: add error boundary

package.json

@@ -69,6 +69,7 @@
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.4",
     "react-fast-compare": "^3.2.1",
     "reactstrap": "^9.1.8"
   },

src/main.jsx

@@ -1,8 +1,49 @@
 import '@arcgis/core/assets/esri/themes/light/main.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/js/dist/collapse';
+import PropTypes from 'prop-types';
 import { createRoot } from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
 import App from './App';
 
+function ErrorFallback({ error }) {
+  return (
+    <div className="w-100 h-100 d-flex justify-content-center align-items-center">
+      <div className="alert alert-danger w-75" role="alert">
+        There was an error with the application!
+        <hr />
+        <div className="d-flex justify-content-between align-items-center w-100">
+          <button className="btn btn-primary" type="button" onClick={() => window.location.reload()}>
+            Reload
+          </button>
+          <button
+            className="btn btn-secondary"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#details"
+            aria-expanded="false"
+            aria-controls="technical details"
+          >
+            Show technical details 🤓
+          </button>
+        </div>
+        <div className="collapse mt-3" id="details">
+          <div className="card card-body">
+            <pre>{error?.stack}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ErrorFallback.propTypes = {
+  error: PropTypes.object,
+};
+
 document.title = import.meta.env.VITE_APP_TITLE;
-createRoot(document.getElementById('root')).render(<App />);
+createRoot(document.getElementById('root')).render(
+  <ErrorBoundary FallbackComponent={ErrorFallback}>
+    <App />
+  </ErrorBoundary>
+);