Q48: What is global-error.js and how does it catch Root Layout errors?
While error.js catches errors inside nested page subtrees, it cannot catch errors thrown inside the root app/layout.js. To catch root layout exceptions, define app/global-error.js, which must define its own <html> and <body> HTML tags.
Root Global Error Boundary
// app/global-error.js (Must be a Client Component)
'use client';
export default function GlobalError({ error, reset }) {
return (
<html>
<body>
<h2>Root Layout Error Captured</h2>
<button onClick={() => reset()}>Reset System</button>
</body>
</html>
);
}💡 global-error.js catches root layout failures, replacing the root HTML document structure.
Key Takeaways
- Catches errors thrown inside the root layout component (
app/layout.js). - Must define custom
<html>and<body>document tags.
Knowledge Check
Why must global-error.js include its own <html> and <body> tags?