前端错误监控体系：从白屏、接口异常到用户行为回放

前端监控的目标不是堆数据，而是在用户反馈前识别影响范围、找到版本与故障边界，并让团队可以安全复现。SDK 本身也会消耗主线程、网络和用户隐私预算，所以采集前先定义问题与处置人。

事件类型和覆盖边界

• 同步运行错误：捕获 Window 的 error 事件，保留错误类型、脱敏后的消息和可用 stack。
• 未处理 Promise：监听 unhandledrejection；不要假设跨域脚本的拒绝一定可见。
• 资源错误：script、link、img、font 等加载失败走资源事件路径，需区分资源错误与 JS 异常。
• 框架错误：React/Vue 等错误边界补充组件名和路由，避免重复采集全局同一异常。
• 接口失败：记录方法、路由模板、状态码、业务码、耗时与 requestId；不记录完整 query、请求体或响应正文。
• 白屏/关键操作：用关键容器与用户可见结果检测，结合关键路径完成率，不能仅靠 document.body 是否为空。

全局监听拿不到所有异步与浏览器内部错误。跨域脚本可能只有 Script error；资源、iframe 和 Worker 也有各自的边界。采集能力应按实际浏览器逐项验证，不能把“监听器已注册”当成完整覆盖。

统一事件契约

每条事件包含 schemaVersion、eventId、occurredAt、release、environment、routeTemplate、browserFamily、errorFingerprint、requestId 和采样标志。用户标识使用有权限控制的伪匿名 ID；明确保留时间、访问人群和删除策略。URL 只保留 pathname 或路由模板，去除 query/hash 中的 token、邮箱、搜索词和对象 ID。

错误指纹应稳定且可版本化，不要仅用 message 做分组；堆栈行号、打包文件名和 source map 版本都可能变化。source map 上传到受控监控平台，不放在公共静态目录。回放默认关闭输入字段，密码、文本、支付、私信和书籍内容必须遮罩；采集用户操作前提供清晰告知并遵守退出选择。

采集、传输和限流

SDK 延迟初始化并按采样率、环境和错误级别筛选。将重复错误在客户端短时间聚合，设置队列最大条数、单条字节上限、flush 超时和退避；页面关闭时可尝试 sendBeacon，但不能依赖它保证送达。采集服务做 schema 验证、速率限制和大小限制，避免错误上报成为拒绝服务入口。

网络断开时有限期存储摘要，不持久化正文和隐私字段；离线队列过期、登出和账号切换时清理。版本、路由与请求 ID 足以关联排查时，不再附加原始点击文本或整个 DOM 快照。

告警与排障闭环

1. 按 release、路由、浏览器版本和错误指纹看新增量与受影响会话，不把单次错误总数误当用户数。
2. 对比发布前后错误率与核心操作成功率；分母、采样率与过滤规则必须保持可比。
3. 用 requestId/traceId 关联 API 服务端日志，先定位共同依赖，再回到最小复现。
4. 回滚或关闭功能后，确认新错误停止、关键业务恢复，保留影响时间和修复证据。
5. 将稳定复现的故障加入回归测试；低频高影响错误也要留有负责人和处理时限。

验收清单

构造同步异常、未处理 Promise、404 资源、CORS 脚本、接口超时、离线、旧版本 source map 和白屏路径。检查同一错误被正确聚合、requestId 可关联、SDK 离线不会阻塞交互、登出后不继续发送旧账号队列。检查日志、请求和回放数据中没有 token、个人输入、私有 URL 与书籍全文。

参考：MDN Window error、MDN unhandledrejection、PerformanceObserver、web.dev Web Vitals measurement。