Add error.tsx and not-found.tsx to root and key route segments
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Problem
Next.js App Router supports per-segment error.tsx and not-found.tsx files that gracefully render a UI when a server component throws or a route doesn't match. The repo currently has none — every uncaught server error renders the framework's default error screen, and any unknown route falls back to the framework's default 404. This is jarring for users and makes incident triage harder because there's no opportunity to log a correlation id or render a friendly retry CTA.
Evidence
- A repo-wide search for
error.tsx,not-found.tsxreturns no matches undersrc/app/. - All segments rely on Next's defaults.
Proposed approach
-
Create
src/app/error.tsx(root error boundary):\"use client\"per Next.js docs.- Receives
{ error, reset }props. - Logs
error.digestanderror.messagevia the structured logger (orconsole.errorfor now). - Renders a shadcn/ui
Cardwith title "Something went wrong", body containingerror.digest(collapsed), and a button callingreset().
-
Create
src/app/not-found.tsx:- Renders a shadcn/ui card with "Page not found" + a
Linkback to/.
- Renders a shadcn/ui card with "Page not found" + a
-
Create segment-level
error.tsxfor each major route group, reusing a sharedErrorStatecomponent to keep them DRY:src/app/assignments/error.tsxsrc/app/budget/error.tsxsrc/app/invoices/error.tsxsrc/app/copilot/error.tsxsrc/app/claude/error.tsxsrc/app/reports/error.tsxsrc/app/settings/error.tsx
-
Extract the shared component to
src/components/error-state.tsxso per-segment files are 5–10 lines. -
Make sure the error boundary preserves the sidebar layout — wrap
ErrorStateso it renders inside the existing<AppShell>rather than full-page. -
Add a Playwright smoke test (1 spec, 2 cases) that:
- Navigates to
/__nope__and asserts the not-found UI renders. - (Optional) hits a route segment with a deliberately throwing dev-only flag and asserts the error UI renders.
- Navigates to
Acceptance criteria
- Root
error.tsxandnot-found.tsxexist and render the shared component. - At least 5 segment-level
error.tsxfiles cover the major route groups listed above. - Shared
ErrorStatecomponent is reused everywhere — no copy-pasted JSX. - Visiting a non-existent path renders the new 404 UI inside the app layout.
-
pnpm lint && pnpm typecheckpass.
Verification
pnpm dev, navigate tohttp://localhost:3000/__nope__→ expect the new 404 UI.- Temporarily throw
new Error(\"boom\")at the top of any server component (e.g.src/app/copilot/page.tsx) → expect the segment error UI with a Try Again button. Revert. - Click "Try Again" → page re-renders without a hard reload.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the listed src/app/error.tsx, src/app/not-found.tsx, route-segment files, and src/components/error-state.tsx, then inspect the existing AppShell and structured logger usage. Run pnpm lint && pnpm typecheck and the Playwright smoke test after verifying /nope renders the new 404 UI and the listed segments show the retry state inside the app layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, playwright
- Domain
- frontend, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100