Exact File Paths
src/App.tsx (Lines 90 - 358)
The Core Problem
The application uses React Router with React.lazy() to code-split over 30 routes. However, all of these routes are wrapped in a single, top-level <Suspense> component.
The Reproducible Scenario / Impact
If a user clicks a link to navigate to a new page (e.g., /discover), and a new deployment has invalidated the old JS chunks (or there is a temporary network drop), the fetch for the Discover chunk will throw an error. Because there are no nested suspense/error boundaries, the entire React application tree will unmount. The user's current state (ongoing chat, timers) is destroyed, and they are either trapped in an infinite global loading spinner or a white screen, requiring a hard refresh.
Step-by-Step Suggested Solution
- Remove the global
<Suspense> wrapper around the <Routes> block.
- Create a wrapper component (e.g.,
<LazyRoute>) that individually wraps each page component with its own <Suspense> and <ErrorBoundary>.
- Apply this to all routes in
App.tsx so that a failure to load one chunk only crashes that specific view, preserving the global Navigation and layout.
Exact File Paths
src/App.tsx(Lines 90 - 358)The Core Problem
The application uses React Router with
React.lazy()to code-split over 30 routes. However, all of these routes are wrapped in a single, top-level<Suspense>component.The Reproducible Scenario / Impact
If a user clicks a link to navigate to a new page (e.g.,
/discover), and a new deployment has invalidated the old JS chunks (or there is a temporary network drop), the fetch for theDiscoverchunk will throw an error. Because there are no nested suspense/error boundaries, the entire React application tree will unmount. The user's current state (ongoing chat, timers) is destroyed, and they are either trapped in an infinite global loading spinner or a white screen, requiring a hard refresh.Step-by-Step Suggested Solution
<Suspense>wrapper around the<Routes>block.<LazyRoute>) that individually wraps each page component with its own<Suspense>and<ErrorBoundary>.App.tsxso that a failure to load one chunk only crashes that specific view, preserving the global Navigation and layout.