这是我参与「第五届青训营 」伴学笔记创作活动的第十一天。
本课堂重点内容：
- 为何要前端监控
- 常用性能指标
- 常见异常
- 监控性能与异常
为何要前端监控
前端监控就是尽可能的采集url到页面展示的过程以及后续用户交互中产出的性能指标与发生的异常事件并且上报到平台完成消费。
为何要前端监控呢？我们可能遇到以下问题：
- 打开网页慢
- 网页卡
- 图片都没加载
- 网页白花花一片
这些都可能对应以下问题：
- 页面某个关键资源渲染太慢
- 页面同步计算任务太重，阻塞渲染
- 客户端网络状态差，或上游服务节点异常
- 页面脚本执行失败，关键资源加载失败，请求失败等。
常用性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反映出用户所真正关心的是什么，这就是创建用户为中心的性能指标的原因，专注于用户视角下的浏览体验。
- FP：首次渲染的时间点。
- FCP：首次有内容渲染的时间点
- FMP：首次绘制有意义内容的时间点
- TTI：测量页面从开始加载到主要子资源完成渲染，并且能够快速，可靠的响应用户输入所需要的时间。
前端常见异常
- 静态资源错误
- 请求异常
- JS错误
- 白屏异常
- 静态资源，就是加载页面所需要的html,css,js等文件，以及其他的各类多媒体文件。
- 静态资源错误：拉取和加载静态资源过程发生了预期之外的错误，如网络异常。
监控前端性能与异常
- 可以用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据。
- 利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error进行区分。
