Improving Resilience: Route-Segment Error Boundaries

Release: v0.1.156 · Control: ERR-02 · Category: Error Boundaries

What Changed

Prior to this release, the application had no route-level error.tsx files beneath the root layout. While a root-level boundary can catch catastrophic failures, it provides no isolation between sections of the app — a crash in the Billing page, for example, would take down the entire dashboard UI for the affected user.

This release introduces dedicated error boundaries at each major route segment.

Affected Routes

Route Segment	File Added
Dashboard root	src/app/dashboard/error.tsx
People	src/app/dashboard/people/error.tsx
Matches	src/app/dashboard/matches/error.tsx
Billing	src/app/dashboard/billing/error.tsx

How It Works

Next.js error.tsx files act as React Error Boundaries scoped to a specific route segment and all of its children. When an unhandled error is thrown during rendering or in a Server Component within that segment:

1. The error is caught by the nearest error.tsx boundary.
2. The rest of the application (all other route segments) continues to render normally.
3. The affected segment displays a contained error UI.
4. The user is presented with a Retry button that calls Next.js's built-in reset() function to attempt re-rendering the segment.

// Example: src/app/dashboard/billing/error.tsx
'use client';

export default function BillingError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>Something went wrong loading Billing.</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

Note: error.tsx files must be Client Components ('use client') because they receive the reset callback prop from the Next.js runtime.

Impact

• Fault isolation: A runtime error in Billing, Matches, People, or the dashboard shell no longer cascades to the root layout.
• User experience: Users on unaffected pages see no disruption.
• Recoverability: The reset() button allows transient errors (e.g. a failed API call on initial render) to be retried without a full page reload.
• Compliance continuity: Sanctions screening workflows on unaffected routes remain operational even if a separate route segment encounters an error.