Signature

function useRouteError(): Error | undefined;

Parameters

Takes no arguments and requires RouterProvider. Route ErrorBoundary components are rendered inside that provider.

Returns

Returns the current snapshot’s Error or undefined. HTTP errors normalized by the application may also have status, statusText, and data; narrow them with isRouteErrorResponse before reading those fields. It subscribes to the error value: changes to loader data or pending state alone do not trigger a render through this hook.

Example

Keep the boundary in its own route component file and re-export it from route.tsx. The route loader owns requests; the boundary only renders the reported failure.

import { isRouteErrorResponse, useRouteError } from "@kasperrt/smolter/preact";

export function ErrorBoundary() {
  const error = useRouteError();
  const title = isRouteErrorResponse(error)
    ? `${error.status} ${error.statusText}`
    : "Unable to load this page";

  return (
    <section role="alert">
      <h1>{title}</h1>
      <p>{error?.message}</p>
    </section>
  );
}

Scope

Independent fetcher failures are exposed on fetcher.error and do not replace the page error. This hook is not a general Preact render-error catcher. Await uses its errorElement or an enclosing Preact boundary for rejected promises.