这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
什么是前端监控
在浏览器中，从用户输入url地址到页面展示过程中，发生了许多事情。如下图所示（转自(超详细）从输入url到页面展示发生了什么？ - 掘金 (juejin.cn)）
前端监控可以尽可能收集这一过程以及用户后续操作产出的性能指标和发生的异常事件上报到后台，便于开发者更好的了解到用户的体验并对症下药进行优化。
为什么需要前端监控
前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析和归因。它的优点主要体现为以下三点：
- 可以提升用户体验
- 帮助开发者更快的发现发现异常、定位异常、解决异常
- 了解业务数据，通过和用户的交互，来确定用户真正想要的是什么，有了前端监控可以很高效的指导产品升级
前端监控常用性能指标
传统性能指标
主要依赖Navigation Timing或者Navigation Timing2，通过记录一个文档从发起请求到加载完毕的各个阶段的性能耗时，以加载速度来衡量性能
以用户为中心的性能指标
传统性能指标只专注于衡量技术细节，但在实际应用中却忽略了用户体验。
| 用户体验 | 衡量指标 |
|---|---|
| 发生了吗 | FP, FCP |
| 内容有用吗 | FMP, SI, LCP |
| 内容可用吗 | TTI, TBT |
| 令人愉悦吗 | FID, CLS |
前端常见异常
静态资源错误
在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
请求异常
| 响应状态码 | 含义 |
|---|---|
| 100-199 | 信息响应 |
| 200-299 | 成功响应 |
| 300-399 | 重定向消息 |
| 400-499 | 客户端重定向消息 |
| 500-599 | 服务端错误消息 |
当响应状态码大于等于400时，说明出现请求异常
js异常
在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点
白屏异常
没有标准化的监控方法，但造成该异常的可能原因如下
- 发生js错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的js线程繁忙阻塞渲染任务
封装监控sdk
window.addEventListener的error和unhandledrejection可以监控全局JS错误
window.addEventListener的error可以监控到静态资源错误
通过hookxhr和fetch对象来监听请求时发生的错误
