前端监控的思考

前端监控到底要做些什么？

基于数据驱动的做事原则，我们需要统计线上项目中，用户的行为和使用情况，从而更加贴近用户，为我们的决策提供相应的数据支持，更好地迭代升级我们的产品，创造用户价值。
既然如此，研发同学以及业务方对前端监控的诉求应该有：

1. 主动监控，并提供告警功能
2. 性能数据的采集，并提供慢会话的日志分析
3. 错误，异常数据的采集
4. 能重现用户行为

而目前，对于我们来说，需要做的前端监控包括：异常监控 ， 性能监控 ， 埋点监控

1. 异常监控：由于前端代码的执行环境非常复杂，很难保证在不同的环境下不出现问题，而且有些问题往往是因为浏览器或者操作的原因，难以复现，所以我们需要收集异常数据，方便开发定位问题。
2. 性能监控：主要包括监听网页或者说产品在用户端的体验。加载的延迟，操作的卡顿，尤其是在移动端，用户对页面相应延迟和连接中断的容忍度很低。
3. 埋点监控：主要是用于还原用户行为，为业务方提供业务调整的方向和依据。

对于一个成熟的前端体系而言，一个靠谱的前端数据采集，上报，处理，监控报警平台也是非常有必要的。

我们需要收集哪些数据

根据上面说到的三个监控方向，我们需要的监控数据如下：

错误数据

• Ajax/Fetch 错误
• Promise 错误
• window.onerror 错误
• 静态资源加载错误
• 自定义错误

性能数据

性能数据包括：首屏时间，白屏时间，页面是否卡顿，页面加载所有资源的时间

用户行为数据

我们需要记录用户从进入页面，点击事件，滚动事件，离开页面等操作

其他数据

用户浏览器信息 , 用户硬件设备信息等等

整体架构设计

捕获数据

目前主流的监控工具库有 sentry,badjs.saiji 等等，经过充分调研后，认为 sentry 能够匹配我们的监控需求，但是由于 sentry 并不能完全满足我们的监控需求，所以我们对其进行了扩展。
实现捕获数据的基本原理如下：

• Ajax/Fetch 错误

通常是在 http 中使用中间件来处理，通过代理原生的 XHR 对象，以及原型方法和 Fetch 方法，来实现对 http 请求调用的拦截

• Promise 错误

通常是通过监听 unhandledrejection 来捕获 Promise 被 reject 但是没有 catch 的异常，并得到关于异常的信息

• window.onerror 错误

捕获全局异常，无论异步还是同步错误，onerror 都能捕获到运行时错误

• 静态资源加载错误

通常是通过 window.addEventListener('error', function(event) {...})来捕获

• 自定义错误

提供 capturenException 方法给用户主动上报错误

• 性能数据

通过 Performance API 获取页面性能

• 用户行为

记录用户从进入页面，点击事件，滚动事件，离开页面等操作

上报数据

• 避免频繁上报，即通过延时，且事件满足或者数量量达到上限之后，将这段时间的所有数据合并上报
• 避免数据丢失，即讲数据存储到本地，优先使用 indexDB, 并降级使用 localstorage，确保数据能离线存储
• 避免流量浪费，由于上报的数据包含大量的信息，如用户操作，异常信息等等，通过上报前的数据压缩，能极大地提高宽带利用率

Node server 中间层

• 与数据平台节藕，数据平台只需要关心数据的展示即可
• 上报的数据需要再次加工处理，比如通过前端上报的新鲜度时间，计算出实际的事件发生时间

大数据平台

通过该平台我们可以很直接地了解项目的各方面数据，以帮助我们作出决策

总结

目前监控系统已经广泛应用在团队的各个项目中，对了解项目性能，项目运行情况，管理项目等提供了很大的帮助，也方便团队做技术决策。