# H4 Error Boundaries Implementation Plan for 50-Dollar-App ## Current Status ✅ **Root Error Boundary Exists**: `/src/app/error.tsx` - A well-designed error boundary is already in place at the root level with: - Professional UI with card layout - Development mode error messages - User-friendly support information - Retry and homepage navigation options - Responsive design ❌ **Missing Nested Error Boundaries**: No error boundaries in specific route segments ## Gap Analysis ### What's Missing: 1. **Global Error Boundary** - For server-side rendering errors 2. **Auth Section Error Boundary** - For authentication-related errors 3. **Authenticated Section Error Boundary** - For dashboard/post-auth errors 4. **Dynamic Route Error Boundaries** - For specific conversation/job pages 5. **API Error Boundary Wrapper** - For consistent API error handling ### Current Error Handling Patterns: - API routes use try-catch with specific error responses - Client components use useState for error management - No error boundaries for server components - No consistent error recovery mechanism ## Implementation Plan ### 1. Global Error Boundary **File**: `src/app/global-error.tsx` **Purpose**: Catch errors during server-side rendering and server components ```tsx 'use client' import { useEffect } from 'react' import { AlertCircle, RefreshCw, Home } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' export default function GlobalError({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { console.error('Global error:', error) }, [error]) return (
System Error Something went wrong while loading the page. {process.env.NODE_ENV === 'development' && (

{error.message || 'Unknown error occurred'}

{error.digest && (

Error ID: {error.digest}

)}
)}
) } ``` ### 2. Auth Section Error Boundary **File**: `src/app/auth/error.tsx` **Purpose**: Handle errors in authentication flow ```tsx 'use client' import { useEffect } from 'react' import Link from 'next/link' import { AlertCircle, RefreshCw, Home, LogIn } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' export default function AuthError({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { console.error('Auth section error:', error) }, [error]) return (
Authentication Error We couldn't complete your authentication. {process.env.NODE_ENV === 'development' && (

{error.message || 'Unknown error occurred'}

)}

Try clearing your browser cookies or contact support if the problem persists.

) } ``` ### 3. Authenticated Section Error Boundary **File**: `src/app/(authenticated)/error.tsx` **Purpose**: Handle errors in authenticated dashboard area ```tsx 'use client' import { useEffect } from 'react' import Link from 'next/link' import { AlertCircle, RefreshCw, Home, LayoutDashboard } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { BottomNavWrapper } from '@/components/bottom-nav-wrapper' export default function AuthenticatedError({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { console.error('Authenticated section error:', error) }, [error]) return (
RateRight
Dashboard Error Something went wrong with your dashboard. {process.env.NODE_ENV === 'development' && (

{error.message || 'Unknown error occurred'}

{error.digest && (

Error ID: {error.digest}

)}
)}

Don't worry, your data is safe. Try refreshing the page or contact support if the issue persists.

) } ``` ### 4. Dynamic Route Error Boundaries #### Conversation Error Boundary **File**: `src/app/(authenticated)/messages/[conversationId]/error.tsx` **Purpose**: Handle errors in conversation pages ```tsx 'use client' import { useEffect } from 'react' import Link from 'next/link' import { useParams } from 'next/navigation' import { AlertCircle, RefreshCw, MessageSquare, ArrowLeft } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' export default function ConversationError({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { const params = useParams() const conversationId = params?.conversationId useEffect(() => { console.error(`Conversation error for ${conversationId}:`, error) }, [error, conversationId]) return (
Conversation Error We couldn't load this conversation. {process.env.NODE_ENV === 'development' && (

{error.message || 'Unknown error occurred'}

{error.digest && (

Error ID: {error.digest}

)}
)}

