前端监控

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

前端产生异常的原因主要分 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. 自定义触发条件

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

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