这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天。

什么是前端监控

前端监控就是尽可能的采集从输入URL到页面展示这一过程以及后续用户交互中产出的性能指标与发生的异常事件并报到平台完成消费。

为什么需要前端监控

前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析与归因。

前端监控到底监控了什么

• 性能指标
• 异常事件
• 用户行为

常用性能指标

传统的性能指标

主要依赖Navigation Timing或者Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。

缺： 专注于容易衡量的技术细节，但很难反映出用户所关心的是什么。

以用户为中心的性能指标

专注于用户视角下的浏览体验。

• FP：首次渲染的时间点，FP时间点之前，用户看到的都是没有任何内容的白色屏幕。

• FCP：首次有内容渲染的时间点。

• FMP：首次绘制有意义内容的时间点。

• TTI：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需的时间。

• TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验更好。

• SI：衡量页面可视区域加载速度，帮助检测页面的加载页面的加载体验差异。

• FID：测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等)直到浏览器对交互做出响应，实际能够开始处理事件时处理程序所经过的时间。

• 衡量用户体验过程的性能指标

• LCP：最大内容在可视区域内变得可见的时间点。

  • 优：
  • 容易理解
  • 给出与FMP相似的结果
  • 容易计算和上报

• TBT：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和。 长任务： 任务在主线程上运行超过50毫秒，超过50毫秒后的任务耗时，都算作任务的阻塞时间。

• CLS：量化了在页面加载期间，视口中元素的移动程度。

前端常见异常

静态资源错误

在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

请求异常

• 请求响应状态码>=400
• 对于异步请求拉取的静态资源错误也可选择归纳到请求异常。
• 状态码0

请求成功率 = 请求成功数/(请求成功数+请求失败数)

JS错误

在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点。

白屏异常

此异常没有标准化的监听方法，所以更考验前端监控开发者的功底，通常可以通过判断DOM树的结构来粗略的判断白屏是否发生。

可能导致白屏发生的原因：

• 发生JS错误导致关键资源渲染失败。
• 请求异常或静态资源加载失败
• 长时间的JS线程繁忙阻塞渲染任务。

监控

性能指标监控

利用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据。

JS错误监控

利用window.addEventListener的error和unhandledrejection可以监控到全局的js错误。

静态资源错误监控

利用window.addEventListener的error可以监控到静态资源错误，注意要和js err区分

请求异常监控

通过hook xhr和fetch对象来监听请求时发生的错误。