错误日志

2021-04-20 22:44:41 +08:00 · 2021-04-20 22:44:41 +08:00 · 6ab137122a
commit 6ab137122a
parent 15cd0e20da
6 changed files with 107 additions and 78 deletions
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@ -1,18 +1,14 @@
 <template>
-  <div v-if="errorLogs.length > 0">
-    <el-badge
-      :is-dot="true"
-      style="line-height: 25px;margin-top: -5px;"
-      @click="dialogTableVisible = true"
-    >
+  <div v-if="errorLogs.length > 0" class="errLog-container">
+    <el-badge :is-dot="true" @click="dialogTableVisible = true">
      <el-button style="padding: 8px 10px;" size="small" type="danger">
        <svg-icon name="bug" />
      </el-button>
    </el-badge>

-    <el-dialog v-model="dialogTableVisible" width="80%">
+    <el-dialog v-model="dialogTableVisible" width="80%" append-to-body>
      <template #title>
-        <span style="padding-right: 10px;">Error Log</span>
+        <span style="padding-right: 10px;">错误日志</span>
        <el-button
          size="mini"
          type="primary"
@ -23,36 +19,43 @@
      </template>
      <el-table :data="errorLogs" border>
        <el-table-column label="Message">
-          <template v-slot="{ row }">
-            <div>
-              <span class="message-title">Msg:</span>
-              <el-tag type="danger">
-                {{ row.err.message }}
-              </el-tag>
-            </div>
-            <br />
-            <div>
-              <span class="message-title" style="padding-right: 10px;"
-                >Info:
-              </span>
-              <el-tag type="warning">
-                <!-- {{ row.vm.$vnode.tag }} error in {{ row.info }} -->
-              </el-tag>
-            </div>
-            <br />
-            <div>
+          <template #default="{ row }">
+            <div style="margin-bottom:10px">
              <span class="message-title" style="padding-right: 16px;"
-                >Url:
+                >页面:
              </span>
              <el-tag type="success">
                {{ row.url }}
              </el-tag>
            </div>
+
+            <div style="margin-bottom:10px">
+              <span class="message-title">事件源:</span>
+              <el-tag type="primary">
+                {{ row.info && row.info }}
+              </el-tag>
+            </div>
+
+            <div style="margin-bottom:10px">
+              <span class="message-title">错误提示:</span>
+              <el-tag type="danger">
+                {{ row.err && row.err.message }}
+              </el-tag>
+            </div>
+
+            <div v-if="row.err && row.err.config">
+              <span class="message-title" style="padding-right: 16px;"
+                >接口地址:
+              </span>
+              <el-tag type="info">
+                {{ row.err && row.err.config && row.err.config.url }}
+              </el-tag>
+            </div>
          </template>
        </el-table-column>
        <el-table-column label="Stack">
-          <template v-slot="scope">
-            {{ scope.row.err.stack }}
+          <template #default="{ row }">
+            {{ row.err && row.err.stack }}
          </template>
        </el-table-column>
      </el-table>
@ -61,32 +64,33 @@
 </template>

 <script>
