Error boundaries allow you to catch runtime errors in specific segments of your app and display a fallback UI instead of crashing the entire site.
Interactive Simulation Engine
Error Boundary Simulation
Catch and recover from runtime errors
System Healthy
The component is rendering correctly. Data is flowing through the tree.
Next.js Shell
Key Concept: Next.js error boundaries allow specific segments to fail without crashing the entire app shell or navigation.
Executable Code Workbench
page.tsx
Live Code Editor1"use client" // Error components must be Client Components
2
3export default function Error({ error, reset }) {
4 return (
5 <div>
6 <h2>Something went wrong!</h2>
7 <button onClick={() => reset()}>Try again</button>
8 </div>
9 )
10}Mental Model
Think of it as a safety net. If a component 'falls' (errors), the boundary catches it and shows a 'Try Again' button instead of a white screen.
Why This Exists
To provide a resilient user experience. One failing component (like a weather widget) shouldn't break the navigation or other parts of the dashboard.
Critical Note
"'error.js' boundaries will not catch errors in 'layout.js' of the same segment. They only catch errors in children."