前端监控(2) | 青训营笔记

78 阅读2分钟

前端监控常见异常

这是我参与「第五届青训营」笔记创作活动的第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树的结构来粗略的判断白屏是否发生。

监听到白屏发生后,我们还需要对白屏的发生进行归因。

通常导致白屏发生的原因可能有如下几点:

  1. 发生JS错误导致关键资源渲染失败。
  2. 请求异常或静态资源加载失败。
  3. 长时间的JS线程繁忙阻塞渲染任务。