这是我参与「第五届青训营 」笔记创作活动的第11天
前端监控是什么
打开好慢——页面某个关键资源渲染太慢
交互卡顿——页面同步计算任务太重，阻塞渲染
资源加载失败——客户端网络状态差，或上游服务节点异常
页面白屏——页面脚本执行失败，关键资源加载失败，请求失败等
前端监控通过对页面数据的采集上报，来帮助开发者对质量差的页面进行归因。
监控了什么
性能指标、异常事件、用户行为
性能指标
- 传统的性能指标主要依赖Navigation Timing 和 Navigation Timing 2。
- 以用户为中心的性能指标
传统性能指标专注于容易衡量的技术细节，用户看不懂也不关心。
FCP（First Contentful Paint）：首次有内容渲染的时间点。通常与用户无关
FMP（First Meaningful Paint）：首次绘制有意义内容的时间点。非标准化且难以在浏览器之间实现统一
TTI（Time to Interactive）：测量页面从开始到加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
SI（Speed Index）：衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
LCP（Largest Contentful Paint）：最大的内容在可视区域内变得可见的时间点。
TBT（Total Blocking Time）：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。长任务：一个任务在主线程上运行超过50ms，超过50ms之后的任务耗时，都算任务的阻塞时间。一个页面的TBT，是FCP到TTI之间所有长任务的阻塞时间的总和。
CLS（Cumulative Layout Shift）：量化了在页面加载期间，视口中元素的移动程度。
常见异常
静态资源错误
静态资源：加载页面所需的 html、css 和 js 等文件，以及其他各类多媒体文件，如图片、音频和视频等。
静态资源错误: 在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
Http 请求状态码分类
100 - 199信息响应
200 - 299成功响应
300 - 399重定向消息
400 - 499客户端错误响应
500 - 599服务端错误响应
请求异常 =请求响应状态码 >= 400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常（fetch发生的错误）
- 状态码0
- 访问了一个本地文件，xhr去模拟了网络请求，但是并没有真的去访问远程服务器，状态码为0
- 访问了远程资源，但是跨域了，状态码也是0 请求成功率 = 请求成功数 / （成功数 + 失败数）
Js错误
在页面运行时发生的Js错误会严重影响页面的正常渲染和交互，是前端监控的重点。
白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底。
通常我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生。
监听到白屏发生后，我们还需要对白屏的发生进行归因，通常导致白屏发生的原因可能有如下几点：
- 发生 Js 错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的 Js 线程繁忙阻塞渲染任务
前端监控实战
性能指标监控
FP FCP LCP FID
利用浏览器提供的 Performance 与 Performance observer 对象可以监控到一些标准的渲染性能数据。
先看Performance对象，再看Performance Observer。
Js错误监控
利用window.addEventListener的error和unhandledrejection可以监控全局的js错误。
静态资源错误监控
利用window.addEventListener的error和unhandledrejection可以监控，注意区分js错误。
请求错误监控
hook
