Next.js App Router - Error UI
Error UI is a powerful feature in Next.js. By creating an error.js file, you can automatically catch errors in pages or components and provide a custom fallback UI.
When an error occurs in a route segment, Next.js automatically displays the nearest error.js boundary, allowing users to see a friendly error message instead of a crashed page.
🚨 Error.js Live Demo
Experience how Next.js's error.js file convention works
Click the button below to enter a dedicated demo page that will throw an error, truly triggering the display of error.js.
Enter Error.js Demo
The demo page will throw a real error, then display the error.js UI.
Current File Structure
app/file-conventions/error/
├── error.js ← This file defines the error UI
├── page.tsx ← Current entry page (synchronous)
└── demo/
└── page.tsx ← Demo page (will throw an error, triggering error.js)
✅ The demo page will genuinely throw an error and trigger error.js, while the entry page remains stable.