Partial page failures do not crash the entire page

A dashboard that fetches user profile, billing status, and activity feed in parallel should degrade gracefully when only one source fails — the other two sections are still useful. CWE-755 (Improper Handling of Exceptional Conditions) applies when a single data source failure crashes an entire page that could have partially rendered. ISO 25010 reliability.fault-tolerance requires that failures in one subsystem do not propagate to others. Practically, a single top-level error boundary means a transient billing API timeout takes down the entire dashboard, blocking users from accessing unrelated functionality they need.

Wrap each independent data-fetching section in its own ErrorBoundary and Suspense pair so failures are contained to the section that failed.

// dashboard/page.tsx
<div className="grid grid-cols-3 gap-4">
  <ErrorBoundary fallback={<WidgetError name="Profile" />}>
    <Suspense fallback={<Skeleton />}><ProfileWidget /></Suspense>
  </ErrorBoundary>
  <ErrorBoundary fallback={<WidgetError name="Activity" />}>
    <Suspense fallback={<Skeleton />}><ActivityFeed /></Suspense>
  </ErrorBoundary>
  <ErrorBoundary fallback={<WidgetError name="Billing" />}>
    <Suspense fallback={<Skeleton />}><BillingSummary /></Suspense>
  </ErrorBoundary>
</div>

In Next.js App Router, add error.tsx and loading.tsx at sub-route segments for parallel routes to get this isolation automatically at the route level.