lanyuanxiaoyao
bcfb907bd3
- 修复 build script 引用已删除的 registerCheckers，恢复生产构建 - 生产入口添加 SIGINT/SIGTERM 优雅关闭（与 dev.ts 一致） - 新增 runtime.retention 配置（默认 7d），ProbeStore.prune() 定时清理过期数据 - parseDuration 扩展支持 h/d 单位 - 新增前端 ErrorBoundary 组件，防止渲染错误白屏 - Vite codeSplitting.groups 拆分 vendor chunks（业务代码 1180KB → 47KB） - 同步 delta specs 到主规范
32 lines
1.3 KiB
Markdown
32 lines
1.3 KiB
Markdown
## 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
|