使用skywalking-client-js 监控vue2项目数据

skywalking-client-js

是skywalking监控系统的前端浏览器监控部分，最近公司再调研怎么接入这个前端监控，查阅众多博客和文章之后感觉没有达到我想要的效果，解读源码之后终于达到效果了，特此分享记入一下。

首先你要有一个skywalking的服务地址。

找后端帮你搭建，或者你自己看看skywalking的部署文章。

vue2.0项目接入skywalking-client-js

1.项目中添加skywalking-client-js包

npm install skywalking-client-js --save

2.在vue.config.js中配置请求代理，用来向skywalking服务发信息。

module.exports = {
  devServer:{
    proxy:{
      '/browser': {
        target:'http://skywalking服务的IP:12800',//这里是路由和报错报告的代理
        changeOrigin: true
      },
      '/v3':{
        target:'http://skywalking服务的IP:12800',
        changeOrigin: true//这里是追踪报告的代理
      }
    },
  },
}

3.在main.js中加入接入skywalking-client-js

//skywalking监控系统
import ClientMonitor from 'skywalking-client-js';
//注册skywalking
ClientMonitor.register({
    service: '',//应用名称	
    serviceVersion:'2.0.1',//应用版本号
    traceSDKInternal:true,//追踪sdk
    pagePath: location.href,//当前路由地址
    useFmp: true,
    vue:Vue,//vue实例
});

4.代码中接入skywalking-client-js
skywalking在监控浏览器的时候有3个单独要处理的部分：页面路由监控，报错监控，追踪监控。
1）页面路由监控：在vue的路由文件中添加

router.beforeEach((to, from, next) => {//我选择在beforeEach中上报，其实在afterEach也可以。
    //路由上报到skywalking
    ClientMonitor.setPerformance({
     pagePath: location.href,//当前路由地址。
     useFmp: true,
     vue:Vue,
	});//因为有些参数已经在ClientMonitor.register中注册过了所以不用填加了。
});

2.报错监控：报错监控是需要自己写代码上报的。
在main.js中监听报错：

// Vue 报错上报到skywalking。
Vue.config.errorHandler = (error) => {
    console.error(error);
  reportFrameErrors(error);
}
//监听ajax报错
window.addEventListener('error', error=>{
    console.log("error--->",error)
  reportFrameErrors(error);
}, true)；
//上报错误信息方法
function reportFrameErrors(error){
  ClientMonitor.reportFrameErrors({
    service: '',//应用名称	
    serviceVersion:'2.0.1',//应用版本号
    pagePath: location.href,
    vue:Vue,
  }, error);
}

3.追踪监控：
追踪这个功能是ClientMonitor.register这个方法里自己启动的，我们只需要配置好请求代理就好了。
请求代理代码：
同：2.在vue.config.js中配置请求代理。

效果：