Instructions

When to Use

• Use for error.tsx, not-found, loading, global-error UX.
• Prefer next-server-patterns for data/error boundary placement.
• Prefer observability-handbook for logging inside error UI.

Design App Router UX for failures and slow routes: error.tsx, not-found, loading.tsx, global-error.tsx.

1. error.tsx: client boundary - must reset via reset() pattern; log server-side in Route Handlers or server actions, not only console.error in production without a sink.
2. not-found: use notFound() from server code; ensure marketing URLs return 404 not 200 empty shell.
3. loading.tsx: skeletons that match final layout dimensions to reduce CLS; avoid fake progress bars unless truthful.
4. global-error.tsx: minimal HTML shell when root layout throws; keep copy short and support link.
5. Nested layouts: errors bubble to nearest error.tsx; document which segments need their own file vs inherited.

Outcomes

• File tree (app/.../error.tsx etc.) + when each runs + logging hook suggestion.