Frontend Error Boundaries & UI Resilience

### Tasks - [ ] Create `src/components/ErrorBoundary.tsx` — React class component that catches render errors, shows a fallback UI ("Something went wrong. Refresh the page.") - [ ] Wrap all page-level components with `ErrorBoundary` - [ ] Standardize all TanStack Query error states with a reusable `<QueryError message={...} retry={refetch} />` component - [ ] Standardize all empty states with a reusable `<EmptyState icon={...} title={...} description={...} action={...} />` component - [ ] Standardize all loading states with skeleton variants for: table rows, cards, detail pages - [ ] Create a global `404` page (`src/app/not-found.tsx`) with a "Back to dashboard" link - [ ] API client: for unexpected `5xx` responses, show a global toast: "Server error. Please try again or contact support." ### Acceptance Criteria - [ ] React render errors are caught and show a graceful fallback instead of a white screen - [ ] Every data-fetching operation has loading, error, and empty states - [ ] 404 page renders for unknown routes - [ ] 5xx API errors show a toast notification - [ ] No "undefined is not a function" errors visible to end users

ottomata commented

2026-02-23 10:08:00 +00:00

Owner

Tasks

Create src/components/ErrorBoundary.tsx — React class component that catches render errors, shows a fallback UI ("Something went wrong. Refresh the page.")
Wrap all page-level components with ErrorBoundary
Standardize all TanStack Query error states with a reusable <QueryError message={...} retry={refetch} /> component
Standardize all empty states with a reusable <EmptyState icon={...} title={...} description={...} action={...} /> component
Standardize all loading states with skeleton variants for: table rows, cards, detail pages
Create a global 404 page (src/app/not-found.tsx) with a "Back to dashboard" link
API client: for unexpected 5xx responses, show a global toast: "Server error. Please try again or contact support."

Acceptance Criteria

React render errors are caught and show a graceful fallback instead of a white screen
Every data-fetching operation has loading, error, and empty states
404 page renders for unknown routes
5xx API errors show a toast notification
No "undefined is not a function" errors visible to end users

ottomata added this to the Phase 8 project

2026-02-23 10:09:19 +00:00

Rows
Columns

Frontend Error Boundaries & UI Resilience #82

Tasks

Acceptance Criteria