Handle Errors with error.tsx

Next.js

React

JavaScript

Technical Specification

Add an error.tsx file to handle rendering when a route throws an error.

Input/Output Samples

Input:fetch fails

Output:Error UI with retry button

Optimal Logic Path

"use client";

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <p>{error?.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

Architectural Deep-Dive

Segment-level error boundaries let you show nice error UIs and retry failing routes.