服务器与执行
错误边界（Error Boundaries）
错误边界（React Start）
TanStack Start 使用 TanStack Router 的路由级错误边界（Error Boundaries）。
- 通过路由器为所有路由设置一个默认错误边界
- 通过
errorComponent按路由覆盖
配置默认错误边界
// 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/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,
})注意：
ErrorComponent是一个简单易用的内置 UI，你可以替换成自己的实现。- 调用
reset()可以在修复状态后重试渲染该路由。 - 可以在
beforeLoad/loader中抛错，这些错误会被错误边界捕获。
译者注：reset 是怎么工作的？
errorComponent 接收的 reset 回调会清除路由器中的错误状态，并让边界恢复渲染。常见的用法是提供一个「重试」按钮：用户点击后，调用 reset() 重试渲染该路由，如果问题已修复就恢复页面。