-export default {
+import { defineComponent, ref, computed } from 'vue'
+import { useStore } from 'vuex'
+
+export default defineComponent({
  name: 'ErrorLog',
-  data() {
+  setup() {
+    const dialogTableVisible = ref(false)
+    const store = useStore()
+    const errorLogs = computed(() => store.state.errorLog.logs)
+    const clearAll = () => {
+      dialogTableVisible.value = false
+      store.dispatch('errorLog/clearErrorLog')
+    }
+
    return {
-      dialogTableVisible: false,
+      dialogTableVisible,
+      errorLogs,
+      clearAll,
    }
  },
-  computed: {
-    errorLogs() {
-      const logs = this.$store.state.errorLog.logs
-      logs.forEach(log => {
-        console.log(11, log.vm)
-      })
-      return logs
-    },
-  },
-  methods: {
-    clearAll() {
-      this.dialogTableVisible = false
-      this.$store.dispatch('errorLog/clearErrorLog')
-    },
-  },
-}
+})
 </script>

 <style scoped>
+.errLog-container {
+  margin-right: 10px;
+}
 .message-title {
  font-size: 16px;
  color: #333;
--- a/src/error-log.js
+++ b/src/error-log.js
@ -1,17 +1,20 @@
 import { nextTick } from 'vue'
 import store from '@/store'

-export default app => {
-  // 判断环境，决定是否需要监控错误，一般生产环境才需要进行错误上报
-  // import.meta.env.DEV代表开发环境
-  // import.meta.env.PROD代表生产环境
+// 判断环境，决定是否开启错误监控
+//   - import.meta.env.DEV 布尔值，代表开发环境
+//   - import.meta.env.PROD 布尔值，代表生产环境

-  // if (import.meta.env.PROD) {
+// const flag =  import.meta.env.PROD  // 生产环境才进行错误监控
+const flag = true // 为了演示，默认开启错误监控。如果你的项目不需要错误监控，请设为false
+
+export default app => {
+  if (flag) {
    app.config.errorHandler = function(err, vm, info) {
      nextTick(() => {
        store.dispatch('errorLog/addErrorLog', {
          err,
-        vm,
+          // vm, // 这里不保存vm，否则渲染错误日志的时候控制台会有警告
          info,
          url: window.location.href,
          id: Date.now(),
@ -19,5 +22,5 @@ export default app => {
        console.error(err, info)
      })
    }
-  // }
+  }
 }
--- a/src/layout/components/Topbar/index.vue
+++ b/src/layout/components/Topbar/index.vue
@ -6,7 +6,7 @@
      <breadcrumbs />
    </div>
    <div class="action">
-      <error-log class="errLog-container right-menu-item hover-effect" />
+      <error-log />
      <userinfo />
    </div>
  </div>
@ -49,6 +49,10 @@ export default defineComponent({
    align-items: center;
    overflow: hidden;
  }
+  .action {
+    display: flex;
+    align-items: center;
+  }
 }
 .mobile {
  padding-right: 0;
--- a/src/router/modules/test.js
+++ b/src/router/modules/test.js
@ -78,15 +78,6 @@ export default [
          noCache: true, // 不缓存页面
        },
      },
-      {
-        path: 'error-log',
-        name: 'test-error-log',
-        component: ErrorLog,
-        meta: {
-          title: '测试错误日志',
-          roles: ['admin', 'visitor'],
-        },
-      },
      {
        path: 'nest',
        name: 'nest',
@ -117,6 +108,15 @@ export default [
          },
        ],
      },
+      {
+        path: 'error-log',
+        name: 'test-error-log',
+        component: ErrorLog,
+        meta: {
+          title: '测试错误日志',
+          roles: ['admin', 'visitor'],
+        },
+      },
    ],
  },
 ]
--- a/src/store/modules/errorLog.js
+++ b/src/store/modules/errorLog.js
@ -13,6 +13,10 @@ const mutations = {

 const actions = {
  addErrorLog({ commit }, log) {
+    // 可以根据需要将错误上报给服务器
+    // ....code.......
+
+    // 触发mutations
    commit('ADD_ERROR_LOG', log)
  },
  clearErrorLog({ commit }) {
--- a/src/views/test/error-log/index.vue
+++ b/src/views/test/error-log/index.vue
@ -2,21 +2,35 @@
  <div class="errPage-container">
    <ErrorA />
    <ErrorB />
-    <h3>这个页面是测试错误上报功能的</h3>
+    <h2>这个页面是测试错误日志功能的</h2>
+    <h4>
+      本页面主动抛出了错误（任何页面报错都会记录到错误日志中），现在你可以点击右上角的`debugger`图标查看错误日志
+    </h4>
    <div>
-      本页面主动抛出了错误，你现在可以点击右上角的`debugger`图标查看错误日志
+      你可以在`store/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
+    </div>
+    <br />
+    <div>
+      如果你的项目不需要错误日志功能，你需要把`src/error-log.js`中的flag变量设为false
    </div>
  </div>
 </template>

 <script>
+import { defineComponent, onMounted } from 'vue'
 import ErrorA from './components/ErrorTestA.vue'
 import ErrorB from './components/ErrorTestB.vue'
+import { TestError } from '@/api/test'

-export default {
+export default defineComponent({
  name: 'test-error-log',
  components: { ErrorA, ErrorB },
-}
+  setup() {
+    onMounted(async () => {
+      await TestError() // 该接口抛出500错误
+    })
+  },
+})
 </script>

 <style scoped>