d4a5378adf
Frontend: - Replace Next.js with Vite + React + TypeScript - Add new component architecture (app-shell, sidebar, dashboard modules) - Implement product modules: FRAME, safety protocols, walkthrough checkin, campus/staff attendance, personality quiz, sign language, classroom timer - Add shadcn/ui component library with Tailwind CSS - Remove legacy generated components, stores, and pages Backend: - Add product migrations: frame_entries, user_progress, safety_quiz_results, walkthrough_checkins, communication_events, personality_quiz_results, campus_attendance_config/summaries, staff_attendance_records, content_catalog - Add corresponding models, services, and routes - Implement cookie-based auth with refresh token rotation - Add content catalog seeder with product content - Migrate to ESLint flat config - Switch from yarn to npm Infrastructure: - Update .gitignore for new tooling - Add project documentation (CLAUDE.md, docs/) - Remove deprecated config files and yarn.lock Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
25 lines
1.2 KiB
Markdown
25 lines
1.2 KiB
Markdown
# Frontend Error Handling
|
|
|
|
## Purpose
|
|
|
|
Frontend backend errors use a shared path:
|
|
|
|
1. `frontend/src/shared/api/httpClient.ts` parses failed HTTP responses.
|
|
2. `ApiError` preserves backend `message`, `code`, `details`, and HTTP `status`.
|
|
3. `AuthExpiredError` represents expired or invalid cookie sessions.
|
|
4. `frontend/src/shared/errors/errorMessages.ts` converts unknown errors into user-facing strings.
|
|
|
|
Views and business hooks should use `getErrorMessage` or `getOptionalErrorMessage` instead of reading `.message` directly.
|
|
|
|
## Rules
|
|
|
|
- Do not create local `getErrorMessage` helpers in feature components or hooks.
|
|
- Do not read `query.error.message` or `mutation.error.message` directly in JSX.
|
|
- Do not silently swallow backend failures or replace failed persisted workflows with fallback product data.
|
|
- Auth expiration should redirect through the auth session flow, not display raw backend errors.
|
|
- Runtime invariant errors, such as context hooks used outside providers, may still throw native `Error` instances.
|
|
|
|
## Verification
|
|
|
|
`frontend/src/shared/errors/errorMessages.test.ts` covers the formatter contract for `ApiError`, `AuthExpiredError`, regular `Error`, and unknown values.
|