Fix error boundary logging

src/components/error/AdminErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, ArrowLeft, RefreshCw, Shield } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface AdminErrorBoundaryProps {
   children: ReactNode;
@@ -50,16 +50,14 @@ export class AdminErrorBoundary extends Component<AdminErrorBoundaryProps, Admin
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: `Admin panel error in ${this.props.section || 'unknown section'}`,
-    logger.error('Admin panel error caught by boundary', {
+      metadata: {
-      section: this.props.section || 'unknown',
+        section: this.props.section,
-      error: error.message,
+        componentStack: errorInfo.componentStack,
-      stack: error.stack,
+        severity: 'high',
-      componentStack: errorInfo.componentStack,
+      },
-      severity: 'high', // Admin errors are high priority
-      errorId,
     });
 
     this.setState({ errorInfo, error: { ...error, errorId } as ErrorWithId });

src/components/error/EntityErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, ArrowLeft, Home, RefreshCw } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface EntityErrorBoundaryProps {
   children: ReactNode;
@@ -38,16 +38,14 @@ export class EntityErrorBoundary extends Component<EntityErrorBoundaryProps, Ent
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: `${this.props.entityType} page error`,
-    logger.error('Entity page error caught by boundary', {
+      metadata: {
-      entityType: this.props.entityType,
+        entityType: this.props.entityType,
-      entitySlug: this.props.entitySlug,
+        entitySlug: this.props.entitySlug,
-      error: error.message,
+        componentStack: errorInfo.componentStack,
-      stack: error.stack,
+      },
-      componentStack: errorInfo.componentStack,
-      errorId,
     });
 
     this.setState({ errorInfo, error: { ...error, errorId } as ErrorWithId });

src/components/error/ErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, Home, RefreshCw } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -38,16 +38,13 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: `Component error in ${this.props.context || 'unknown context'}`,
-    // Log error with context
+      metadata: {
-    logger.error('Component error caught by boundary', {
+        context: this.props.context,
-      context: this.props.context || 'unknown',
+        componentStack: errorInfo.componentStack,
-      error: error.message,
+      },
-      stack: error.stack,
-      componentStack: errorInfo.componentStack,
-      errorId,
     });
 
     this.setState({ errorInfo, error: { ...error, errorId } as ErrorWithId });

src/components/error/ModerationErrorBoundary.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface ModerationErrorBoundaryProps {
   children: ReactNode;
@@ -18,6 +18,8 @@ interface ModerationErrorBoundaryState {
   errorInfo: ErrorInfo | null;
 }
 
+type ErrorWithId = Error & { errorId: string };
+
 /**
  * Error Boundary for Moderation Queue Components
  * 
@@ -52,17 +54,18 @@ export class ModerationErrorBoundary extends Component<
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Log error to monitoring system
+    // Log to database and get error ID for user reference
-    logger.error('Moderation component error caught by boundary', {
+    const errorId = handleError(error, {
-      action: 'error_boundary_catch',
+      action: 'Moderation queue item render error',
-      submissionId: this.props.submissionId,
+      metadata: {
-      error: error.message,
+        submissionId: this.props.submissionId,
-      stack: error.stack,
+        componentStack: errorInfo.componentStack,
-      componentStack: errorInfo.componentStack,
+      },
     });
 
     // Update state with error info
     this.setState({
+      error: { ...error, errorId } as ErrorWithId,
       errorInfo,
     });
 
@@ -103,6 +106,11 @@ export class ModerationErrorBoundary extends Component<
                   <p className="text-sm">
                     {this.state.error?.message || 'An unexpected error occurred'}
                   </p>
+                  {(this.state.error as ErrorWithId)?.errorId && (
+                    <p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
+                      Reference ID: {(this.state.error as ErrorWithId).errorId.slice(0, 8)}
+                    </p>
+                  )}
                   {this.props.submissionId && (
                     <p className="text-xs text-muted-foreground font-mono">
                       Submission ID: {this.props.submissionId}

src/components/error/RouteErrorBoundary.tsx

@@ -2,7 +2,7 @@ import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { AlertTriangle, Home, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { logger } from '@/lib/logger';
+import { handleError } from '@/lib/errorHandler';
 
 interface RouteErrorBoundaryProps {
   children: ReactNode;
@@ -32,17 +32,14 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Generate error ID for user reference
+    // Log to database and get error ID for user reference
-    const errorId = crypto.randomUUID();
+    const errorId = handleError(error, {
-    
+      action: 'Route-level component crash',
-    // Critical: Route-level error - highest priority logging
+      metadata: {
-    logger.error('Route-level error caught by boundary', {
+        componentStack: errorInfo.componentStack,
-      error: error.message,
+        url: window.location.href,
-      stack: error.stack,
+        severity: 'critical',
-      componentStack: errorInfo.componentStack,
+      },
-      url: window.location.href,
-      severity: 'critical',
-      errorId,
     });
 
     this.setState({ error: { ...error, errorId } as ErrorWithId });