这是我参与「第五届青训营」伴学笔记创作活动的第 16 天
本堂课重点内容
本堂课重点讲述了前端监控的意义、前端监控之性能指标和异常事件，以及如何封装一个通用的sdk方法。
什么是前端监控
注意看：在浏览器里，从输入URL到页面展示，这中间发生了什么？
- 前端监控就是尽可能的采集这一过程及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。
- 前端监控的意义：前端监控通过对页面数据的采集和上报，帮助开发者快速对差质量页面进行分析与归因
| 用户视角 | 开发者不负责任错误归因 | 前端监控 |
|---|---|---|
| 页面加载慢 | 用户浏览器为XP+IE，建议重装系统 | 页面某个关键资源渲染慢 |
| 页面卡顿（交互卡顿） | 电脑配置不行，建议升级为i9+4090 | 页面同步计算任务重，阻塞渲染 |
| 图片无法显示（资源加载失败） | 网络状态差 | 客户端网络状态差或者上游服务节点异常 |
| 页面白屏 | 偶发事故 | 页面脚本执行失败、关键资源加载失败、请求失败... |
- 前端监控 ==> 性能指标、异常事件、用户行为
前端监控之常用性能指标
以用户为中心，专注于用户视角下的浏览器体验
前端监控之异常事件
- 异常：在页面运行时出现的报错
- 类型
- 静态资源错误：html、css、js等文件以及多媒体文件等
- 请求异常：http状态码 >=400，状态码为0代表请求无法执行
- JS错误：是前端监控的重点
- 白屏异常：无法通过浏览器提供的方法来监听到，可以通过DOM树来粗略判断白屏是否发生
- 白屏可能归因
- 发生Js错误导致关键资源渲染失败。
- 请求异常或静态资源加载失败。
- 长时间的Js线程繁忙阻塞渲染任务。
- 白屏可能归因
监控前端性能与异常
- 性能指标监控
- 原理：利用Performance和PerformanceObserver（性能监测对象）监控一些标准的渲染性能数据
- 封装一个monitor监听器方法：取名区分（唯一标识）、监听能力、主动开启、上报监听到的信息
- JS错误监控
- 原理：利用EventTarget.addEventListener()监听类型为error的事件和unhandledrejection
3. 静态资源错误监控
- 原理：利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error进行区分；静态资源只能在捕获阶段捕获
4. 请求异常监控
- 通过hook xhr和fetch对象来监听请求时发生的错误。
封装一个通用的sdk
- 前端监控流程：数据采集 → 组装上报 →清洗存储 →数据消费
- sdk主要完成前两步，后两步需要后端服务和平台支持
- 数据上报：Navigator.sendBeacon()
个人总结
前端监控可以帮助我们快速查找错误、优化页面，提高用户的体验满意度，是非常有意义的一项技术。
