📄 tanstack/start/latest/docs/framework/react/guide/error-boundaries
File: error-boundaries.md | Updated: 11/15/2025
Source: https://tanstack.com/start/latest/docs/framework/react/guide/error-boundaries
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
Latest
Search...
+ K
Menu
Getting Started
Guides
Examples
Tutorials
Framework
React
Version
Latest
Menu
Getting Started
Guides
Examples
Tutorials
On this page
Error Boundaries (React Start)
------------------------------
TanStack Start uses TanStack Router's route-level error boundaries.
- Set a default for all routes via the router
- Override per-route with errorComponent
tsx
// src/router.tsx
import { createRouter, ErrorComponent } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
export function getRouter() {
const router = createRouter({
routeTree,
// Shown when an error bubbles to the router
defaultErrorComponent: ({ error, reset }) => (
<ErrorComponent error={error} />
),
})
return router
}
// src/router.tsx
import { createRouter, ErrorComponent } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
export function getRouter() {
const router = createRouter({
routeTree,
// Shown when an error bubbles to the router
defaultErrorComponent: ({ error, reset }) => (
<ErrorComponent error={error} />
),
})
return router
}
tsx
// src/routes/posts.$postId.tsx
import { createFileRoute, ErrorComponent } from '@tanstack/react-router'
import type { ErrorComponentProps } from '@tanstack/react-router'
function PostError({ error, reset }: ErrorComponentProps) {
return <ErrorComponent error={error} />
}
export const Route = createFileRoute('/posts/$postId')({
component: PostComponent,
errorComponent: PostError,
})
// src/routes/posts.$postId.tsx
import { createFileRoute, ErrorComponent } from '@tanstack/react-router'
import type { ErrorComponentProps } from '@tanstack/react-router'
function PostError({ error, reset }: ErrorComponentProps) {
return <ErrorComponent error={error} />
}
export const Route = createFileRoute('/posts/$postId')({
component: PostComponent,
errorComponent: PostError,
})
Notes:
- ErrorComponent is a simple built-in UI you can replace.
- Call reset() to retry rendering the route after fixing state.
- Use beforeLoad/loader to throw errors that will be caught.
