react-error-boundary commit

client/package.json

@@ -22,6 +22,7 @@
 		"jsonwebtoken": "^9.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-error-boundary": "^4.0.10",
 		"react-hook-form": "^7.34.0",
 		"react-input-mask": "^3.0.0-alpha.2",
 		"react-query": "^3.35.0",

client/src/App.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-// import { Grid, ThemeProvider, Theme, StyledEngineProvider } from '@mui/material';
 import { Grid, ThemeProvider, StyledEngineProvider } from '@mui/material';
 
 import theme from './theme';
 import Header from './components/Header';
 import Main from './views/Main';
 import Footer from './components/Footer';
 import Modal from './components/Modal';
+import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
+import GeneralError from './components/ErrorBoundary/GeneralError';
+import NotFound from './components/ErrorBoundary/NotFoundError';
 
 import { UserProvider } from './providers';
 import { ModalProvider } from './providers/ModalProvider';
@@ -16,11 +18,6 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 
 import './App.css';
 
-// declare module '@mui/styles/defaultTheme' {
-//   // eslint-disable-next-line @typescript-eslint/no-empty-interface
-//   interface DefaultTheme extends Theme {}
-// }
-
 const queryClient = new QueryClient();
 
 function App(): JSX.Element {
@@ -29,30 +26,33 @@ function App(): JSX.Element {
       <ThemeProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools />
-          <UserProvider>
-            <ModalProvider>
-              <BrowserRouter
-                getUserConfirmation={() => {
-                  // intentionally left empty callback to block the default browser prompt.
-                }}
-              >
-                <Grid
-                  className="App"
-                  display="flex"
-                  flexDirection="column"
-                  height="100vh"
-                  width="100vw"
-                  justifyContent="space-between"
+          <ErrorBoundary fallback={GeneralError}>
+            <UserProvider>
+              <ModalProvider>
+                <BrowserRouter
+                  getUserConfirmation={() => {
+                    // intentionally left empty callback to block the default browser prompt.
+                  }}
                 >
-                  {/* move modal to below footer after troubleshooting */}
-                  <Modal />
-                  <Header />
-                  <Main />
-                  <Footer />
-                </Grid>
-              </BrowserRouter>
-            </ModalProvider>
-          </UserProvider>
+                  <Grid
+                    className="App"
+                    display="flex"
+                    flexDirection="column"
+                    height="100vh"
+                    width="100vw"
+                    justifyContent="space-between"
+                  >
+                    <Header />
+                    <ErrorBoundary fallback={NotFound}>
+                      <Main />
+                    </ErrorBoundary>
+                    <Footer />
+                    <Modal />
+                  </Grid>
+                </BrowserRouter>
+              </ModalProvider>
+            </UserProvider>
+          </ErrorBoundary>
         </QueryClientProvider>
       </ThemeProvider>
     </StyledEngineProvider>

client/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,13 @@
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { ErrorFallbackProps } from './GeneralError'; // Importing type from GeneralError.tsx
+
+type ErrorBoundaryProps = {
+  fallback: React.ComponentType<ErrorFallbackProps>;
+  children: React.ReactNode;
+};
+
+const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ fallback: Fallback, children }) => {
+  return <ReactErrorBoundary FallbackComponent={Fallback}>{children}</ReactErrorBoundary>;
+};
+
+export default ErrorBoundary;

client/src/components/ErrorBoundary/GeneralError.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export type ErrorFallbackProps = {
+  error: Error;
+  resetErrorBoundary: () => void;
+};
+
+const GeneralError: React.FC<ErrorFallbackProps> = ({ error, resetErrorBoundary }) => {
+  return (
+    <div>
+      <p>Oops! An unexpected error occurred:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+};
+
+export default GeneralError;

client/src/components/ErrorBoundary/NotFoundError.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const NotFound: React.FC = () => {
+  return (
+    <div>
+      <p>404: Page not found.</p>
+    </div>
+  );
+};
+
+export default NotFound;

client/src/components/Modal.tsx

@@ -106,7 +106,7 @@ const Modal = () => {
   }
 
   return (
-    <div id="mango">
+    <div>
       <SpecificModal ref={modalRef} closeModal={closeModal} className={classes} />
     </div>
   );

client/src/components/Modals/SignInModal.tsx

@@ -18,6 +18,7 @@ import Divider from '@mui/material/Divider';
 import { UserContext } from '../../providers';
 import routes from '../../routes/routes';
 import { APP_API_BASE_URL } from '../../configs';
+
 interface SignInModalProps {
   closeModal: () => void;
   className: {