vue接入rtsp监控 vue监控平台

转载

mob64ca14038b36 2024-02-26 11:57:09

文章标签 vue接入rtsp监控友盟钉钉机器人报警错误信息 Vue 文章分类 运维

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

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

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

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

<script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=xxxxxxx&web_id=xxxxxxx"></script>

第一种：流量监控，查看每日的网站访问量，日活等流量数据，在 app.vue根组件

<script>
// 重新定义 _czc ,因为通过script引入了友盟统计，但是可能存在加载问题，导致友盟的全局属性没有挂载到Window上，所以做了判断
let _czc = window._czc || '';

export default {
  name: 'app',
  components: {},
  data() {
    return {
    };
  },
  watch: {
    //监控 路由的变化 ，统计路由的
    $route() {
      // 判断 _czc 有没有挂载，且当前环境是开发还是生产，测试的时候，使用开发环境，上线之前记得改成生产，避免消息发送错误
      if (_czc && process.env.NODE_ENV == development) {
        // 如果使用_trackPageview改写了已有页面的URL，建议在CNZZ的JS统计代码执行前先调用_setAutoPageview，将该页面的自动PV统计关闭，防止页面的流量被统计双倍。
        _czc.push(['_trackPageview', contentUrl, refererUrl]);

        // 获取当前页面的信息
        let location = window.location;

        // 代表当前路由地址
        let contentUrl = location.pathname + location.hash;

        // 代表当前页面的母页面，不填，按母页面的来路计算，但是实际上是取不到母页面的
        let refererUrl = '/';

        // 发送统计事件，
        _czc.push(['_trackPageview', contentUrl, refererUrl]);
      }
    },
  },
};
</script>

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

vue接入rtsp监控 vue监控平台_友盟

vue接入rtsp监控 vue监控平台_Vue_02

第二种：事件监控

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

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

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

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

vue接入rtsp监控 vue监控平台_vue接入rtsp监控_03

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

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);
  },
);

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

vue接入rtsp监控 vue监控平台_Vue_04