Approve database migration

src/components/error/RouteErrorBoundary.tsx

@@ -43,6 +43,9 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Generate error ID for user reference
+    const errorId = crypto.randomUUID();
+    
     // Critical: Route-level error - highest priority logging
     logger.error('Route-level error caught by boundary', {
       error: error.message,
@@ -50,7 +53,10 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
       componentStack: errorInfo.componentStack,
       url: window.location.href,
       severity: 'critical',
+      errorId,
     });
+
+    this.setState({ error: { ...error, errorId } as any });
   }
 
   handleReload = () => {
@@ -78,11 +84,18 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              {import.meta.env.DEV && this.state.error && (
-                <div className="p-3 bg-muted rounded-lg">
-                  <p className="text-xs font-mono text-muted-foreground">
-                    {this.state.error.message}
-                  </p>
+              {this.state.error && (
+                <div className="p-3 bg-muted rounded-lg space-y-2">
+                  {import.meta.env.DEV && (
+                    <p className="text-xs font-mono text-muted-foreground">
+                      {this.state.error.message}
+                    </p>
+                  )}
+                  {(this.state.error as any)?.errorId && (
+                    <p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
+                      Reference ID: {((this.state.error as any).errorId as string).slice(0, 8)}
+                    </p>
+                  )}
                 </div>
               )}