AI Code Toolkit

/** * {{ pageTitle }} Error * * DESIGN PATTERNS: * - Error Boundary: Catches errors in nested routes * - Client Component: Must use 'use client' directive * - Recovery: Provides reset functionality * * CODING STANDARDS: * - MUST be a Client Component ('use client') * - Accept error and reset props * - Provide user-friendly error messages * - Include recovery action (reset button) * * USAGE: * - Automatically shown when route segment throws error * - error prop contains error details * - reset() function re-renders the route segment */ 'use client'; import { useEffect } from 'react'; export default function Error({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { // Log error to error reporting service console.error(error); }, [error]); return ( <div className="flex items-center justify-center min-h-screen"> <div className="text-center max-w-md px-4"> <h2 className="text-2xl font-bold text-gray-900 mb-4"> Something went wrong! </h2> <p className="text-gray-600 mb-6"> {error.message || 'An unexpected error occurred.'} </p> <button onClick={reset} className="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors" > Try again </button> </div> </div> ); }