这是我参与「第五届青训营 」伴学笔记创作活动的第5天
本文主要介绍前端监控的四种常见异常、监控前端性能与异常、如何封装SDK。
前端监控
常见异常
静态资源错误
在拉取和加载静态资源的过程中，发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
- 静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。
请求异常
请求响应状态码>=400，或者是通过异步请求拉取的静态资源错误。
- Http请求状态码分类
- 100-199 ————> 信息响应
- 200-299 ————> 成功响应
- 300-399 ————> 重定向消息
- 400-499 ————> 客户端错误响应
- 500-599 ————> 服务端错误响应
- 0 ————> 请求无法执行（无法发送）
- 请求成功率=请求成功数/（请求成功数+请求失败数）
JS错误
- 在页面运行时，发生的JS错误，会严重影响页面的正常渲染与交互。
白屏异常
- 前面三类异常可通过浏览器提供的标准化方法来监听到，而白屏异常通常可通过判断DOM树的结构来粗略判断白屏是否发生。
- 导致白屏发生的原因可能有：
- 发生JS错误，导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的JS线程繁忙，阻塞渲染任务
监控性能
- 性能指标监控
- 利用Performance接口和PerformanceObserver，可监控到标准的渲染性能指标。
- Performance：可获取到当前页面中与性能相关的信息，该类型的对象可通过调用只读属性Window.performance来获得。
- PerformanceObserver：用于监测性能度量事件，在浏览器的性能时间轴记录新的performance entry时将会被通知。
- 封装monitor
- 起名字
- 监听能力
- 主动开启
- 上报能力
监控异常
- JS错误监控
- 利用window.addEventListener的error和unhandledrejection，可监控到全局的JS错误。其中，会用到promise对象。
- 静态资源错误监控
- 利用window.addEventListener的error事件可监控到静态资源错误，注意要和JS error进行区分。
- Window:error event ：当资源加载失败或无法使用时，会在Window对象触发error事件。
- 请求异常监控
- 通过hook xhr和fetch对象来监听请求时发生的错误。除了关注请求错误，还需关注慢请求，在了解请求各阶段耗时中，找出所有慢请求。
封装一个通用的SDK
流程
graph TD
数据采集 --> 组装上报 --> 清洗存储 --> 数据消费
SDK主要完成数据采集和组装上报这两步，后两步清洗存储和数据消费则需要后端服务和平台的支持
数据上报
-
封装一个用于给监控器上报已收集数据的上报函数
function createXhrMonitor(report:({name:string,data:any})=>void）实现report，需要一个专为前端监控打造的请求函数Navigator.sendBeacon()，用于通过HTTP POST 将少量数据异步传输到Web服务器。
按需加载监控能力
- 将已实现的监控器按需加载到SDK中，从而封装成一个完整的SDK。
总结
分析前端监控异常，找出其中的原因，能够有效解决问题。学习如何封装好一个通用的SDK，实现基础功能，再加以优化，就可实现更多的功能。
