Production Stability with GlitchTip
监控 React GlitchTip 性能优化
生产环境稳定性治理：白屏到全链路监控 (GlitchTip 方案) + 项目整体分析及优化
项目：React 17 + UmiJS 3
一、 现状与痛点
在生产环境中，我们经常面临以下”黑盒”问题：
- 用户白屏 (WSOD)：React 组件渲染抛出错误，导致整个 DOM 树卸载，用户看到一片空白，只能刷新或关掉。
- 调试困难：生产环境代码经过压缩混淆（Minified），报错堆栈是
a.js:1:2504，无法定位具体业务逻辑。 - 被动发现：往往等到用户投诉才知道系统挂了，缺乏主动感知的手段。
目标：
- 止血：代码层面兜底，白屏时展示友好 UI。
- 监控：实时捕获错误堆栈、用户行为路径。
- 还原：通过 SourceMap 将报错还原到源码行数。
- 成本：数据私有化，不依赖昂贵的 SaaS 服务。
二、 架构选型
我们采用了 “GlitchTip + Sentry SDK” 的组合方案。
| 模块 | 选型 | 原因 |
|---|---|---|
| 监控后端 | GlitchTip (Docker) | Sentry 的开源轻量级替代品。兼容 Sentry API，资源占用小（~1GB 内存），支持私有化部署。 |
| 前端 SDK | @sentry/react (v7) | 工业级标准，生态最成熟。锁定 v7 版本以兼容 Webpack 4。 |
| 框架环境 | React 17 + UmiJS 3 | 当前项目技术栈。 |
三、 核心实现方案
1. 服务端：私有化部署 (Docker)
为了数据安全和节省成本，我们在内网/局域网服务器搭建了 GlitchTip。
2. 前端代码：三道防线
第一道防线：版本兼容性 (坑点排查)
由于 UmiJS 3 基于 Webpack 4，且默认不编译 node_modules，直接引入最新的 Sentry v8 会导致 ES2020 语法 (?.) 报错。
解决方案：强制锁定 Sentry v7 黄金搭档版本。
npm install @sentry/react@7.114.0 @sentry/tracing@7.114.0 --save
npm install @sentry/webpack-plugin@1.20.1 --save-dev
第二道防线：全局兜底 (ErrorBoundary)
利用 Umi 的 src/app.tsx 运行时配置，包裹整个应用。
第三道防线：SourceMap 源码还原
.map文件被上传到了 GlitchTip 的数据库里。- 当你本地
serve dist报错时，GlitchTip 会用报错信息里的release版本号，去数据库里找对应的.map文件。
四、 最终效果
- 用户体验：发生致命错误时，不再白屏，而是展示友好的”重试”按钮。
- 研发效率：
- GlitchTip 后台实时收到报警。
- 直接看到源码：从
umi.js的乱码直接定位到IndexPage.tsx第 30 行。 - 上下文还原：可以看到用户的面包屑轨迹（点击了什么按钮 -> 跳转了什么路由 -> 接口报错 -> 页面崩溃）。
- 接入企业微信/钉钉机器人报警。
- 利用 GlitchTip 监控接口慢请求（Performance Tracing）。
五、 分析优化：分包 + Tree Shaking
优化前：
