LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1914 min read

Error Handling

Catch rendering errors per route segment with error.tsx, and understand global-error.tsx for root-level failures.

error.tsx as an Error Boundary

Adding an error.tsx file to a route segment automatically wraps that segment in a React error boundary. If anything below it throws during rendering, Next.js shows this file's UI instead of crashing the whole page.

// app/dashboard/error.tsx
'use client';


export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong loading the dashboard.</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}
Must Be a Client Component

error.tsx always requires the "use client" directive at the top, because error boundaries rely on React features (like componentDidCatch under the hood) that only work on the client.

Resetting an Error

The reset function passed as a prop attempts to re-render the segment that errored, without a full page reload — useful for transient failures like a flaky network request.

global-error.tsx

A regular error.tsx does not catch errors thrown in the root layout itself. For that rare case, a global-error.tsx file at the app root can catch it — but since it replaces the root layout entirely, it must render its own <html> and <body> tags.

// app/global-error.tsx
'use client';


export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>Something went seriously wrong.</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  );
}

Common Beginner Mistakes

Forgetting "use client" in error.tsx

Without it, the build fails — error boundaries are a client-only React capability.

Expecting error.tsx to catch errors in its own layout.tsx sibling

error.tsx only catches errors in the segment below it — an error thrown in the layout at the same level bubbles up to the nearest parent error.tsx instead.

FAQs

No — error.tsx only applies to rendering pages and layouts. Route Handlers need their own try/catch logic.

Not necessarily — a single error.tsx higher up the tree will catch errors from all routes below it that don't define their own.

Summary

error.tsx keeps a failure in one part of your app from taking down the whole page. Next, you'll look at handling the specific case of content that simply doesn't exist — 404s.

Next Lesson →

Not Found Pages