Sebastian Krüger
6985032006
Implemented complete client-side error handling and reporting system: Error Boundary Component (components/providers/ErrorBoundary.tsx): - React Error Boundary to catch component errors - Automatic error logging to client logger - Error reporting to server endpoint - User-friendly fallback UI with error details (dev mode) - Reset and reload functionality - Custom fallback support via props Global Error Handler (lib/utils/global-error-handler.ts): - Window error event listener for uncaught errors - Unhandled promise rejection handler - Automatic error reporting to server - Comprehensive error metadata collection: - Error message and stack trace - URL, user agent, timestamp - Filename, line number, column number (for window errors) Client Error Reporting Endpoint (app/api/client-error/route.ts): - Server-side endpoint to receive client errors - Integrated with withLogging() for automatic server logging - Accepts error reports from both ErrorBoundary and global handlers - Returns acknowledgement to client Error Boundary Integration (components/providers/Providers.tsx): - Wrapped entire app in ErrorBoundary - Initialized global error handlers on mount - Catches React errors, window errors, and unhandled rejections Error Reporting Features: - Duplicate error tracking prevention - Async error reporting (non-blocking) - Graceful degradation (fails silently if reporting fails) - Development vs production error display - Structured error metadata for debugging All errors now: - Log to browser console via client logger - Report to server for centralized logging - Display user-friendly error UI - Include full context for debugging - Work across React, window, and promise contexts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
32 lines
845 B
TypeScript
32 lines
845 B
TypeScript
import { NextRequest, NextResponse } from 'next/server';
|
|
import { withLogging } from '@/lib/utils/api-logger';
|
|
|
|
interface ClientErrorReport {
|
|
message: string;
|
|
stack?: string;
|
|
componentStack?: string;
|
|
name?: string;
|
|
url: string;
|
|
userAgent: string;
|
|
timestamp: string;
|
|
type?: 'error' | 'unhandledrejection';
|
|
filename?: string;
|
|
lineno?: number;
|
|
colno?: number;
|
|
}
|
|
|
|
export const POST = withLogging(async (request: NextRequest) => {
|
|
const errorReport: ClientErrorReport = await request.json();
|
|
|
|
// The withLogging wrapper will automatically log this with the error details
|
|
// We can return success to acknowledge receipt
|
|
return NextResponse.json(
|
|
{
|
|
success: true,
|
|
message: 'Client error logged successfully',
|
|
timestamp: new Date().toISOString(),
|
|
},
|
|
{ status: 200 }
|
|
);
|
|
}, 'logClientError');
|