关于前端监控的思考

前端监控到底是在监控什么

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

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

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

异常监控

由于前端代码的执行环境非常复杂，很难保证在不同的环境下不出现问题，而且有些问题往往是因为浏览器或者操作的原因，难以复现，所以我们需要收集异常数据，方便开发定位问题。

指标监控

什么是指标呢，我理解的应该是衡量我们项目工程化能力的数据。比如我们会记录FCP作为我们的白屏时间，LCP作为首屏时间，以及作业提交的失败率等等。

埋点监控

这个主要是与业务相关，比如我们会需要记录我们投放的营销页面的转化率，用户进入我们的页面之后，点击了什么按钮，将页面滚动到了什么位置，等等。用于还原用户行为的信息记录，为业务方提供业务调整的方向和依据。

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

我们需要收集哪些数据

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

错误数据

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

指标数据

指标数据包括，性能数据(首屏时间，白屏时间，页面是否卡顿，页面加载所有资源的时间)，以及自定义的指标数据(视频播放卡顿情况，作业提交失败率)

通用性能指标数据

前端相关的性能指标繁多，核心指标的设计我们主要参考google提出的以用户为中心的原则来设计。

其主要根据视觉反馈来制定具体的性能指标，下面以打开一个web页面为例：

• 是否已发生？用户感知到服务已有响应，类似传统意义的白屏时间，fp/fcp
• 是否有用？重要内容是否渲染完毕？FMP ，比较接近首屏时间
• 是否可用？用户可以与页面进行交互，也就是页面的可交互时间， TTI
• 是否令人愉快？使用流畅 且无卡顿等，可以检查longtasks

除了以上几项性能数据，其他的如dns查询时间等性能，主要作为附加数据，仅在慢日志时自动采集。

通用性能指标的采集，在实现方案上需要保持对业务较低的侵入性。

FP/FCP

FP(first paint): 首次绘制时间，可以理解为浏览器首个像素的绘制时间
FCP(first contentfull): 首次内容绘制，可以理解为首个可见元素的绘制时间，包含文本、图片、canvas等。

从用户的感知来讲，fp时间接近白屏时间，fcp主要受index.html dom结构以及loading等影响。故我们主要以fp为参考指标。fp/fcp的采集，可以直接使用paint timing api来采集，从测试数据来看，无法是 spa还是非spa页面，fp都比较接近白屏时间。

FMP

FMP(first meaningful paint): 首次有效绘制，也就是页面的核心元素渲染完成的时间点，不同的网站，核心元素的定位不一样。

FMP 目前来看并没有标准的API支持，google lighthouse中采集的fmp的准确率仅为70%左右。但是可以看到主流的前端监控，基本都将FMP作为一项重要的性能指标。我们可以根据自身的业务特点，做关键的特征提取，然后调整权重算法，达到较为接近真实数据的指标。

TTI

TTI(Time-to-interactive): 用户可交互时间，这个阶段浏览器已完成渲染工作，并可影响用户输入的时间。

对于重交互的页面，较为关注 可交互时间，比如我们的scratch3，对于重展示的页面，对可交互时间的关注较弱，比如dm单

TTI指标的采集，google官方提供polyfill方法，可参考使用。

用户行为数据

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

其他数据

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

对于以上数据，前端监控SDK是默认收集部分数据，也提供对应的接口，供项目调用上报到数据平台。

整体架构设计

捕获数据

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

• Ajax/Fetch错误

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

• Promise错误

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

• window.onerror错误

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

• 静态资源加载错误

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

• 性能数据

通过Performance API获取页面性能

• 用户行为

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

• 自定义数据

项目根据自身情况，调用相应接口，上报到数据平台

上报数据

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

Node server中间层

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

大数据平台

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

总结

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