架构师的职责，就是给这个黑盒装上“飞行记录仪”。我们要搭建一套 前端全链路性能监控系统 ，把用户的每一次卡顿、每一次报错、每一次资源加载失败，都实时传回我们的大屏。

团队开始前端错误监控方向的开发。经历了一些列的迭代和发展，从监控SDK、上报、数据治理、看板集成、APM自研可视化初步完成了一条完整且适合B站前端监控。

线上问题还在等待用户/运营反馈？接入告警后每天消息多到爆炸？来看下字节商业化前端如何治理前端告警，实现前端线上问题召回率从 0 到 60% 的提升？

随着前端业务的日趋庞大，及时发现和解决业务中的问题、优化用户体验、实时监控业务健康度变得愈发的重要。

序言 埋点数据作为推荐、搜索、产品优化的基石，其数据质量的重要性不言而喻，而要保障埋点数据的质量，埋点验证则首当其冲。工欲善其事必先利其器

本文以“前端监控上报数据”的业务场景，重点解析在页面实例关闭时，如何将监控数据上传到服务端的解决方案。

1. 为什么用img的src做请求的发送，sendBeacon又是什么？ 2. 埋点监控系统负责处理哪些问题，需要怎么设计api？ 3. 在react、vue的错误边界中要怎么处理？

用数据库来存储，建一张包含时间、员工id，每次有人签到就直接在对应表中insert，缺点：如果人数很多并且同时签到，会造成数据库连接池爆炸，不能实时更新。优点：存有明细数据，可以查询某一天的某个时刻签到的 用每天的日期当做bitmap的key，value是userId，一个us…

一般情况下都是通过重写js原生事件然后拿到错误信息，比如ajax请求，通过重写xhr、fetch事件来截取接口信息，所以我们需要优先编写一个易于重写事件的函数来复用。 所有的请求第三方库都是基于xhr、fetch二次封装的，所以只需要重写这两个事件就可以拿到所有的接口请求的信息…