Error boundaries

An error during render in one part of your tree used to take down the whole app. Error boundaries catch that error at a chosen point and render a fallback UI instead. In the App Router, you create an error.tsx file next to a page.tsx and Next.js wires it up automatically.

app/books/error.tsx

tsx

'use client';

import { useEffect } from 'react';

export default function BooksError({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="rounded-md border border-red-200 bg-red-50 p-4">
      <h2 className="text-red-800">We could not load the books.</h2>
      <button onClick={reset} className="mt-2 underline">
        Try again
      </button>
    </div>
  );
}

A file named error.tsx becomes the boundary for everything in the same segment.

Error boundaries have scope. If the error happens inside app/books/, the error.tsx in that folder catches it and the rest of the app keeps running. You can nest boundaries at any level of the tree. This is how you stop one broken widget from blowing up the whole page.

Quiz: Quiz

Loading practice…

Checkpoint: Optimistic UI and streaming checkpoint

Loading practice…