This conversation may have been deleted or you don't have access to it.

) } ``` ### 5. API Error Handler Utility **File**: `src/lib/api-error-handler.ts` **Purpose**: Standardize API error responses ```ts import { NextResponse } from 'next/server'; export interface APIError { message: string; code?: string; details?: any; } export class APIErrorHandler { static badRequest(message: string, details?: any) { return NextResponse.json( { error: { message, code: 'BAD_REQUEST', details } }, { status: 400 } ); } static unauthorized(message: string = 'Unauthorized') { return NextResponse.json( { error: { message, code: 'UNAUTHORIZED' } }, { status: 401 } ); } static forbidden(message: string = 'Forbidden') { return NextResponse.json( { error: { message, code: 'FORBIDDEN' } }, { status: 403 } ); } static notFound(message: string = 'Not found') { return NextResponse.json( { error: { message, code: 'NOT_FOUND' } }, { status: 404 } ); } static rateLimited(retryAfter?: number) { const headers = retryAfter ? { 'Retry-After': retryAfter.toString() } : {}; return NextResponse.json( { error: { message: 'Too many requests', code: 'RATE_LIMITED', retryAfter } }, { status: 429, headers } ); } static internal(message: string = 'Internal server error') { return NextResponse.json( { error: { message, code: 'INTERNAL_ERROR' } }, { status: 500 } ); } } export function withErrorHandler(handler: Function) { return async (...args: any[]) => { try { return await handler(...args); } catch (error) { console.error('API Route Error:', error); if (error instanceof Error) { return APIErrorHandler.internal(error.message); } return APIErrorHandler.internal(); } }; } ``` ### 6. Error Monitoring Service **File**: `src/lib/error-monitoring.ts` **Purpose**: Centralized error logging and reporting ```ts interface ErrorPayload { message: string; stack?: string; component?: string; route?: string; userId?: string; metadata?: Record; timestamp: string; } export class ErrorMonitoring { private static async logError(payload: ErrorPayload) { // Log to console in development if (process.env.NODE_ENV === 'development') { console.error('Error logged:', payload); return; } // In production, send to your error tracking service try { // Example: Send to Supabase error_logs table const { getSupabaseAdmin } = await import('@/lib/supabase/server'); const supabase = getSupabaseAdmin(); await supabase.from('error_logs').insert({ message: payload.message, stack_trace: payload.stack, component: payload.component, route: payload.route, user_id: payload.userId, metadata: payload.metadata, created_at: payload.timestamp, }); } catch (e) { console.error('Failed to log error:', e); } } static logClientError(error: Error, component?: string, metadata?: Record) { const payload: ErrorPayload = { message: error.message, stack: error.stack, component, route: typeof window !== 'undefined' ? window.location.pathname : undefined, timestamp: new Date().toISOString(), metadata, }; this.logError(payload); } static logServerError(error: Error, route?: string, userId?: string, metadata?: Record) { const payload: ErrorPayload = { message: error.message, stack: error.stack, route, userId, timestamp: new Date().toISOString(), metadata, }; this.logError(payload); } } ``` ## Implementation Steps ### Phase 1: Core Error Boundaries (Priority 1) 1. Create `global-error.tsx` for server-side errors 2. Create `auth/error.tsx` for authentication errors 3. Create `(authenticated)/error.tsx` for dashboard errors ### Phase 2: Specific Route Errors (Priority 2) 1. Create `messages/[conversationId]/error.tsx` for conversation errors 2. Create `contractor/post-job/error.tsx` for job posting errors 3. Create `worker/jobs/error.tsx` for job browsing errors ### Phase 3: Error Handling Improvements (Priority 3) 1. Implement `api-error-handler.ts` utility 2. Update API routes to use standardized error responses 3. Add error monitoring service 4. Create error boundary wrapper for client components ### Phase 4: Testing & Monitoring (Priority 4) 1. Add error boundary testing utilities 2. Implement error tracking in production 3. Set up alerts for critical errors 4. Create error analytics dashboard ## Testing Strategy ### Development Testing ```tsx // Test error boundary with throw button export function ErrorBoundaryTest() { const [shouldThrow, setShouldThrow] = useState(false) if (shouldThrow) { throw new Error('Test error for boundary') } return ( ) } ``` ### Production Monitoring - Log all errors to Supabase - Set up alerts for error spikes - Monitor error rates by route - Track user impact ## Benefits 1. **Better User Experience**: Users see friendly error pages instead of blank screens 2. **Error Recovery**: Users can retry or navigate to safety 3. **Debugging**: Development mode shows error details 4. **Monitoring**: Centralized error tracking for improvements 5. **Stability**: Prevents cascade failures in the app ## Next Steps 1. Implement Phase 1 error boundaries immediately 2. Add error monitoring to track issues in production 3. Create a dashboard to monitor error rates 4. Train team on error boundary best practices