add error boundary. for now redirects to home

client/src/App.jsx

@@ -110,7 +110,7 @@ const App = () => {
         <CssBaseline />
         <TranslationProvider>
           <Track>
-            <ContentWrapper setDarkMode={setPrefersDarkMode} />
+            <ContentWrapper />
           </Track>
         </TranslationProvider>
       </ThemeProvider>

client/src/components/ContentWrapper.jsx

@@ -3,7 +3,6 @@ import { Outlet, useLocation } from "react-router-dom";
 import NavTabs from "./NavTabs";
 import { makeStyles } from '@material-ui/styles';
 import { Box } from '@material-ui/core';
-import { func } from "prop-types";
 import Snackbars from "./util/Snackbars";
 import { LoadingBody } from "./Loading";
 
@@ -49,10 +48,5 @@ const ContentWrapper = (props) => {
   );
 }
 
-ContentWrapper.propTypes = {
-  /** needs to receive a function that can toggle dark mode directly from the App.jsx component to pass to component that has dark mode settings */
-  setDarkMode: func.isRequired,
-}
-
 export default ContentWrapper;
 

client/src/components/ErrorBoundary.jsx

@@ -0,0 +1,8 @@
+import { Navigate, useRouteError } from 'react-router-dom';
+
+export default function ErrorBoundary() {
+  const error = useRouteError();
+  console.log('error', error.error.message);
+
+  return <Navigate to="/" />
+}

client/src/index.jsx

@@ -4,13 +4,13 @@ import { createBrowserRouter, RouterProvider, } from "react-router-dom";
 import TrackedApp from "./TrackedApp";
 import ServiceWorkerUpdateService from "./components/ServiceWorkerUpdateService";
 import { Auth0ProviderWithRedirectCallback } from "./components/util";
+import Home from  "./components/Home";
+import ErrorBoundary from "./components/ErrorBoundary";
 
 const domain = process.env.REACT_APP_AUTH0_DOMAIN;
 const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
 
 // route-based lazy loading of components according to https://legacy.reactjs.org/docs/code-splitting.html#route-based-code-splitting and https://react.dev/reference/react/lazy#load
-const Home = lazy(() => import('./components/Home'));
-
 const AddMeal = lazy(() => import('./components/Meals/AddMeal'));
 const EditMeal = lazy(() => import('./components/Meals/EditMeal'));
 const OwnMeals = lazy(() => import('./components/Meals/OwnMeals'));
@@ -31,6 +31,7 @@ const EditProfile = lazy(() => import('./components/Settings/EditProfile'));
 const router = createBrowserRouter([
   {
     Component: Root,
+    errorElement: <ErrorBoundary />,
     children: [
       {
         path: '/',