关于前端监控的思考

前端监控究竟是在监控什么

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

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中间层

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

大数据平台

经过该平台咱们能够很直接地了解项目的各方面数据，以帮助咱们做出决策

总结

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