Skip to content

Feature: Global error boundary and 404 page #52

@FadyGergesRezk

Description

@FadyGergesRezk

Add global error handling so uncaught render errors and unknown routes degrade gracefully instead of crashing the app.

Priority: P0

Tasks

  • Add a GlobalErrorBoundary class component in src/app/ErrorBoundary.tsx that catches uncaught render errors, logs them to the console, and renders a user-facing fallback with a "Go home" action
  • Wrap the app root in GlobalErrorBoundary (outside QueryClientProvider so provider errors are also caught)
  • Add a NotFoundPage component for unmatched routes with a clear message and a link back to /members
  • Add a catch-all path="*" route in AppRouter.tsx that renders NotFoundPage
  • Configure TanStack Query QueryClient to not retry on 4xx errors (already noted in Feature: Client foundation — Zustand, daisyUI, and app shell #43 but must be verified here)

Acceptance criteria

  • Navigating to an unknown URL renders the 404 page instead of a blank screen
  • A thrown render error inside any page renders the error boundary fallback instead of crashing the whole app
  • The "Go home" action in the error boundary navigates back to /members
  • Error boundary fallback provides an explicit reset/retry action

Metadata

Metadata

Assignees

No one assigned

    Labels

    clientIssue regarding the client frontendenhancementNew feature or request

    Type

    No type
    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