Live demo

Loading & Error Boundaries

Watch the top progress bar as you navigate between pages. Below, withBoundary() wraps async data fetches in graceful loading and error UI — no network failures break the page.

Navigation Progress

Click any link below. The progress bar at the top of the page shows the SPA navigation in progress. If the fetch fails, it falls back to a full-page navigation, keeping the user unstranded.

Console breadcrumbs

Open DevTools → Console to see [boundaries] log messages as you navigate:

  • [boundaries] initialization
  • [boundaries] navigation start
  • [boundaries] navigation end

Async Data with Loading Boundary

Click "Load data" below. The boundary shows a spinner while fetching, then renders the content.

Error Boundary with Retry

Click "Load and fail" below. The boundary catches the error, renders an error banner, and provides a Retry button.

Custom Loading UI

This boundary shows a skeleton placeholder instead of a spinner, demonstrating how to customize loading states.

Ready to handle errors gracefully?