前端监控完成

ui/lib/js/observer.js

@@ -1,38 +1,67 @@
-/**
- * 获取符合要求的请求
- * @param entries 监测的请求对象
- * @param type 设置满足条件的请求类型
- * @returns {PerformanceEntry[]}
- */
-const getRequests = (entries = performance.getEntriesByType('resource'), type = ['xmlhttprequest']) =>
-    entries?.filter(e => type.includes(e.initiatorType)) || []
+import http from "./request"
 
 /**
  * 观察者工具对象,用于前端接口监测
  */
+
 class Observer {
   constructor() {
-    this.saveLogs(getRequests())
-    this.ins = new PerformanceObserver((list, ob) => {
-      const watchLogs = getRequests(list.getEntriesByType("resource"))
-      this.saveLogs(watchLogs)
-    })
-    this.ins.observe({entryTypes: ["resource"]})
+    this.initXHRObserver()
   }
 
-  saveLogs(list = []) {
-    list.map(e => {
-      if (!/sockjs/.test(e.name)) {
-        const api = {
-          status: e.responseStatus,
-          path: e.name,
-          url: location.href,
-          nodeProcess: process.env.NODE_ENV,
-        }
-        console.log(api)
-        // http.post("/node/monitorApi/addOrUpdate", api)
+  static saveLog(item = {}) {
+    const api = {
+      method: item.method,
+      path: item.url,
+      url: location.href,
+      nodeProcess: process.env.NODE_ENV,
+      status: item.status,
+      code: item.response?.code,
+      error: item.response?.code != 0 ? item.response?.data : null,
+      device: navigator.userAgentData.platform
+    }
+    if (!/(sockjs-node|hot-update|monitorApi)/.test(api.path)) {
+      if (!!this.timer) {
+        clearTimeout(this.timer)
       }
-    })
+      this.pending = [this.pending, api].flat().filter(Boolean)
+      this.timer = setTimeout(() => {
+        http.post("/admin/apiForward", this.pending, {
+          withoutToken: true,
+          params: {url: "http://dvcp.cunwuyun.cn/ns/node/monitorApi/addOrUpdate"}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.pending = []
+          }
+        })
+      }, 5000)
+    }
+  }
+
+  initXHRObserver() {
+    const origin = XMLHttpRequest.prototype.open;
+    XMLHttpRequest.prototype.open = function (...args) {
+      let send = this.send;
+      let _this = this
+      let post_data = []
+      this.send = function (...data) {
+        post_data = data;
+        return send.apply(_this, data)
+      }
+      this.addEventListener("readystatechange", function () {
+        if (this.readyState === 4) {
+          // 请求后拦截
+          Observer.saveLog({
+            url: args[1],
+            status: this.status,
+            method: args[0],
+            data: post_data,
+            response: JSON.parse(this.response || null)
+          })
+        }
+      }, false)
+      return origin.apply(this, args)
+    }
   }
 }
 

ui/packages/basic/AiTable.vue

@@ -149,11 +149,11 @@ export default {
     checkAll: v => v.chooseList.length == v.tableData.length && v.tableData !== 0,
     page() {
       return {
-        ...this.pageConfig,
         current: this.current,
         size: this.size,
         total: this.total,
-        pagerCount: this.pagerCount
+        pagerCount: this.pagerCount,
+        ...this.pageConfig
       }
     },
   },

ui/packages/layout/AiCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="ai-card" :class="{panel}">
+  <section class="ai-card" :class="{panel,headerPanel}">
     <ai-bar v-if="!hideHeader" :title="title" v-bind="$attrs">
       <template #title>
         <slot name="title"></slot>
@@ -23,7 +23,8 @@ export default {
       type: String
     },
     hideTitle: Boolean,
-    panel: Boolean
+    panel: Boolean,
+    headerPanel: Boolean
   },
   computed: {
     hideHeader: v => v.hideTitle || v.panel
@@ -43,12 +44,16 @@ export default {
     padding: 12px 40px 22px;
   }
 
-  &.panel {
+  &.panel, &.headerPanel {
     margin-bottom: 0;
 
     .ai-card__body {
       padding: 12px 16px;
     }
+
+    .aibar {
+      margin-bottom: 0 !important;
+    }
   }
 
 

ui/packages/tools/AiEchart.vue

@@ -42,7 +42,7 @@ export default {
     }
   },
   computed: {
-    colors () {
+    colors() {
       if (this.theme === '0') {
         return ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc']
       }
@@ -113,7 +113,7 @@ export default {
       }
     },
 
-    theme () {
+    theme() {
       this.refresh()
     }
   },