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
- Open the running app in a browser with DevTools open.
- In the console, manually throw an error inside a mounted component or trigger a bad data path in
src/data/activities/index.js.
- 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>
Description
src/App.tsxrenders 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 onundefinedin a component) unmounts the entire React tree, leaving users with a blank white page and no recovery path.Steps to Reproduce
src/data/activities/index.js.Root Cause
No
<ErrorBoundary>component wraps the route tree insrc/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:Wrap routes in
App.tsx: