Next.js Error Boundaries: error.tsx, global-error.tsx, and Sentry Integration

Unhandled errors in Next.js App Router don't just show users a blank screen -- they take down the whole route tree. Error boundaries contain the damage. Here's how to use them properly. The Three Error Files Next.js App Router has three error boundary files: app/ error.tsx # Catches errors in the route segment global-error.tsx # Catches errors in the root layout not-found.tsx # Renders on notFound() or 404 error.tsx // app/error.tsx (or app/dashboard/error.tsx for segment-specific) 'use client' // Error components must be Client Components import { useEffect } from 'react' import { Button } from '@/components/ui/button' interface ErrorProps { error: Error & { digest?: string } reset: () => void } export default function Error({ error, reset }: ErrorProps) { useEffect(() => { // Log to your error service console.error('Route error:', error) // captureException(error) -- Sentry, etc. }, [error]) return ( <div className='flex flex-col items-center justify-center min-h-[400px]