Handling Global Errors in Next.js

Snippet

Handling Global Errors in Next.js

The error.tsx file automatically catches errors in its segment and allows users to recover by re-rendering the component tree using the reset function.

snippet.js
javascript
'use client';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

nextjs

Breakdown

'use client';

Error boundaries must be Client Components.

reset: () => void

A function that attempts to re-render the segment to recover from the error.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Handling Global Errors in Next.js

Related