fix: show more information on client errors

src/client/error/DashboardErrorBoundary.tsx

@@ -5,7 +5,7 @@ export default function DashboardErrorBoundary(props: Record<string, any>) {
     <GenericError
       title='Dashboard Client Error'
       message='Something went wrong while loading the dashboard. Please try again later, or report this issue if it persists.'
-      details={props}
+      details={{ ...props, type: 'dashboard' }}
     />
   );
 }

src/client/error/GenericError.tsx

@@ -1,4 +1,4 @@
-import { Container, Paper, Stack, Text, Title } from '@mantine/core';
+import { Container, Paper, ScrollArea, Stack, Text, Title } from '@mantine/core';
 import { useRouteError } from 'react-router-dom';
 import FourOhFour from '../pages/404';
 
@@ -11,9 +11,12 @@ export default function GenericError({
   message?: string;
   details?: Record<string, any>;
 }) {
-  const routeError: any = useRouteError();
+  const routerError: any = useRouteError();
+  if (routerError?.status === 404) return <FourOhFour />;
 
-  if (routeError?.status === 404) return <FourOhFour />;
+  const routeError = JSON.parse(JSON.stringify(routerError, Object.getOwnPropertyNames(routerError)));
+
+  console.error(routerError);
 
   return (
     <Container my='lg'>
@@ -24,7 +27,9 @@ export default function GenericError({
         </Text>
         {details && (
           <Paper withBorder px={3} py={3}>
-            <pre style={{ margin: 0 }}>{JSON.stringify({ routeError, details }, null, 2)}</pre>
+            <ScrollArea>
+              <pre style={{ margin: 0 }}>{JSON.stringify({ routeError, details }, null, 2)}</pre>
+            </ScrollArea>
           </Paper>
         )}
       </Stack>

src/client/error/RootErrorBoundary.tsx

@@ -5,7 +5,7 @@ export default function RootErrorBoundary(props: Record<string, any>) {
     <GenericError
       title='Dashboard Client Error'
       message='Something went wrong while loading the dashboard. Please try again later, or report this issue if it persists.'
-      details={props}
+      details={{ ...props, type: 'root' }}
     />
   );
 }

src/client/routes.tsx

@@ -1,7 +1,7 @@
 import Layout from '@/components/Layout';
 import { Response as ApiResponse } from '@/lib/api/response';
 import { isAdministrator } from '@/lib/role';
-import { createBrowserRouter, redirect } from 'react-router-dom';
+import { createBrowserRouter, data, redirect } from 'react-router-dom';
 import DashboardErrorBoundary from './error/DashboardErrorBoundary';
 import RootErrorBoundary from './error/RootErrorBoundary';
 import FourOhFour from './pages/404';
@@ -10,15 +10,19 @@ import Logout from './pages/auth/logout';
 import Root from './Root';
 
 export async function dashboardLoader() {
-  const res = await fetch('/api/server/settings/web');
-  if (!res.ok) {
-    return redirect('/auth/login');
+  try {
+    const res = await fetch('/api/server/settings/web');
+    if (!res.ok) {
+      return redirect('/auth/login');
+    }
+
+    const data = await res.json();
+    console.log('Loaded settings:', data);
+
+    return data as ApiResponse['/api/server/settings/web'];
+  } catch (error) {
+    throw data('Failed to load settings' + (error as any).message, { status: 500 });
   }
-
-  const data = await res.json();
-  console.log('Loaded settings:', data);
-
-  return data as ApiResponse['/api/server/settings/web'];
 }
 
 export const router = createBrowserRouter([