集成skywalking

package.json

@@ -41,7 +41,7 @@
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
-    "element-ui": "2.15.14",
+    "element-ui": "2.15.13",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
@@ -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",
@@ -67,7 +68,7 @@
     "babel-eslint": "10.1.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "chalk": "4.1.0",
-    "compression-webpack-plugin": "6.1.2",
+    "compression-webpack-plugin": "5.0.2",
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",

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

@@ -5,12 +5,20 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import {getToken} from '@/utils/auth'
 import {isRelogin} from '@/utils/request'
+import Vue from 'vue'
 
 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)

src/utils/request.js

@@ -73,7 +73,6 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-  debugger
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息

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