Frontend Error Handling (Next.js)

Systematic approach to error handling in Next.js applications.

Error Boundary Hierarchy

Next.js provides built-in error boundaries at every route segment level:

app/
├── error.tsx              ← Global error boundary (wraps entire app)
├── layout.tsx
├── dashboard/
│   ├── error.tsx          ← Dashboard-specific error boundary
│   ├── page.tsx
│   └── settings/
│       ├── error.tsx      ← Settings-specific error boundary
│       └── page.tsx