错误日志

src/components/ErrorLog/index.vue

@@ -1,18 +1,14 @@
 <template>
-  <div v-if="errorLogs.length > 0">
+  <div v-if="errorLogs.length > 0" class="errLog-container">
-    <el-badge
+    <el-badge :is-dot="true" @click="dialogTableVisible = true">
-      :is-dot="true"
-      style="line-height: 25px;margin-top: -5px;"
-      @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 }">
+          <template #default="{ row }">
-            <div>
+            <div style="margin-bottom:10px">
-              <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>
               <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">
+          <template #default="{ row }">
-            {{ scope.row.err.stack }}
+            {{ 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;

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.DEV代表开发环境
+//   - import.meta.env.PROD 布尔值，代表生产环境
-  // 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)
       })
     }
-  // }
+  }
 }

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;

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'],
+        },
+      },
     ],
   },
 ]

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

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>