React Router v7 中的 `ErrorBoundary` 详解

🛡️ 什么是 ErrorBoundary？

ErrorBoundary 是 React Router v7 中的错误边界组件，它会在以下情况下自动被调用：

路由加载失败 (loader 函数抛出错误)
组件渲染错误 (React 组件抛出异常)
Action 执行失败 (action 函数抛出错误)
404 错误 (路由不存在)
其他 HTTP 错误 (如 500、403 等)

🔄 ErrorBoundary 的工作流程

让我用图表展示 ErrorBoundary 在应用中的位置：

📋 ErrorBoundary 的错误处理逻辑

jsx 复制代码

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  let message = "Oops!";
  let details = "An unexpected error occurred.";
  let stack: string | undefined;

  if (isRouteErrorResponse(error)) {
    message = error.status === 404 ? "404" : "Error";
    details =
      error.status === 404
        ? "The requested page could not be found."
        : error.statusText || details;
  } else if (import.meta.env.DEV && error && error instanceof Error) {
    details = error.message;
    stack = error.stack;
  }

  return (
    <main className="pt-16 p-4 container mx-auto">
      <h1>{message}</h1>
      <p>{details}</p>
      {stack && (
        <pre className="w-full p-4 overflow-x-auto">
          <code>{stack}</code>
        </pre>
      )}
    </main>
  );
}

🎯 错误类型处理

路由响应错误 (isRouteErrorResponse(error))
- 404 错误：显示 "页面未找到"
- 其他 HTTP 错误：显示状态文本
开发环境的 JavaScript 错误
- 显示错误消息和堆栈跟踪
- 仅在开发模式下显示详细信息
通用错误
- 显示通用错误消息

📚 ErrorBoundary 总结

🎯 ErrorBoundary 的核心作用

全局错误捕获 - 捕获整个应用中的未处理错误
用户友好的错误显示 - 显示友好的错误页面而不是白屏
开发调试支持 - 在开发模式下显示详细的错误信息
应用稳定性 - 防止单个错误导致整个应用崩溃

🔄 与 Layout 的关系

jsx 复制代码

// 渲染层次：
Layout({ children: ErrorBoundary }) // 当有错误时
  └── ErrorBoundary({ error }) 
      └── 错误页面内容

// 正常情况：
Layout({ children: App }) // 正常情况
  └── App() 
      └── <Outlet /> 
          └── 正常页面组件

🛠️ 自定义 ErrorBoundary

你可以根据不同的错误类型提供不同的处理：

404 错误 - 显示 "页面未找到"
500 错误 - 显示 "服务器错误"
网络错误 - 显示 "网络连接问题"
权限错误 - 显示 "访问被拒绝"

ErrorBoundary 是 React Router v7 提供的强大错误处理机制，确保你的应用即使在出现错误时也能保持良好的用户体验。