前端监控常见异常
这是我参与「第五届青训营」笔记创作活动的第14天.上一篇文章前端监控(1) | 青训营笔记 - 掘金 (juejin.cn)中了解了前端监控的常用指标, 今天主要学习前端监控中的常见异常.
异常指在页面允许时一些意料之外的报错,有些报错可能会导致页面资源加载错误等。
静态资源错误
静态资源
加载页面所需的html、css和js 等文件,以及其他各类多媒体文件,如图片、音频和视频等。
静态资源错误
在拉取和加载静态资源的过程中发生了预期之外的错误,如网络异常等,导致静态资源无法正常渲染到页面上。
请求异常
Http请求状态码分类
100 - 199 ---------->信息响应
200 - 299 ---------->成功响应
300 - 399 ---------> 重定向消息
400 - 499 ---------> 客户端错误响应
500 - 599 ---------> 服务端错误响应
请求异常 = 请求响应状态码 >= 400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
状态码为0,意味着请求无法执行。XMLHttpRequests被停止。
请求成功率 = 请求成功数/(请求成功数+请求失败数)
JS错误
在页面运行时发生的JS错误会严重影响页面的正常渲染与交互,是前端监控的重点。
一般都会出现JS错误,大多数情况下不影响页面执行,可能只是接触到了边缘情况。但有一些JS错误会导致白屏等。
白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到,而白屏异常没有标淮化的监听方法,所以更考验前端监控开发者的功底。
通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生。
监听到白屏发生后,我们还需要对白屏的发生进行归因。
通常导致白屏发生的原因可能有如下几点:
- 发生JS错误导致关键资源渲染失败。
- 请求异常或静态资源加载失败。
- 长时间的JS线程繁忙阻塞渲染任务。