Skip to content

[BUG] App.tsx missing React error boundary - any render error crashes the entire page to a blank screen #1356

Description

@anshul23102

Description

src/App.tsx renders all routes and shared components without wrapping them in a React Error Boundary. A single unhandled JavaScript error thrown during rendering (e.g., accessing a property on undefined in a component) unmounts the entire React tree, leaving users with a blank white page and no recovery path.

Steps to Reproduce

  1. Open the running app in a browser with DevTools open.
  2. In the console, manually throw an error inside a mounted component or trigger a bad data path in src/data/activities/index.js.
  3. Observe the full page goes blank with only a console error - no fallback UI is shown.

Root Cause

No <ErrorBoundary> component wraps the route tree in src/App.tsx.

Impact

Any runtime rendering error - including those from third-party component updates - causes complete page loss with no way for users to recover without a hard refresh.

Proposed Fix

Create src/shared/ErrorBoundary.tsx:

import { Component, ReactNode } from "react";
class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError)
      return <div style={{ padding: "2rem" }}>Something went wrong. <button onClick={() => this.setState({ hasError: false })}>Retry</button></div>;
    return this.props.children;
  }
}
export default ErrorBoundary;

Wrap routes in App.tsx:

<ErrorBoundary>
  <RouterProvider router={router} />
</ErrorBoundary>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions