## Purpose 定义前端全局错误边界:捕获渲染错误防止白屏,展示友好的错误兜底 UI。 ## Requirements ### Requirement: 全局渲染错误捕获 前端应用 SHALL 在最外层包裹 ErrorBoundary 组件,捕获所有子组件树的渲染错误,防止白屏。 #### Scenario: 子组件渲染抛出异常 - **WHEN** 任意子组件在渲染过程中抛出 JavaScript 异常 - **THEN** ErrorBoundary SHALL 捕获该异常,展示错误兜底 UI,而非白屏 #### Scenario: 错误兜底 UI 内容 - **WHEN** ErrorBoundary 捕获到渲染错误 - **THEN** 系统 SHALL 使用 TDesign Result 组件(type="500")展示错误提示,并提供"刷新页面"按钮 #### Scenario: 刷新页面恢复 - **WHEN** 用户点击错误兜底 UI 中的"刷新页面"按钮 - **THEN** 系统 SHALL 调用 `window.location.reload()` 重新加载页面 #### Scenario: 错误信息记录 - **WHEN** ErrorBoundary 捕获到渲染错误 - **THEN** 系统 SHALL 通过 `console.error` 输出错误信息和组件堆栈 ### Requirement: ErrorBoundary 包裹位置 ErrorBoundary SHALL 包裹在 QueryClientProvider 外层,确保 React Query 相关的渲染错误也能被捕获。 #### Scenario: 包裹层级 - **WHEN** 应用渲染树构建 - **THEN** 层级 SHALL 为 StrictMode > ErrorBoundary > QueryClientProvider > App