前端异常监控

110 阅读1分钟

前端异常错误原因分类

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

异常捕获

前端捕获异常分为全部捕获和单点捕获

  • 全部捕获:通过全局的接口,将捕获代码集中写在一个地方,可以利用的接口有
    • window.addEventListener('error')/window.addEventListener('unhandledrejection')/document.addEventListener('click')等
    • 框架级别的全局监听,如axios中使用interceptor进行拦截,vue中也有错误采集接口
    • 通过对全局函数进行封装,实现在调用函数时自动捕获异常
    • 对实例方法重写
  • 单点捕获:在业务代码中对单个代码块进行包裹,或在逻辑流程中打点,实现针对性的异常捕获
    • try...catch
    • 专门写一个函数来收集异常信息,在异常发生时,调用该函数