TSX Public

Next.js Route Error Boundary

Handle uncaught route segment errors and let the user retry without a full reload.

#nextjs #error-handling #app-router #typescript

TSX

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

import { useEffect } from 'react';

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

export default function DashboardError({
  error,
  reset,
}: ErrorPageProps) {
  useEffect(() => {
    console.error('Dashboard route failed:', error);
  }, [error]);

  return (
    <section role="alert">
      <h2>Could not load the dashboard.</h2>

      {error.digest && (
        <p>Reference: {error.digest}</p>
      )}

      <button type="button" onClick={reset}>
        Try again
      </button>
    </section>
  );
}

Snippet actions

CodShot user

Updated: 2026-08-06 18:36

Public snippets

Forks