Crash resilience: No error boundaries — any unhandled error white-screens the app #7

New issue

Closed

opened 2026-05-16 03:41:58 +00:00 by Mark · 1 comment

Mark commented

2026-05-16 03:41:58 +00:00

Owner

Severity: HIGH (crash resilience)

Location

src/main.tsx:1-5 — App entry point

Description

The entire component tree has zero React error boundaries. Any unhandled exception in any page or component crashes the whole app:

// main.tsx — bare render, no boundary
createRoot(document.getElementById('root')!).render(<App />)

// App.tsx — routes with no error boundary wrapper
<HashRouter>
  <Layout>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/people" element={<PeoplePage />} />
      <Route path="/people/:id" element={<PersonDetailPage />} />
      <Route path="/log" element={<LogInteraction />} />
      <Route path="/dates" element={<DatesPage />} />
      <Route path="/settings" element={<Settings />} />
    </Routes>
  </Layout>
</HashRouter>

Impact

Any page component that throws during render (bad data, null dereference) wipes the app to a blank white screen
No fallback UI, no error message, no "go back" button
Particularly dangerous given there's no schema validation on imported data (#6) — corrupt data WILL trigger render crashes
User's only recovery option: clear browser data or reinstall

Recommendation

Add two boundary layers:

Top-level error boundary wrapping <HashRouter> that shows a recovery screen with a "reset app" / "go home" action
Per-route error boundary so a crash in one view (e.g., a corrupted person detail) doesn't kill navigation to other pages

Code context

src/main.tsx:1-5 — entry point
src/App.tsx:10-25 — route definitions

## Severity: HIGH (crash resilience) ### Location `src/main.tsx:1-5` — App entry point ### Description The entire component tree has zero React error boundaries. Any unhandled exception in any page or component crashes the whole app: ```typescript // main.tsx — bare render, no boundary createRoot(document.getElementById('root')!).render(<App />) // App.tsx — routes with no error boundary wrapper <HashRouter> <Layout> <Routes> <Route path="/" element={<Home />} /> <Route path="/people" element={<PeoplePage />} /> <Route path="/people/:id" element={<PersonDetailPage />} /> <Route path="/log" element={<LogInteraction />} /> <Route path="/dates" element={<DatesPage />} /> <Route path="/settings" element={<Settings />} /> </Routes> </Layout> </HashRouter> ``` ### Impact - Any page component that throws during render (bad data, null dereference) wipes the app to a blank white screen - No fallback UI, no error message, no "go back" button - Particularly dangerous given there's no schema validation on imported data (#6) — corrupt data WILL trigger render crashes - User's only recovery option: clear browser data or reinstall ### Recommendation Add two boundary layers: 1. **Top-level error boundary** wrapping `<HashRouter>` that shows a recovery screen with a "reset app" / "go home" action 2. **Per-route error boundary** so a crash in one view (e.g., a corrupted person detail) doesn't kill navigation to other pages ### Code context - `src/main.tsx:1-5` — entry point - `src/App.tsx:10-25` — route definitions

Mark commented

2026-05-16 04:52:04 +00:00

Author

Owner

Fixed in commit. Closing.