前端监控总结

什么是前端监控？

通过一定手段获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为
基础，为产品优化指明方向，为用户提供更加精准、完善的服务。

前端监控一般分为三大类：

数据监控
性能监控
异常监控

数据监控

pv、uv
用户在页面停留时间
用户通过什么入口访问该页面
用户在相应的页面中触发的行为，等

性能监控

不同用户、机型、系统下的首屏加载时间
白屏时间
http 等请求的响应时间
静态资源整体下载时间
页面渲染时间
页面交互动画完成时间，等

异常监控

Js异常监控

对于数据监控，我们常用埋点，现在常见的埋点上报方法有三种：手动埋点、可视化埋点、无埋点。

手动埋点
手写代码调用sdk函数，缺点工程量大，有点方便自定义，做精细化需求

可视化埋点
将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，可视化埋点的缺陷就是可以埋点的控件有限，不能手动定制

无埋点
无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。优点是前端只要一次加载埋点脚本，缺点是流量和采集的数据过于庞大，服务器性能压力山大。

为什么用GIF做埋点
1、防止跨域
2、防止阻塞页面加载，影响用户体验
3、相比PNG/JPG，GIF的体积最小
最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节。同样的响应，GIF可以比BMP节约41%的流量，比PNG节约35%的流量。

性能监控如何做

性能指标有哪些
RUM (Real User Monitoring) 指标，包括 FP, TTI, FCP, FMP, FID, MPFID。Navigation Timing，包括 DNS, TCP, DOM 解析等阶段的指标。

性能指标采集
如何采集性能指标
RUM 指标的采集，可依赖于event-timing
以 FID 指标为例，先创建 PerformanceObserver 对象，监听 first-input 事件，监听到 first-input 事件后，利用 Event Timing API，通过事件的开始处理时间，减去事件的发生时间，即为 FID。

image.png

如何做好js的异常监控

处理js异常监控的目标：
1、感知发生异常
2、迅速定位
3、统计问题来源和场景，并追踪处理

image.png

javascript脚本都是以明文传输并执行，现代前端开发方案为了节省体积，不暴露业务逻辑，或从另外一种语言编译成js，都会将代码混淆和压缩。但这样上报的堆栈很难对应到原始的代码中。

方法一：每次异常发生后，才去生成 sourcemap，在本地或上传到线上进行反解。
方法二：利用sourcemappingURL来制定sourcemap存放的位置
方法三：在构建过程中将生成的sourcemap直接上传后端，将sourcemap与源码做映射，输出报错位置相关信息（sentry）

方法一效率太低，定位问题也太慢。方法二sourcemappingURL 来制定sourcemap 存放的位置，但这样等于将页面逻辑直接暴露给了网站使用者。方法三是现在前端通用的方案。

原理：
Sourcemap 维护了混淆后的代码行列到原代码行列的映射关系，我们输入混淆后的行列号，就能够获得对应的原始代码的行列号，结合源代码文件便可定位到真实的报错位置。

Sourcemap 的解析和反解析过程涉及到 VLQ 编码，它是一种将代码映射关系进一步压缩为类base64编码的优化手段。

image.png

在实际应用中，我们可以把它直接当成黑盒，利用解析工具去解析。得到解析后的真实报错位置后，就可上报错误。

参考：https://juejin.cn/post/7195496297150709821
https://juejin.cn/post/7065123244881215518
https://juejin.cn/post/7010647775880708133