先提交一下前端监控机器人--观察者

project/oms/apps/sentry/AppApiMonitor/AppApiMonitor.vue

@@ -4,13 +4,21 @@
       <ai-title slot="title" :title="$options.label" isShowBottomBorder/>
       <template #blank>
         <el-row type="flex">
-          <ai-card title="接口异常分布"></ai-card>
+          <ai-card title="接口异常分布">
+            <ai-echart/>
+          </ai-card>
           <ai-card class="fill mar-l16" title="接口异常TOP10"></ai-card>
         </el-row>
-        <ai-card title="所有异常接口">
+        <ai-card panel>
-          <ai-table :tableData="tableData" :colConfigs="columns">
+          <ai-search-bar>
-
+            <template #left>
-          </ai-table>
+              <ai-select placeholder="状态码" v-model="search.status" :selectList="networkStatus" @change="page.current=1,getTableData()"/>
+            </template>
+            <template #right>
+              <el-input v-model="search.name" size="small" placeholder="搜索接口" clearable @change="page.current=1,getTableData()"/>
+            </template>
+          </ai-search-bar>
+          <ai-table :tableData="tableData" :colConfigs="columns" :pageConfig.sync="page" @getList="getTableData" :dict="dict"/>
         </ai-card>
       </template>
     </ai-list>
@@ -19,26 +27,57 @@
 </template>
 
 <script>
+import AiSearchBar from "dui/packages/layout/AiSearchBar";
+import AiSelect from "dui/packages/basic/AiSelect";
+
 export default {
   name: "AppApiMonitor",
+  components: {AiSelect, AiSearchBar},
   label: "接口监控",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
   data() {
     return {
       tableData: [],
+      page: {current: 1},
+      search: {},
       columns: [
         {label: "状态码", prop: "status"},
-        {label: "接口地址", prop: "status"},
+        {label: "接口地址", prop: "path"},
-        {label: "错误信息", prop: "status"},
+        {label: "错误信息", prop: "error"},
-        {label: "终端", prop: "status"},
+        {label: "终端", prop: "device"},
-        {label: "页面", prop: "status"},
+        {label: "页面", prop: "url"},
-        {label: "用户", prop: "status"},
+        {label: "用户", prop: "userName"},
-        {label: "环境", prop: "status"},
+        {label: "环境", prop: "nodeProcess"},
-        {label: "事件", prop: "status"},
+        {label: "创建时间", prop: "createTime"},
+      ],
+      networkStatus: [
+        {dictValue: 200, dictName: '200:成功'},
+        {dictValue: 500, dictName: '500:接口失败'},
+        {dictValue: 401, dictName: '401:token失效'},
+        {dictValue: 403, dictName: '403:未授权访问'},
+        {dictValue: 404, dictName: '404:无法找到接口'},
+        {dictValue: 504, dictName: '504:接口超时'},
       ]
     }
   },
-  methods: {},
+  methods: {
+    getTableData() {
+      this.instance.post("/node/monitorApi/list", null, {
+        params: {...this.page, ...this.search}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    }
+  },
   created() {
+    this.getTableData()
   }
 }
 </script>

ui/lib/js/observer.js

@@ -0,0 +1,39 @@
+/**
+ * 获取符合要求的请求
+ * @param entries 监测的请求对象
+ * @param type 设置满足条件的请求类型
+ * @returns {PerformanceEntry[]}
+ */
+const getRequests = (entries = performance.getEntriesByType('resource'), type = ['xmlhttprequest']) =>
+    entries?.filter(e => type.includes(e.initiatorType)) || []
+
+/**
+ * 观察者工具对象,用于前端接口监测
+ */
+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"]})
+  }
+
+  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)
+      }
+    })
+  }
+}
+
+export default Observer