完成后你将能够
能为 Loader 与组件错误提供可恢复、不会泄露内部信息的界面。
错误沿路由树向上冒泡
Loader 或路由组件抛出的错误会交给最近的 errorComponent。产品级应用应在 Router 上设置 defaultErrorComponent，再为需要独立恢复的页面覆盖它。
提供重试，不展示堆栈
reset 会重置错误边界。面向用户的界面应使用稳定文案；详细错误进入受控日志，而不是直接渲染可能包含内部信息的 message。
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>
)
}把本课变成可验证的能力
Loader 或渲染错误被最近的路由 errorComponent 捕获，兄弟路由仍可导航。
让一个不存在的 Issue 抛出 notFound，并让网络故障进入可重试的 errorComponent。
分别触发 404 和 500；页面文案、状态与恢复动作应不同，导航栏保持可用。
- 把 404、重定向和未知异常都渲染成同一错误。
- 在 errorComponent 中重试却不重置路由状态。