testing error boundary

react-app/package.json

@@ -18,14 +18,15 @@
     "@bcgov/citz-imb-kc-react": "https://github.com/bcgov/citz-imb-kc-react/releases/download/v1.4.0/bcgov-citz-imb-kc-react-1.4.0.tgz",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@mui/icons-material": "5.15.6",
     "@mdi/js": "7.4.47",
     "@mdi/react": "1.6.1",
+    "@mui/icons-material": "5.15.6",
     "@mui/material": "5.15.6",
     "@mui/x-data-grid": "6.19.2",
     "node-xlsx": "0.23.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-error-boundary": "4.0.12",
     "react-hook-form": "7.50.1",
     "react-router-dom": "6.22.0"
   },

react-app/src/App.tsx

@@ -11,6 +11,8 @@ import AuthRouteGuard from './guards/AuthRouteGuard';
 import BaseLayout from './components/layout/BaseLayout';
 import { AccessRequest } from './pages/AccessRequest';
 import UsersManagement from './pages/UsersManagement';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useNavigate } from 'react-router-dom';
 
 const Router = () => {
   return (
@@ -63,11 +65,37 @@ const Router = () => {
   );
 };
 
+const FallbackRenderPage = ({ error, resetErrorBoundary }) => {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+  const navigate = useNavigate();
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+      <button
+        onClick={() => {
+          resetErrorBoundary();
+          navigate('/');
+        }}
+      >
+        Return to home page.
+      </button>
+    </div>
+  );
+};
+
 const App = () => {
   return (
-    <ThemeProvider theme={appTheme}>
-      <Router />
-    </ThemeProvider>
+    <ErrorBoundary
+      onReset={() => {
+        console.log('hi');
+      }}
+      fallbackRender={FallbackRenderPage}
+    >
+      <ThemeProvider theme={appTheme}>
+        <Router />
+      </ThemeProvider>
+    </ErrorBoundary>
   );
 };