Skip to content

feat(frontend): add ErrorBoundary component to prevent full-app crashes #274

@bhavyamsharmaa

Description

@bhavyamsharmaa

Is your feature request related to a problem? Please describe.

There is no React Error Boundary anywhere in the frontend. If any component throws during render (e.g. unexpected API response shape, null access on a resource object), the entire app unmounts and shows a blank screen with no recovery option. App.jsx already handles server connection errors gracefully via serverError state, but render-time exceptions are unhandled.

Describe the solution you'd like

Add an ErrorBoundary class component (src/presentation/components/common/ErrorBoundary.jsx) using componentDidCatch and getDerivedStateFromError, and wrap the route tree in App.jsx with it. The fallback UI should match the existing server error style already in App.jsx (icon + message + reload button).

Describe alternatives you've considered

Wrapping every async call in try/catch — already done for data fetching in hooks, but this does not protect against render-time exceptions, which try/catch cannot catch.

Additional context

React docs recommend at least one Error Boundary near the root of the app. A single boundary wrapping the <Routes> in App.jsx would be the minimum viable scope.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions