add custom error page

interface/src/index.tsx

@@ -4,13 +4,90 @@ import {
   Route,
   RouterProvider,
   createBrowserRouter,
-  createRoutesFromElements
+  createRoutesFromElements,
+  useRouteError
 } from 'react-router';
 
 import App from 'App';
 
+const errorPageStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '100vh',
+    padding: '2rem',
+    textAlign: 'center' as const,
+    backgroundColor: '#1e1e1e',
+    color: '#eee'
+  },
+  logo: {
+    width: '120px',
+    height: '120px',
+    marginBottom: '2rem'
+  },
+  title: {
+    fontSize: '3rem',
+    margin: '0 0 1rem 0',
+    color: '#90CAF9',
+    fontWeight: 500 as const
+  },
+  status: {
+    color: '#2196f3',
+    fontSize: '1.5rem',
+    fontWeight: 400 as const,
+    margin: '0 0 1rem 0'
+  },
+  message: {
+    fontSize: '1.1rem',
+    color: '#9e9e9e',
+    maxWidth: '600px',
+    margin: '0 0 2rem 0'
+  }
+};
+interface ErrorWithStatus {
+  status?: number | string;
+  statusText?: string;
+  message?: string;
+}
+
+function isErrorWithDetails(error: unknown): error is ErrorWithStatus {
+  return typeof error === 'object' && error !== null;
+}
+
+function getErrorStatus(error: unknown): string {
+  if (isErrorWithDetails(error) && 'status' in error && error.status != null) {
+    return String(error.status);
+  }
+  return 'Error';
+}
+
+function getErrorMessage(error: unknown): string {
+  if (!isErrorWithDetails(error)) {
+    return 'Something went wrong';
+  }
+  return error.statusText || error.message || 'Something went wrong';
+}
+
+// Custom Error Component
+function ErrorPage() {
+  const error = useRouteError();
+
+  return (
+    <div style={errorPageStyles.container}>
+      <img src="/app/icon.png" alt="EMS-ESP Logo" style={errorPageStyles.logo} />
+      <h1 style={errorPageStyles.title}>WebUI broke!</h1>
+      <h2 style={errorPageStyles.status}>{getErrorStatus(error)}</h2>
+      <p style={errorPageStyles.message}>{getErrorMessage(error)}</p>
+    </div>
+  );
+}
+
 const router = createBrowserRouter(
-  createRoutesFromElements(<Route path="/*" element={<App />} />)
+  createRoutesFromElements(
+    <Route path="/*" element={<App />} errorElement={<ErrorPage />} />
+  )
 );
 
 createRoot(document.getElementById('root')!).render(