`global-error.js` or `global-error.tsx` provides the final application-level error boundary for failures involving the root layout or root template. It is different from a normal `error.tsx` file because it can replace the application's root layout when active. ### File Location ```text app/ global-error.tsx layout.tsx ``` ### Example ```tsx 'use client'; export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void; }) { return (

Something went wrong

Please try again.

); } ``` ### Why Does It Need html and body? A normal page renders inside the root layout: ```text Root Layout └── Page ``` But when `global-error.tsx` is active, it replaces the root layout itself. Therefore it must provide its own: ```html ``` structure. ### Why Is It a Client Component? Like normal error boundaries, it needs: ```tsx 'use client'; ``` because error-boundary recovery is client-side [React](/courses/reactjs) behavior. ### When Should It Be Used? Use it as a fallback for serious rendering problems that cannot be handled by a normal nested error boundary. For example: ```text Root layout crashes → global-error.tsx ``` ### Do Not Use It for Every Error A product page failure should not necessarily replace the entire application. Prefer local boundaries where possible: ```text Product failure → product error boundary Dashboard failure → dashboard error boundary Root application failure → global-error ``` ### Metadata Note Because `global-error.tsx` must be a Client Component, the normal server metadata exports are not available there in the same way as ordinary layouts/pages. ### Interview-Ready Answer `global-error.js` is the root-level error boundary for failures involving the root layout or template. It replaces the root layout when active, so it must include its own `` and `` elements and must be a Client Component. Use local `error.js` boundaries for ordinary route failures and global-error only as the application-wide fallback.