前端监控

前端监控的目的

了解用户行为，以用户数据为基础，指导产品的优化方向

主要分为 3 大类：数据监控、性能监控、异常监控

数据监控

即常见的埋点统计，大多数情况下使用成熟的第三方统计，主要监控的数据包括

• PV/UV：page view、user view，UV 是在 PV 的基础上，根据用户信息不同做了去重操作
• 用户在每个页面停留的时间
• 用户来源
• 用户的页面操作行为

性能监控

主要监听前端项目在用户端展示的性能，监控这些数据能够更好地优化用户体验，常见的监控数据包括

• 首屏加载时间
• HTTP 接口的响应时间
• 静态资源的下载时间

错误监控

在某些特殊场景下，代码会出现异常报错，可能引发线上的故障，这部分的异常如果没有监控，则只能由用户主动告知，主要监控类型包括

• js 代码运行错误、语法错误等
• Ajax 请求错误
• 静态资源加载错误
• promise 异步函数错误

错误信息采集

需要关注一下几项信息

• what：发送了什么错误，语法错误、类型错误、数据错误、逻辑错误等
• when：什么时间发生
• who：哪个用户或哪一类用户发生
• where：哪个项目、哪些页面发生
• why：为什么会发生错误，在什么场景下发生
• how：怎么解决

错误捕获

通用错误

• try / catch 只能捕获代码常规运行错误

• window.onerror 只有返回 true 时，异常才不会向上抛出，否则控制台还是会显示 Uncaught Error

• window.addEventListener('error')（与 window.onerror 基本一样，但 window.onerror 不能捕获资源加载失败） 不同浏览器下返回的 Error 对象不一样，需要做兼容处理

  • 能捕获

    • 常规运行错误
    • 资源加载错误
    • 网络请求错误，但是无法判断 HTTP 状态

  • 不能捕获

    • promise
    • 语法错误

• window.addEventListener('unhandledrejection')

  • 用来捕获 Promise 未处理 reject ，但是返回的信息只有 promise 和 reason ，没有其他具体信息
  • 可能发生在 window 下，也可能发生在 worker 中
  • 如果要去掉控制台的异常显示，需要加上 event.preventDefault()

vue 错误

vue 会捕获到所有 vue 单文件组件或者 vue.extend 继承的代码，所以在 vue 里面出现的错误不会直接抛给 window.onerror，而是会被 vue 自身的 Vue.config.errorHandler 捕获

react 错误

react 16 提供了一个内置函数 componentDidCatch，使用它可以捕获到 react 组件内部抛出的错误信息

错误上报

img 上报

最推荐的一种方式，通过动态的创建一个 img 标签的方式，向服务器请求资源，把上报信息通过查询参数的方式带到请求的后面

优点

• 简单快捷
• 无跨域问题
• 无需等待服务器返回数据

缺点

• url 长度限制，无法传输过大的参数

Ajax 上报

优点

• 可携带大量参数

缺点

• 本身是一个请求，可能存在发生异常的情况
• 存在跨域问题
• 需等待服务器返回状态码才能确定该次上报成功