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

前端监控

在浏览器中，从输入 URL 到页面展示，需要经过浏览器、网络和渲染的多个进程。前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。

为什么需要前端监控

在页面的访问和使用的过程中，有时会遇到一些问题，例如网页打开缓慢、网页卡顿、网页中的内容加载失败、网页白屏等等。面对这些问题，我们不能简单的归结于网络问题或者浏览器的兼容性不足，而是要通过对数据的分析来确定和解决问题。前端监控就是通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。页面的优化对于提升用户体验，增加用户量来说至关重要，因此配置前端监控是必须的。

前端监控的具体内容

前端监控的内容主要分为三大类，分别是性能指标、异常事件和用户行为，具体则是对页面卡顿、请求性能、请求成功率、首屏性能、渲染错误/白屏、请求错误、JS 错误、静态资源错误、PV/UV、自定义事件/打点等问题的监控。

性能指标

传统的性能指标

传统的性能指标主要依赖 Navigation Timing 或者NavigationTiming 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时,以加载速度来衡量性能。传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。

以用户为中心的性能指标

为了补充传统用户指标中对用户体验关注的不足，以用户为中心的性能指标被创建了，它们专注于用户视角下的浏览体验。将用户体验分为四个部分：

是否发生

FP (First Paint):首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。
FCP (First Contentful Paint)·首次有内容渲染的时间点。
SI(Speed Index):衡量页面可视区域加载速度，帮助检测页面的加载体验差异。

内容是否有用

FMP (First Meaningful Paint):首次绘制有意义内容的时间点。

内容是否可用

TTI (Time to lnteractive):测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面,用户体验就更好。

是否令人愉悦

CLS (Cumulative Layout Shift):量化了在页面加载期间，视口中元素的移动程度。

前端常见异常

静态资源错误

静态资源即加载页面所需的 html、css 和 js 等文件，以及其他各类多媒体文件，如图片、音频和视频等。
静态资源错误即在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

请求异常

http 请求状态码中，100-199为信息响应，200-299为成功响应，300-399为重定向消息，400-499为客户端错误响应，500-599为服务端错误响应。请求异常即请求状态码大于等于400，对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常。

JS 错误

在页面的运行过程中发生的 JS 错误会严重影响页面的运行和渲染，因此 JS 错误也是前端监控中的重点。

白屏异常

白屏异常没有浏览器提供的标准化监听方式来监控，因此对于白屏异常，我们可以通过判断 DOM 树的结构来粗略判断白屏是否发生。通常导致白屏的原因可能为发生Js 错误导致关键资源渲染失败，请求异常或静态资源加载失败，以及长时间的Js线程繁忙阻塞渲染任务。