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 a layout.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 called app/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 root layout.js when active and so must define its own <html> and <body> tags.