这是我参与「第五届青训营 」伴学笔记创作活动的第 19 天
一、前端监控
1、什么是前端监控：
前端监控就是尽可能地采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台进行消费。
2、为什么需要前端监控：
- 用户视角在使用时会遇到许多问题，比如加载页面慢，网页卡，图片裂开等问题，会很影响用户体验
- 开发者角度应该通过前端监控对页面数据的采集和上报，来迅速的对质量差的页面进行分析和归因
- 把页面性能做好了，用户体验良好才能帮助产品越走越远
3、前端监控监控了什么：
- 性能指标
- 异常事件
- 用户行为
二、前端监控的性能指标
1、性能指标主要记录一个文档从发起请求到加载完毕的各阶段性能耗时，以加载速度来衡量性能。
2、以用户为中心的性能指标：
- 发生了吗？ --FP：次渲染的时间点、FCP：首次有内容渲染的时间点
- 内容有用吗？ --FMP：首次绘制有内容的时间点、SI：衡量页面可视区域加载速度，帮助检测页面的加载体验差异、LCP：最大的内容在可视区域内变得可见的时间点
- 内容可用吗？ --TTI：测量页面从开始加载到主要子资源完成渲染并能够快速、可靠的响应用户输入所需的时间。TTI值越小用户体验越好、TBT：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久
- 令人愉悦吗？ --FID、CLS：量化了在页面加载期间，视口中元素的移动程度
三、前端监控常见异常
- 静态资源错误：拉取和加载静态资源的过程中发生了预期之外的错误，比如网络异常等，导致静态资源无法渲染到页面上
- 请求异常：请求响应状态码>=400
- JS错误
- 白屏监控：没有标准化的监听方法
