0PricingLogin▼
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Granular error.tsx and global-error Boundaries

Catch render and action failures at segment and root level with recoverable reset flows.

Why Error Boundaries Matter in App Router

In Next.js 15's App Router, your application is composed of nested route segments. Each segment can independently fail during rendering or data fetching. Without proper boundaries, a single broken segment crashes the entire page — or worse, the entire application.

Next.js solves this with two special files:

  • error.tsx — catches errors within a specific route segment and its children
  • global-error.tsx — catches errors in the root layout, acting as a last-resort safety net

These boundaries give you granular control: a failure in /dashboard/analytics can be caught and recovered without taking down /dashboard/settings.

The error.tsx Contract

An error.tsx file must export a default React Client Component (it requires the 'use client' directive). It receives two props from Next.js automatically:

  • error — the thrown Error object, including a digest property (a server-generated hash for server-side error correlation)
  • reset — a function you call to re-render the segment, giving users a recovery path

The component is rendered in place of the segment that failed, wrapped in a React Error Boundary by the framework. You do not need to write the class-based boundary yourself.

'use client'

import { useEffect } from 'react'

interface ErrorPageProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  useEffect(() => {
    // Log to your observability service (e.g. Sentry, Datadog)
    console.error('[Segment Error]', error.message, 'digest:', error.digest)
  }, [error])

  return (
    <div role="alert" className="p-6 rounded-md border border-red-300 bg-red-50">
      <h2 className="text-lg font-semibold text-red-700">Something went wrong</h2>
      <p className="text-sm text-red-600 mt-1">{error.message}</p>
      <button
        onClick={reset}
        className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
      >
        Try again
      </button>
    </div>
  )
}

All lessons in this course

  1. OpenTelemetry Tracing with instrumentation.ts
  2. Granular error.tsx and global-error Boundaries
  3. Structured Logging Across Server and Edge
  4. Capturing Server Action Failures and Telemetry
← Back to Next.js 15 Fullstack (App Router + Server Actions)