Contain errors in the right route

After this lesson

Provide recoverable UI for loader and render errors without leaking internals.

Errors bubble through the route tree

Errors from a loader or route component go to the nearest errorComponent. Production apps should set defaultErrorComponent on the Router and override it where a page needs independent recovery.

Offer recovery, not a stack trace

reset clears the error boundary. User-facing UI should use stable copy; send detailed errors to controlled logging instead of rendering a message that may contain internals.

src/routes/issues/index.tsxtsx

import type { ErrorComponentProps } from '@tanstack/react-router'

export const Route = createFileRoute('/issues/')({
  loader: loadIssues,
  errorComponent: IssuesError,
  component: IssuesPage,
})

function IssuesError({ reset }: ErrorComponentProps) {
  return (
    <section role="alert">
      <h1>Issues could not be loaded.</h1>
      <button onClick={reset}>Try again</button>
    </section>
  )
}

PRACTICE

Turn this lesson into a verifiable skill

Completion checkpoint

Loader and render errors reach the nearest route errorComponent while sibling routes remain navigable.

Exercise

Throw notFound for a missing issue and route network failures to a retryable errorComponent.

Verification

Trigger 404 and 500 paths separately; messaging and recovery should differ while navigation remains usable.

Common pitfalls

Rendering not-found, redirects, and unknown failures as one error.
Retrying in an errorComponent without resetting route state.

SOURCE REFERENCES · CHECKED 2026-08-03https://tanstack.com/start/latest/docs/framework/react/guide/error-boundaries