Error Boundary

Error Boundary

Component Files: src/components/shared/ErrorBoundary.tsx, src/components/shared/ErrorFallback.tsx Route: Global wrapper Access Level: All users Last Updated: December 16, 2025 Status: ✅ Implemented

Overview

The Error Boundary components provide graceful error handling for the application. When a JavaScript error occurs in a component tree, the Error Boundary catches it and displays a user-friendly fallback UI instead of crashing the entire application.

Components

ErrorBoundary.tsx

React class component that catches JavaScript errors in child components:

• Catches errors during rendering
• Catches errors in lifecycle methods
• Catches errors in constructors
• Logs errors for debugging

ErrorFallback.tsx

Fallback UI displayed when an error is caught:

• Error message display
• "Try Again" button to reset
• "Go Home" button to navigate to dashboard
• Option to report the error

Usage

<ErrorBoundary>
  <App />
</ErrorBoundary>

Error Logging

Errors are logged to:

• Browser console (development)
• Error tracking service (production - if configured)

Implementation Status

| Feature | Status |

|---------|--------|

| Error catching | ✅ Complete |

| Fallback UI | ✅ Complete |

| Reset functionality | ✅ Complete |

| Error logging | ✅ Complete |

Related Documentation

• ERROR-HANDLING.md - Error handling patterns

Synced from IFMmvp-Frontend documentation: pages/components/15-ERROR-BOUNDARY.md