error.js
An error file defines an error UI boundary for a route segment.
app/dashboard/error.tsx
'use client'; // Error components must be Client Components
import { useEffect } from 'react';
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
useEffect(() => {
// Log the error to an error reporting service
console.error(error);
}, [error]);
return (
<div>
<h2>Something went wrong!</h2>
<button
onClick={
// Attempt to recover by trying to re-render the segment
() => reset()
}
>
Try again
</button>
</div>
);
}
Props
error
An instance of an Error
object. This error can happen on the server or the client.
reset
A function to reset the error boundary, which does not return a response.
Good to know:
error.js
boundaries must be Client Components.- An
error.js
boundary will not handle errors thrown in alayout.js
component in the same segment because the error boundary is nested inside that layouts component.
- To handle errors for a specific layout, place an
error.js
file in the layouts parent segment.- To handle errors within the root layout or template, use a variation of
error.js
calledapp/global-error.js
.
global-error.js
To specifically handle errors in root layout.js
, use a variation of error.js
called app/global-error.js
located in the root app
directory.
app/global-error.tsx
'use client';
export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
);
}
Good to know:
global-error.js
replaces the rootlayout.js
when active and so must define its own<html>
and<body>
tags.