Skip to main content

@ovineko/spa-guard-react-router

React Router v7 error boundary integration for spa-guard.

Catches route errors via useRouteError() and automatically retries chunk loading failures with spa-guard integration.

Install​

pnpm add @ovineko/spa-guard-react-router @ovineko/spa-guard @ovineko/spa-guard-react react react-router

Usage​

Register ErrorBoundaryReactRouter as the errorElement (or ErrorBoundary) for your routes:

import { createBrowserRouter, RouterProvider } from "react-router";
import { ErrorBoundaryReactRouter } from "@ovineko/spa-guard-react-router";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    ErrorBoundary: ErrorBoundaryReactRouter,
  },
]);

export function Root() {
  return <RouterProvider router={router} />;
}

Custom fallback​

import {
  ErrorBoundaryReactRouter,
  type RouterFallbackProps,
} from "@ovineko/spa-guard-react-router";

function MyFallback({ error, isChunkError, isRetrying }: RouterFallbackProps) {
  if (isRetrying) return <div>Reloading...</div>;
  if (isChunkError) return <div>Failed to load module — retrying…</div>;
  return <div>Something went wrong: {String(error)}</div>;
}

// In your route definition:
<ErrorBoundaryReactRouter fallback={MyFallback} />;

API​

From @ovineko/spa-guard-react-router:

  • ErrorBoundaryReactRouter — error boundary component for React Router routes
  • ErrorBoundaryReactRouterProps — props for ErrorBoundaryReactRouter
    • autoRetryChunkErrors? — retry chunk errors automatically (default: true)
    • fallback? — custom fallback component or render function
    • onError? — callback invoked on any route error
    • sendBeacon? — send beacon on error (default: true)
  • RouterFallbackProps — props passed to the fallback component
    • error — the route error caught by useRouteError()
    • isChunkError — whether the error is a chunk load failure
    • isRetrying — whether spa-guard is currently retrying
    • spaGuardState — current spa-guard state