error.tsx defines a route-level error boundary for unexpected failures in Server or Client Components within that segment. It must be a Client Component because error boundaries require React client features.
Basic error boundary file
// app/dashboard/error.tsx
'use client';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<div>
<h2>Something went wrong</h2>
<button onClick={() => reset()}>Try again</button>
</div>
);
}not-found.tsx
For expected missing resources, call notFound() from next/navigation in a Server Component—it renders the nearest not-found.tsx, not the error boundary.
Errors vs empty states
- notFound() — user requested a slug that does not exist
- error.tsx — thrown exception, failed fetch, bug
- try/catch in Server Component — return graceful inline UI for known failure modes
Self-check
- Why must
error.tsxbe a Client Component? - When do you call
notFound()instead of throwing?