2022-09-29质量保障00
请注意,本文编写于 570 天前,最后修改于 570 天前,其中某些信息可能已经过时。

前端监控

前端监控包括行为监控、异常监控、性能监控。

前端产生异常的原因主要分 5 类:

  • 逻辑错误
    • 业务逻辑判断条件错误
    • 事件绑定顺序错误
    • 调用栈时序错误
    • 错误的操作 js 对象
  • 数据类型错误
    • 将 null 视作对象读取 property
    • 将 undefined 视作数组进行遍历
    • 将字符串形式的数字直接用于加运算
    • 函数参数未传
  • 语法句法错误
  • 网络错误
    • 请求过慢
    • 服务端未返回数据但仍 200,前端按正常进行数据遍历
    • 提交数据时网络中断
    • 服务端 500 错误时前端未做任何错误处理
  • 系统错误
    • 内存不够用
    • 磁盘塞满
    • 壳不支持 API
    • 不兼容

异常采集

采集内容

当异常出现的时候,我们需要知道异常的具体信息,根据异常的具体信息来决定采用什么样的解决方案。在采集异常信息时,可以遵循 4W 原则:

WHO did WHAT and get WHICH exception in WHICH environment?

a. 用户信息

出现异常时该用户的信息,例如该用户在当前时刻的状态、权限等,以及需要区分用户可多终端登录时,异常对应的是哪一个终端。

b. 行为信息

用户进行什么操作时产生了异常:所在的界面路径;执行了什么操作;操作时使用了哪些数据;当时的 API 吐了什么数据给客户端;如果是提交操作,提交了什么数据;上一个路径;上一个行为日志记录 ID 等。

c. 异常信息

产生异常的代码信息:用户操作的 DOM 元素节点;异常级别;异常类型;异常描述;代码 stack 信息等。

d. 环境信息

网络环境;设备型号和标识码;操作系统版本;客户端版本;API 接口版本等。

异常捕获

前端捕获异常分为全局捕获和单点捕获。全局捕获代码集中,易于管理;单点捕获作为补充,对某些特殊情况进行捕获,但分散,不利于管理。

全局捕获 (依赖工具自动捕获)

通过全局的接口,将捕获代码集中写在一个地方,可以利用的接口有:

window.addEventListener(‘error’) / window.addEventListener(“unhandledrejection”) / document.addEventListener(‘click’) 等 框架级别的全局监听,例如 aixos 中使用 interceptor 进行拦截,vue、react 都有自己的错误采集接口 通过对全局函数进行封装包裹,实现在在调用该函数时自动捕获异常 对实例方法重写(Patch),在原有功能基础上包裹一层,例如对 console.error 进行重写,在使用方法不变的情况下也可以异常捕获

单点捕获(主动上报)

在业务代码中对单个代码块进行包裹,或在逻辑流程中打点,实现有针对性的异常捕获:

try…catch 专门写一个函数来收集异常信息,在异常发生时,调用该函数 专门写一个函数来包裹其他函数,得到一个新函数,该新函数运行结果和原函数一模一样,只是在发生异常时可以捕获异常

监控与通知

对异常进行统计和分析只是基础,而在发现异常时可以推送和告警,甚至做到自动处理,才是一个异常监控系统应该具备的能力。

自定义触发条件的告警

a. 监控实现

当日志信息进入接入层时,就可以触发监控逻辑。当日志信息中存在较为高级别的异常时,也可以立即出发告警。告警消息队列和日志入库队列可以分开来管理,实现并行。

对入库日志信息进行统计,对异常信息进行告警。对监控异常进行响应。所谓监控异常,是指:有规律的异常一般而言都比较让人放心,比较麻烦的是突然之间的异常。例如在某一时段突然频繁接收到 D 级异常,虽然 D 级异常是不紧急一般重要,但是当监控本身发生异常时,就要提高警惕。

b. 自定义触发条件

除了系统开发时配置的默认告警条件,还应该提供给日志管理员可配置的自定义触发条件,如:

  • 日志内含有什么内容时
  • 日志统计达到什么度、量时
  • 向符合什么条件的用户告警

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!