这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
前端监控学习记录
什么是前端监控
前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生 的异常事件并上报到平台完成消费。
为什么需要前端监控
当页面出现问题的时候，前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。
前端监控了什么
01.性能指标——以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
| 用户体验 | 指标 |
|---|---|
| 发生了吗？ | FP( First Paint ),FCP(First Contentful Paint) |
| 内容有用吗？ | FMP(First Meaningful Paint), SI (Speed Index) , LCP(Largest Contentful) |
| 内容可用吗？ | TTI(Time to Interactive), TBT(Total Blocking Time) |
| 令人愉悦吗？ | FID(First Input Delay), CLS(Cumulative Lay) |
FP (First Paint): 首次染的时间点。 FP 时间点之前，用户看到的都是没有任何内容的白色屏幕。
FCP (First Contentful Paint) : 首次有内容染的时间点。
FMP (First Meaningful Paint) : 首次绘制有意义内容的时间点。
TTI (Time to Interactive) : 测量页面从开始加载到主要子资源完成渲染并能够快速、可靠地响应用户输入所需的时间。TTI 反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。
SI (Speed Index): 衡量页面可视区域加载速度，帮助检测页面的加载体验差异.
FID (First Input Delay) : 测量从用户第一次与页面交 (比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
LCP(Largest Contentful Paint) :最大的内容在可视区域内变得可见的时间点。最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素。LCP 优点: 1.容易理解 2.给出与FMP相似的结果 3.容易计算和上报。
TBT (Total Blocking Time): 量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。长任务是如果一个任务在主线程上运行超过 50 毫秒，那么它就是长任务。超过50ms 后的任务耗时，都算作任务的阻塞时间一个页面的TBT，是从 FCP 到 TTI 之间所有长任务的阻塞时间的总和。
CLS(Cumulative Layout Shift) : 量化了在页面加载期间，视口中元素的移动程度。
02.前端常见异常
静态资源错误
静态资源: 加载页面所需的 html、css 和js 等文件，以及其他各类多媒体文件，如图片、音频和视频等
静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
请求异常
| Http 请求状态码分类 | |
|---|---|
| 100-199 | 信息响应 |
| 200-299 | 成功响应 |
| 300-399 | 重定向响应 |
| 400-499 | 客户端错误响应 |
| 500-599 | 服务端错误响应 |
请求异常 = 请求响应状态码 >= 400，对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常。
请求成功率 = 请求成功数/(请求成功数 + 请求失败数)
js 错误
在页面运行时发生的 Js 错误会严重影响页面的正常渲染与交互，是前端监控的重点。
例如：
白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底。通常我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生。通常导致白屏发生的原因可能有如下：
- 发生 Js 错误导致关键资源渲染失败
- 请求异常或静态资源加载失败。
- 长时间的 Js 线程繁忙阻塞染任务
监控前端性能与异常
01.性能指标监控
利用 Performance 和 PerformanceObserver 可以监控到一些标准的渲染性能数据。
02.Js错误监控
利用 window.addEventListener 的 error 和 unhandledrejection 可以监控到全局的 js 错误。
03.静态资源错误监控
利用 window.addEventListener 的 error 事件可以监控到静态资源错误，注意要和 js error 进行区分。
04.请求异常监控
通过 hook xhr 和] fetch 对象来监听请求时发生的错误。
总结
在本次学习中，学习了前端监控的作用，比如监控性能和异常；学习了前端的常见异常，比如，静态资源异常、Js异常、白屏异常。同时也学习了如何去对性能指标进行监控，如何去解决一些常见的异常。
