Real World Example

On Swiggy or Zomato, the order page must not go blank if the "live map" service is slow or down. Each widget gets its own boundary:

app/orders/[orderId]/
├── page.tsx           order summary (fast, from DB)
├── loading.tsx        skeleton
├── error.tsx          "Could not load this order"
├── not-found.tsx      "No such order"
└── _components/
    ├── LiveMap.tsx           slow external service  -> <Suspense> + own error boundary
    └── DeliveryPartner.tsx   -> <Suspense>

import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { ErrorBoundary } from 'react-error-boundary';
import { getOrder } from '@/lib/orders';
import LiveMap from './_components/LiveMap';
import DeliveryPartner from './_components/DeliveryPartner';

export default async function OrderPage({ params }: { params: Promise<{ orderId: string }> }) {
  const { orderId } = await params;
  const order = await getOrder(orderId);
  if (!order) notFound();

  return (
    <main>
      <h1>Order {order.id}</h1>
      <p>Status: {order.status}</p>
      <ErrorBoundary fallback={<p>Live tracking is unavailable right now.</p>}>
        <Suspense fallback={<p>Loading map...</p>}>
          <LiveMap orderId={order.id} />
        </Suspense>
      </ErrorBoundary>
      <Suspense fallback={<p>Finding your delivery partner...</p>}>
        <DeliveryPartner orderId={order.id} />
      </Suspense>
    </main>
  );
}