Error boundary

client/package.json

@@ -18,7 +18,7 @@
         "dayjs": "^1.11.18",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router": "^7.9.1"
+        "react-router-dom": "^7.9.1"
     },
     "devDependencies": {
         "@types/node": "^24.5.1",

client/src/components/base/MainNavigation.tsx

@@ -7,7 +7,7 @@ import {
     useTheme,
 } from '@mui/material';
 import { SemossBlueLogo } from '@/assets';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { AccountCircle } from '@mui/icons-material';
 import { useInsight } from '@semoss/sdk-react';
 import { useState } from 'react';

client/src/pages/ErrorPage.tsx

@@ -0,0 +1,24 @@
+import { ErrorOutline } from '@mui/icons-material';
+import { Stack, Typography } from '@mui/material';
+
+/**
+ * Renders a warning message for any FE errors encountered.
+ *
+ * @component
+ */
+export const ErrorPage = () => {
+    return (
+        <Stack
+            height="100%"
+            alignItems="center"
+            justifyContent="center"
+            spacing={1}
+        >
+            <ErrorOutline color="error" fontSize="large" />
+            <Typography variant="body1">
+                An error has occurred. Please try again or contact support if
+                the problem persists.
+            </Typography>
+        </Stack>
+    );
+};

client/src/pages/HomePage.tsx

@@ -7,6 +7,9 @@ import { Stack, Typography } from '@mui/material';
  * @component
  */
 export const HomePage = () => {
+    /**
+     * State
+     */
     const [data, isLoading] = useLoadingPixel<string>('HelloUser()');
 
     return (

client/src/pages/LoginPage.tsx

@@ -3,7 +3,7 @@ import { useLoadingState } from '@/hooks';
 import { Button, Stack, TextField } from '@mui/material';
 import { useInsight } from '@semoss/sdk-react';
 import { ChangeEvent, useRef, useState } from 'react';
-import { Navigate, useLocation } from 'react-router';
+import { Navigate, useLocation } from 'react-router-dom';
 
 /**
  * Renders a the login page if the user is not already logged in, otherwise sends them to the home page.

client/src/pages/Router.tsx

@@ -1,37 +1,54 @@
-import { HashRouter, Navigate, Route, Routes } from 'react-router';
+import { createHashRouter, Navigate, RouterProvider } from 'react-router-dom';
 import { ROUTE_PATH_LOGIN_PAGE } from './routes.constants';
 import { AuthorizedLayout, InitializedLayout } from './layouts';
 import { HomePage } from './HomePage';
 import { LoginPage } from './LoginPage';
+import { ErrorPage } from './ErrorPage';
+
+const router = createHashRouter([
+    {
+        // Wrap every route in InitializedLayout to ensure SEMOSS is ready to handle requests
+        Component: InitializedLayout,
+        // Catch errors in any of the initialized pages, to prevent the whole app from crashing
+        ErrorBoundary: ErrorPage,
+        children: [
+            {
+                // Wrap pages that should only be available to logged in users
+                Component: AuthorizedLayout,
+                // Also catch errors in any of the authorized pages, allowing the navigation to continue working
+                ErrorBoundary: ErrorPage,
+                children: [
+                    {
+                        // If the path is empty, use the home page
+                        index: true,
+                        Component: HomePage,
+                    },
+                    // {
+                    //     // Example of a new page
+                    //     path: '/new-page',
+                    //     Component: NewPage,
+                    // }
+                ],
+            },
+            {
+                // The login page should be available to non-logged in users (duh)
+                path: ROUTE_PATH_LOGIN_PAGE,
+                Component: LoginPage,
+            },
+            {
+                // Any other urls should be sent to the home page
+                path: '*',
+                Component: () => <Navigate to="/" />,
+            },
+        ],
+    },
+]);
 
 /**
  * Renders pages based on url.
  *
  * @component
  */
 export const Router = () => {
-    return (
-        // Semoss projects typically use HashRouters
-        <HashRouter>
-            <Routes>
-                {/* Wrap every route in InitializedLayout to ensure SEMOSS is ready to handle requests */}
-                <Route element={<InitializedLayout />}>
-                    {/* Wrap pages that should only be available to logged in users */}
-                    <Route element={<AuthorizedLayout />}>
-                        {/* If the path is empty, use the home page */}
-                        <Route index element={<HomePage />} />
-                    </Route>
-
-                    {/* The login page should be available to non-logged in users (duh) */}
-                    <Route
-                        path={ROUTE_PATH_LOGIN_PAGE}
-                        element={<LoginPage />}
-                    />
-
-                    {/* Any other urls should be sent to the home page */}
-                    <Route path="*" element={<Navigate to="/" />} />
-                </Route>
-            </Routes>
-        </HashRouter>
-    );
+    return <RouterProvider router={router} />;
 };

client/src/pages/layouts/AuthorizedLayout.tsx

@@ -1,5 +1,5 @@
 import { useInsight } from '@semoss/sdk-react';
-import { Navigate, Outlet, useLocation } from 'react-router';
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
 import { ROUTE_PATH_LOGIN_PAGE } from '../routes.constants';
 import { useAppContext } from '@/contexts';
 import { LoadingScreen } from '@/components';

client/src/pages/layouts/InitializedLayout.tsx

@@ -1,7 +1,7 @@
 import { LoadingScreen, MainNavigation } from '@/components';
 import { Stack } from '@mui/material';
 import { useInsight } from '@semoss/sdk-react';
-import { Outlet } from 'react-router';
+import { Outlet } from 'react-router-dom';
 
 /**
  * Renders a loading wheel if SEMOSS is not initialized.