fix: Hide router error details in production

frontend/src/components/ErrorBoundary/RouterError.tsx

@@ -1,17 +1,11 @@
 import { useRouteError } from 'react-router-dom'
 
+import { ENV } from '@/util/config'
+import { getRouterErrorMessage } from './RouterErrorMessages'
+
 export const RouterError = () => {
   const error = useRouteError()
-
+  const errorMessage = getRouterErrorMessage(error, ENV === 'dev')
-  // Handle different error types that useRouteError can return
-  const errorMessage =
-    error instanceof Error
-      ? error.message
-      : error instanceof Response
-        ? `${error.status} ${error.statusText}`
-        : typeof error === 'string'
-          ? error
-          : 'An unknown error occurred'
 
   return (
     <div style={styles.container}>

frontend/src/components/ErrorBoundary/RouterErrorMessages.ts

@@ -0,0 +1,21 @@
+const genericErrorMessage = 'An unexpected navigation error occurred.'
+
+export const getRouterErrorMessage = (error: unknown, isDevelopment: boolean): string => {
+  if (!isDevelopment) {
+    return genericErrorMessage
+  }
+
+  if (error instanceof Error) {
+    return error.message
+  }
+
+  if (error instanceof Response) {
+    return `${error.status} ${error.statusText}`
+  }
+
+  if (typeof error === 'string') {
+    return error
+  }
+
+  return 'An unknown error occurred'
+}

frontend/src/tests/components/RouterError.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from '@jest/globals'
+
+import { getRouterErrorMessage } from '@/components/ErrorBoundary/RouterErrorMessages'
+
+describe('getRouterErrorMessage', () => {
+  it('returns a generic message outside development', () => {
+    expect(getRouterErrorMessage(new Error('sensitive route loader details'), false)).toBe(
+      'An unexpected navigation error occurred.'
+    )
+  })
+
+  it('returns raw error details in development', () => {
+    expect(getRouterErrorMessage(new Error('route loader failed'), true)).toBe('route loader failed')
+  })
+})