完善错误日志收集

Author: [email protected]

src/store/module/app.js

@@ -94,11 +94,15 @@ export default {
     }
   },
   actions: {
-    addErrorLog ({ commit }, info) {
+    addErrorLog ({ commit, rootState }, info) {
       if (!window.location.href.includes('error_logger_page')) commit('setHasReadErrorLoggerStatus', false)
+      const { user: { token, userId, userName } } = rootState
       let data = {
         ...info,
-        time: Date.parse(new Date())
+        time: Date.parse(new Date()),
+        token,
+        userId,
+        userName
       }
       saveErrorLogger(info).then(() => {
         commit('addError', data)

src/store/module/user.js

@@ -71,7 +71,7 @@ export default {
           getUserInfo(state.token).then(res => {
             const data = res.data
             commit('setAvator', data.avator)
-            commit('setUserName', data.user_name)
+            commit('setUserName', data.name)
             commit('setUserId', data.user_id)
             commit('setAccess', data.access)
             commit('setHasGetInfo', true)

src/view/error-store/error-store.vue

@@ -7,11 +7,9 @@
     </Card>
     <Card style="margin-top: 20px;">
       <Row>
-        <i-col span="4">
-          <Button @click="click">点击测试触发程序错误</Button>
-        </i-col>
-        <i-col span="4">
-          <Button @click="ajaxClick">点击测试触发ajax接口请求错误</Button>
+        <i-col span="8">
+          <Button @click="click" style="display: block">点击测试触发程序错误</Button>
+          <Button @click="ajaxClick" style="margin-top:10px;">点击测试触发ajax接口请求错误</Button>
         </i-col>
         <i-col span="16">
           ajax接口请求是请求easy-mock的一个不存在接口，所以服务端会报404错误，错误收集机制会收集这个错误，测试的时候有一定网络延迟，所以点击按钮之后稍等一会才会收集到错误。

src/view/single-page/error-logger.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <Table :columns="columns" :data="errorList"></Table>
+    <Button @click="exportData" type="primary" style="margin: 0 10px 10px 0;">导出日志记录</Button>
+    <b>注：这里只会显示成功保存到服务端的错误日志，而且页面错误日志不会在浏览器持久化存储，刷新页面即会丢失</b>
+    <Table ref="table" :columns="columns" :data="errorList"></Table>
   </div>
 </template>
 
@@ -68,7 +70,12 @@ export default {
   methods: {
     ...mapMutations([
       'setHasReadErrorLoggerStatus'
-    ])
+    ]),
+    exportData () {
+      this.$refs.table.exportCsv({
+        filename: '错误日志.csv'
+      })
+    }
   },
   activated () {
     this.setHasReadErrorLoggerStatus()