前端监控--vue项目中使用友盟统计监控

矫情吗；* 2022-12-20 11:26 171阅读 0赞

在项目的使用过程中，不可避免的会出现各种奇奇怪怪的报错，有的可能会导致项目程序崩溃无法运行，但是我们作为开发人员是不会立刻知道这种突发情况的，所以我们需要搜集程序的报错信息，及时解决错误，提高项目的稳定性。

友盟就是这样的一款第三方监控平台，具体使用方法我就不多赘述了，官方文档里面写的比较清楚，而且使用起来并不复杂。

友盟既可以做项目的流量监控，也可以做项目的稳定监控，下面我就来说一说这两种情况在Vue项目中的使用情况，其实react也应该是类似的，因为都是类似的思想以及相同的模式。

前置条件：通过在项目中的index.html文件中添加当前站点的脚本文件

第一种：流量监控，查看每日的网站访问量，日活等流量数据，在  **app.vue根组件**  中监听路由的变化，然后向 友盟 发送统计事件，例如

事件发送成功之后，在友盟中能看到具体数据：因为是我本地ip访问的，所以只有我一个用户，一个独立访客

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 1][]

第二种：事件监控

如果，页面报错，我们需要在全局下捕获这个错误，然后上报给友盟。

Vue项目全局下收集错误，通常都是在main.js 入口文件内部监听全局错误

Vue.config.errorHandler = function (err, vm, info) {
      // err 就是错误信息
      // vm相当于this实例
      // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
      // 只在 2.2.0+ 可用
    }

这个就是console出来的信息 ， 但是能上报的信息只有第一句，后面的错误映射是不会被上报的

![20201112153016871.png][]

区分环境上报，本地开发的时候是不上报的，也可以和之前的做同样处理，通过环境变量进行拦截

Vue.config.errorHandler = function (err, vm, info) {
      // err 就是错误信息
      // vm相当于this实例
      // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
      // 只在 2.2.0+ 可用
    
      // 区分环境上报
      if (_czc && process.env.NODE_ENV == 'development') {
        
        // 这里是拦截 业务代码错误，对于接口返回的错误需要在封装的请求做全局拦截
        _czc.push(["_trackEvent", "JS错误", "异常抛出", errMsg, 1]);
      }
    }

上面说的是拦截js代码错误，但是没有对于接口错误进行拦截，其实在vue项目中，我们一般都会对请求做一个全局封装处理，axois已经暴露了api可以调用， **axios.interceptors.response.use（）**这个就是用来拦截接口返回的api，我们可以在这里做一个拦截上报

io.interceptors.response.use(
      response => {
        
        // 如果http状态码为 200 则代表请求成功，
        if (response.status == 200) {
          return response
        } else {
        
          //  如果状态码 不是 200 ，那就代表接口请求除了问题，下面的error就更不用说了
          let errMsg = `
          info: ${response.data.message}
          --apName : 数据中台
          --apiUrl: ${response.data.path}
          --browser：${detectOS()}-${digits()} ${getBrowserInfo()}
          --time: ${format('yyyy-MM-dd hh:mm:ss')}
          `
    
          // 区分上报环境
          if (_czc && process.env.NODE_ENV == 'development') {
    
            //错误捕获上报到友盟
            console.log(_czc, '_czc')
            let _czcMsg = response.request.responseURL + response.data.message
    
            _czc.push(["_trackEvent", "接口错误", "接口报错", _czcMsg, 2]);
    
            
          }
        }
    
      },
      error => {
        console.log(error, 'error')
        
        // 上报代码一样，可以做一个封装
    
        // Do something with response error
        return Promise.reject(error);
      },
    );

上报之后，效果就是这样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 2][]

上面的折线图表示的是错误事件的状态，下面的错误事件列表则是每条错误的详细信息，鼠标移到列表每一项的名称上可以查看完整错误信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 4][]

友盟还可以做excle文件导出，把所有的错误信息通过分类，统一收集，然后统一导出，更直观全面的分析系统的稳定性。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201112103608588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 1]: /images/20221120/1e76ea2b5df341b8ab84f14f11277b8c.png
[20201112153016871.png]: /images/20221120/a3c0a0e0bb014f81806375bbef57c547.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 2]: /images/20221120/76aaa5c537aa486e9783add238d2bd4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201113104529887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201113104552988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw,size_16,color_FFFFFF,t_70