React error boundaries #27

New issue

Open

opened 2026-04-19 07:23:34 +00:00 by forgejo-lila · 0 comments

forgejo-lila commented

2026-04-19 07:23:34 +00:00

Owner

Context

If a React component throws a runtime error, the entire app crashes to a white screen.

What to do

Add error boundaries to catch and display errors gracefully.

Files to change

apps/web/src/components/ErrorBoundary.tsx — new file. Error boundary with user-friendly fallback.
apps/web/src/routes/__root.tsx — wrap the root layout with the error boundary.
Optionally: specific boundary around game components in apps/web/src/routes/play.tsx.

Acceptance criteria

Runtime errors show a styled error message instead of white screen
Error boundary includes 'Try again' or 'Go home' button
Rest of the app remains functional if error is isolated
Error details logged to console for debugging

Notes

React error boundaries must be class components. Alternatively use react-error-boundary library for hook-friendly wrapper. App uses Tailwind CSS + shadcn/ui for styling.

## Context If a React component throws a runtime error, the entire app crashes to a white screen. ## What to do Add error boundaries to catch and display errors gracefully. ## Files to change - `apps/web/src/components/ErrorBoundary.tsx` — new file. Error boundary with user-friendly fallback. - `apps/web/src/routes/__root.tsx` — wrap the root layout with the error boundary. - Optionally: specific boundary around game components in `apps/web/src/routes/play.tsx`. ## Acceptance criteria - Runtime errors show a styled error message instead of white screen - Error boundary includes 'Try again' or 'Go home' button - Rest of the app remains functional if error is isolated - Error details logged to console for debugging ## Notes React error boundaries must be class components. Alternatively use `react-error-boundary` library for hook-friendly wrapper. App uses Tailwind CSS + shadcn/ui for styling.