Skip to content

Next.js

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.
  • error.js boundaries do not currently work in next dev development environment.

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>
      <head></head>
      <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.

Next Steps

Error Handling

Learn how to handle errors on the server and client.
LoadingTemplate