Error handling: Router error boundaries

Router error boundaries

Router error boundaries in the Error handling guide.

For agentsUpdated 2026-10-20

The router has its own boundary per route. A route's error option renders in place of that route when its loader or component throws; it receives { error, reset }, and a navigation resets it. notFound renders when notFound() is thrown at or below the route. Errors inside a route never replace the layout routes above it. See Routing for loaders, redirects and notFound.

src/route-error.tsxtsx

import { defineRoute } from "@shadow-js/router";

export const post = defineRoute("/posts/:id", {
  loader: ({ params }) => {
    if (params.id === "0") throw new Error("no such post");
    return { id: params.id };
  },
  component: () => <article>post</article>,
  error: ({ error, reset }) => (
    <div role="alert">
      <p>{error instanceof Error ? error.message : "Unknown error"}</p>
      <button type="button" onClick={reset}>
        Try again
      </button>
    </div>
  ),
});