Skip to content

[FE-05] Fix silent 401 handling and add global error boundary for API failures #273

Description

@Leothosine

Problem

Three error-handling failures exist:

  1. frontend/lib/api/client.ts:24-27 has 401 redirect logic commented out. Expired tokens silently fail with no redirect to login.
  2. QueryProvider retries with retry: 2 and no exponential backoff - during an outage, three rapid retries hammer the backend simultaneously.
  3. No React error boundary wraps the app. API errors that propagate to render phase cause an unrecoverable white screen.

Proposed Solution

  1. Uncomment and implement the 401 interceptor in client.ts: clear auth state from Zustand, clear the cookie, call router.push('/login')
  2. Add exponential backoff with jitter to QueryProvider's retry config: retryDelay: (attempt) => Math.min(1000 * 2 ** attempt + Math.random() * 500, 10000)
  3. Create frontend/components/GlobalErrorBoundary.tsx (class component) that catches render errors and shows a friendly fallback with a retry button
  4. Wrap children in app/layout.tsx with <GlobalErrorBoundary>

Acceptance Criteria

  • An expired token triggers a redirect to /login within one render cycle
  • Three failed API retries show an error UI - not a white screen
  • Retry button in the error boundary clears the error state and re-renders children
  • Network error shows a Connection error toast
  • Backoff verified: second retry fires ~2s after first, not immediately

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions