// ======================================== // Error Boundary Component // ======================================== // Catches React errors and displays fallback UI import React, { Component, ErrorInfo, ReactNode } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { AlertTriangle, RefreshCw, Home } from 'lucide-react'; interface Props { children: ReactNode; fallback?: ReactNode; onError?: (error: Error, errorInfo: ErrorInfo) => void; } interface State { hasError: boolean; error: Error | null; errorInfo: ErrorInfo | null; } /** * Global Error Boundary * Catches unhandled errors in React component tree * * @example * * * */ export class ErrorBoundary extends Component { constructor(props: Props) { super(props); this.state = { hasError: false, error: null, errorInfo: null, }; } static getDerivedStateFromError(error: Error): Partial { // Update state so next render shows fallback UI return { hasError: true, error, }; } componentDidCatch(error: Error, errorInfo: ErrorInfo): void { // Log error to console if (import.meta.env.DEV) console.error('ErrorBoundary caught an error:', error, errorInfo); // Update state with error details this.setState({ error, errorInfo, }); // Call custom error handler if provided if (this.props.onError) { this.props.onError(error, errorInfo); } // In production, you might want to log to an error reporting service // Example: Sentry.captureException(error); } handleReset = (): void => { this.setState({ hasError: false, error: null, errorInfo: null, }); }; handleReload = (): void => { window.location.reload(); }; handleGoHome = (): void => { window.location.href = '/'; }; render(): ReactNode { if (this.state.hasError) { // Use custom fallback if provided if (this.props.fallback) { return this.props.fallback; } // Default error UI return (

Something Went Wrong

An unexpected error occurred. We apologize for the inconvenience.

{this.state.error && (
Error Details (for developers)
Error:
                            {this.state.error.toString()}
                          
{this.state.errorInfo && (
Component Stack:
                              {this.state.errorInfo.componentStack}
                            
)}
)}

If this problem persists, please contact support at{' '} info@pezkuwichain.io

); } // No error, render children normally return this.props.children; } } // ======================================== // ROUTE-LEVEL ERROR BOUNDARY // ======================================== /** * Smaller error boundary for individual routes * Less intrusive, doesn't take over the whole screen */ export const RouteErrorBoundary: React.FC<{ children: ReactNode; routeName?: string; }> = ({ children, routeName = 'this page' }) => { const [hasError, setHasError] = React.useState(false); const handleReset = () => { setHasError(false); }; if (hasError) { return (
Error loading {routeName} An error occurred while rendering this component.
); } return ( }> {children} ); }; const RouteErrorFallback: React.FC<{ routeName: string; onReset: () => void }> = ({ routeName, onReset, }) => { return (
Error loading {routeName} An unexpected error occurred.
); };