vue添加错误日志

介绍

将错误信息前端收集到，发送给服务器端；服务器端记录错误信息到磁盘文件中。方便进行项目问题排查和优化

思路

• 使用errorHandler收集错误信息。参考：全局配置>errorHandler
• 在vuex中使用action请求后端接口，将错误信息发送给服务器端
• 服务器端接收到错误信息后，写入日志文件（后端代码处理，此处省略）

步骤

• 在src/utils/目录下新建exception.js文件

import store from '../store'

export function errorHandler(error, vm, info) {
  console.error(error)
  store.dispatch('getErr', {
    err: error.stack,
    hook: info,
    url: vm.$route.fullPath
  })
}

• 修改src/main.js

import { errorHandler } from './utils/exception'
// ...
// 异常处理
Vue.config.errorHandler = errorHandler
Vue.prototype.$throw = (error, vm, info) => errorHandler(error, vm, info)
// ...

• 修改Vuex中的actions，添加getErr。比如修改src/store/actions.js文件

// ...
import axios from 'axios'
// ...
const actions = {
  // ...
  getErr(context, errInfo) {
    // 将收集到的信息，发送给后端
    axios.post('xxx', errInfo)
  }
}

export default actions

• 在Vue生命周期等地方，有异常会自动抛出错误。也可以在想要的地方手动抛出一个错误

this.$throw('这是手动抛出的一个错误', this, '这是hook，比如：updated')