【第3382期】B站前端错误监控实践

主要观点总结

B站前端团队自2023年开始，进行了一系列前端错误监控实践，开发了bili-mirror SDK，实现了错误捕获、处理、过滤，并结合白屏检测、请求错误监控、行为日志记录、数据治理等技术，建立了完整的前端监控系统。该监控系统在B站85%以上的业务线中运行，今年初接入210+项目，5月推出的一键告警配置功能也达到了300+。该文章介绍了B站前端错误监控的解决方案、经验、链路，并探讨了自建监控的原因、SDK功能、白屏检测、请求错误监控、行为日志与离线日志、数据治理与可视化平台、前端服务、APM源码解析等。

关键观点总结

关键观点1: B站前端错误监控的开发与实践

B站前端团队自2023年开始，进行了一系列前端错误监控实践，开发了bili-mirror SDK，实现了错误捕获、处理、过滤，并结合白屏检测、请求错误监控、行为日志记录、数据治理等技术，建立了完整的前端监控系统。该监控系统在B站85%以上的业务线中运行，今年初接入210+项目，5月推出的一键告警配置功能也达到了300+。

关键观点2: 自建监控的原因

选择自建监控的原因主要是为了更好地适应B站完整的数据链路和可定制化能力，例如方便使用自研上报的SDK，分业务和技术上报通道，兼容多种历史版本的上报脚本；方便团队清洗、过滤数据从而得到多维度的数据分析、错误追溯；方便团队对聚合指标分析、可视化大盘、一键告警，链路追踪、直接对接内部平台等。

关键观点3: SDK的功能与白屏检测

SDK主要实现了错误捕获、处理、过滤等功能，通过区分错误类型、解析错误、过滤重复错误等方式确保监控的准确性和效率。白屏检测采用关键点采样的方法，通过检测DOM的变化来判断页面是否出现白屏，并提供了修正机制来处理可能因浏览器渲染未完成导致的误判。

关键观点4: 请求错误监控与行为日志

镜像内部提供了固定封装的上报api状态的方法，对于正常请求和错误请求做了区分，错误请求会立即上报相关信息。行为日志记录用户网页的操作日志，包括各种类型的错误、页面状态、事件监听、请求记录等，存储于不同的地方，并提供了自动收集上报机制。

关键观点5: 数据治理与可视化平台

B站前端监控在数据治理方面进行了大量的工作，包括筛选清洗、特征选取、离线计算等，以减轻看板加载负担。同时，也建设了数据可视化平台APM，并采用了OneService平台代替离线计算，使得高维特征能够灵活输出给APM，避免离线计算降维。