这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
03概述:前端监控之前端常见异常
静态资源错误
静态资源:加载页面所需的HTML,CSS和JS等文件，以及其他各类多媒体文件，如图片，音频和视频等
静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
请求异常
Http请求状态码分类
- 100-199---->信息响应
- 200-299---->成功响应
- 300-399---->重定向消息
- 400-499---->客户端错误响应
- 500-599---->服务端错误响应
请求异常=请求响应状态码>=400
对于通过异步请求拉取的静态资源错误也可以选择归纳到请求异常
状态码0是什么?
XMLHttpRequests被停止
如果你的XMLHttpRequests收到 status=0 和statusText=null的返回,这意味着请求无法执行,就是无法发送一个可能导致的原因是当XMLHttpRequests origin (创建的XMLHttpRequests)改变时,XMLHttpRequests执行open(),这种情况是可能发生的,举个例子,我们在一个窗口的 onunload事件中关闭XMLHttpRequests,但实际上在即将关闭窗口时,之前创建的XMLHttpRequests仍然在那里,最后当这个窗口失去焦点,另一个窗口获得焦点时,他还是发送了请求(也就是 open()),最有效的避免这个问题的方法是为新窗口的activate事件设置一个监听器,一旦窗口关闭,他的 unload (eb-US)事件便触发
请求成功率 = 请求成功数 / (请求成功数 + 请求失败数)
JS错误
在页面运行时发生的JS错误会严重影响页面的正常渲染与交互,是前端监控的重点
白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到,而白屏异常没有标准化的监听方法,所以更考验前端监控开发者的功底
通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生
监听到白屏发生后,我们还需要对白屏的发生进行归因
通常导致白屏发生的原因可能有如下几点
- 发生JS错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的JS线程繁忙阻塞渲染任务
04小试牛刀:监控前端性能与异常
性能指标监控
利用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据
JS错误监控
利用window.addEventListener的error和unhandledrejection可以监控到全局的JS错误
静态资源错误监控
利用window.addEventListener的error事件可以监控到静态资源错误,注意要和js error进行区分
请求异常监控
通过hook xhr和fetch对象来监听请求时发生的错误
05渐入佳境:封装一个通用的sdk
前端监控流程概述
sdk主要完成前两步,后两步需要后端服务和平台的支持,其中前面的章节已经完成了数据采集以及简单的数据组装
数据采集->组装上报->清洗存储->数据消费
临门一脚:数据上报
封装一个用于给监控器上报已收集数据的上报函数
function createXhrMonitor(report:({name:string,data:any}) => void) {}
专为前端监控打造的请求函数
Navigator.senBeacon()
按需加载监控能力
下面我们需要将之前实现的监控器按需加载到sdk中,从而封装成一个完整的sdk
06课后探索:让你的sdk更健壮
更多性能指标计算算法
关注请求性能
更安全和稳定的Hook函数
在实现请求错误监控时,我们实现了一个很简易的hook函数,这个hook函数缺少了很关键的unhook能力,即将被hook的函数还原的能力
