put error boundary around the group page

package-lock.json

@@ -27,6 +27,7 @@
         "react": "^18.3.1",
         "react-color": "^2.19.3",
         "react-dom": "^18.3.1",
+        "react-error-boundary": "^5.0.0",
         "react-image": "^4.1.0",
         "react-infinite-scroller": "^1.2.6",
         "react-phone-input-2": "^2.15.1",
@@ -4350,6 +4351,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-5.0.0.tgz",
+      "integrity": "sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-image": {
       "version": "4.1.0",
       "integrity": "sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==",

package.json

@@ -36,6 +36,7 @@
     "react": "^18.3.1",
     "react-color": "^2.19.3",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-image": "^4.1.0",
     "react-infinite-scroller": "^1.2.6",
     "react-phone-input-2": "^2.15.1",

src/app/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.tsx'
+import App from './App'
 
 // I don't consider providing a disabled button to a Tooltip an error.
 // console.error = (message) => {

src/navigation/Router.tsx

@@ -12,6 +12,7 @@ import Devices from "pages/Devices";
 import DevicePage from "pages/Device";
 import GroupsPage from "pages/Groups";
 import GroupPage from "pages/Group";
+import { ErrorBoundary } from "react-error-boundary";
 
 interface Props {
   toggleTheme: () => void;
@@ -78,6 +79,11 @@ export default function Router(props: Props) {
     );
   };
 
+
+  <ErrorBoundary FallbackComponent={ErrorFallback}>
+  <Route path="*" element={<RelativeRoutes/>} />
+</ErrorBoundary>
+
   const GroupsRoute = () => {
     return (
       <div>
@@ -88,7 +94,11 @@ export default function Router(props: Props) {
           />
           <Route
             path="/:groupID" 
-            element={<GroupPage />}
+            element={
+              <ErrorBoundary FallbackComponent={ErrorFallback}>
+                <GroupPage />
+              </ErrorBoundary>
+            }
           />
           <Route
             key="Devices page route"
@@ -116,6 +126,10 @@ export default function Router(props: Props) {
     )
   }
 
+  function ErrorFallback({ error }: { error: Error }) {
+    return <div>Something went wrong: {error.message}</div>;
+  }
+
   return (
     <Suspense fallback={<LoadingScreen />}>
       <BrowserRouter>
@@ -135,6 +149,11 @@ export default function Router(props: Props) {
           <Route index element={<Typography>Hello!</Typography>} />
           <Route path="users" element={<Users/>} />
           <Route path="/logout" element={<Logout />} />
+{/* 
+          <ErrorBoundary FallbackComponent={ErrorFallback}>
+            <Route path="*" element={<RelativeRoutes/>} />
+          </ErrorBoundary> */}
+
           <Route path="*" element={<RelativeRoutes/>} />
           
         </Routes>