congiuluc/error-handling-frontend

Frontend Error Handling (React)

When to Use

• Creating React error boundaries for rendering errors
• Handling API fetch errors in data-fetching components
• Building retry UI for failed requests
• Showing toast notifications or inline error messages
• Handling form validation errors from the API

Official Documentation

• React Error Boundaries
• Error Handling Patterns (MDN)

Procedure

1. Wrap route-level components with ErrorBoundary — see error handling reference
2. Review error boundary sample
3. Handle loading/error/empty states in every data-fetching component
4. Show user-friendly messages — never expose raw error details
5. Provide retry/refresh actions for recoverable errors
6. Log frontend errors for monitoring (console + optional telemetry)
7. Handle API envelope errors: check response.success and response.error

Error State Pattern

const { data, loading, error } = useProducts();

if (loading) return <Spinner aria-label="Loading" />;
if (error) return <ErrorMessage message={error} onRetry={refetch} />;
if (data.length === 0) return <EmptyState message="No items found" />;