集成skywalking

package.json

@@ -51,6 +51,7 @@
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
+    "skywalking-client-js": "^0.11.0",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",

src/main.js

@@ -63,6 +63,41 @@ Vue.use(plugins)
 Vue.use(VueMeta)
 DictData.install()
 
+//skywalking监控系统
+import ClientMonitor from 'skywalking-client-js';
+
+//注册skywalking
+ClientMonitor.register({
+  service: 'muyu::cloud-ui',//应用名称
+  serviceVersion:'2.0.1',//应用版本号
+  traceSDKInternal:true,//追踪sdk
+  pagePath: location.href,//当前路由地址
+  useFmp: true,
+  vue:Vue,//vue实例
+});
+// 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: 'muyu::cloud-ui',//应用名称
+    serviceVersion:'2.0.1',//应用版本号
+    pagePath: location.href,
+    vue:Vue,
+  }, error);
+}
+
+
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/permission.js

@@ -11,6 +11,13 @@ NProgress.configure({showSpinner: false})
 const whiteList = ['/login', '/register']
 
 router.beforeEach((to, from, next) => {
+  //路由上报到skywalking
+  //因为有些参数已经在ClientMonitor.register中注册过了所以不用填加了。
+  ClientMonitor.setPerformance({
+    pagePath: location.href,//当前路由地址。
+    useFmp: true,
+    vue:Vue,
+  });
   NProgress.start()
   if (getToken()) {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)

vue.config.js

@@ -40,6 +40,14 @@ module.exports = {
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
+      },
+      '/browser': {
+        target:'http://192.168.138.130:12800',//这里是路由和报错报告的代理
+        changeOrigin: true
+      },
+      '/v3':{
+        target:'http://192.168.138.130:12800',
+        changeOrigin: true//这里是追踪报告的代理
       }
     },
     disableHostCheck: true