Problem
Three error-handling failures exist:
frontend/lib/api/client.ts:24-27 has 401 redirect logic commented out. Expired tokens silently fail with no redirect to login.
QueryProvider retries with retry: 2 and no exponential backoff - during an outage, three rapid retries hammer the backend simultaneously.
- No React error boundary wraps the app. API errors that propagate to render phase cause an unrecoverable white screen.
Proposed Solution
- Uncomment and implement the 401 interceptor in
client.ts: clear auth state from Zustand, clear the cookie, call router.push('/login')
- Add exponential backoff with jitter to
QueryProvider's retry config: retryDelay: (attempt) => Math.min(1000 * 2 ** attempt + Math.random() * 500, 10000)
- Create
frontend/components/GlobalErrorBoundary.tsx (class component) that catches render errors and shows a friendly fallback with a retry button
- Wrap
children in app/layout.tsx with <GlobalErrorBoundary>
Acceptance Criteria
Problem
Three error-handling failures exist:
frontend/lib/api/client.ts:24-27has 401 redirect logic commented out. Expired tokens silently fail with no redirect to login.QueryProviderretries withretry: 2and no exponential backoff - during an outage, three rapid retries hammer the backend simultaneously.Proposed Solution
client.ts: clear auth state from Zustand, clear the cookie, callrouter.push('/login')QueryProvider's retry config:retryDelay: (attempt) => Math.min(1000 * 2 ** attempt + Math.random() * 500, 10000)frontend/components/GlobalErrorBoundary.tsx(class component) that catches render errors and shows a friendly fallback with a retry buttonchildreninapp/layout.tsxwith<GlobalErrorBoundary>Acceptance Criteria
/loginwithin one render cycleConnection errortoast