1
0
Files
DiAL/openspec/specs/frontend-error-boundary/spec.md
lanyuanxiaoyao bcfb907bd3 feat: 基础设施加固 — 修复构建、数据保留、错误边界、bundle 拆分
- 修复 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 到主规范
2026-05-13 16:48:56 +08:00

1.3 KiB
Raw Blame History

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