前端监控完成

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)
+    }
   }
 }