Vue错误日志捕获

在error.js中写入

import store from './store'
export default {
  install: (app) => {
    app.config.errorHandler = (err, vm, info) => {
      store.commit('ADD_LOGS', {
        type: 'error',
        message: err.message,
        stack: err.stack,
        info
      })
      if (process.env.NODE_ENV === 'development') {
        console.group('>>>>>> 错误信息 >>>>>>')
        console.log(info)
        console.groupEnd();
        console.group('>>>>>> Vue 实例 >>>>>>')
        console.log(vm)
        console.groupEnd();
        console.group('>>>>>> Error >>>>>>')
        console.log(err)
        console.groupEnd();
      }
    }
  }
}

在store/modules/logs.js注册日志相关东西

// setStore, getStore是针对localStorage和sessionStorage的封装,优先取session, setStore传入type值时声明sessionStorage存储, 默认localStorage
import { setStore, getStore } from 'utils/store'
import dayjs from 'dayjs'
import { sendLogs } from '@/api/user'
const logs = {
  state: {
    logsList: getStore({ name: 'logsList' }) || [],
  },
  actions: {
    //发送错误日志
    SendLogs ({ state, commit }) {
      return new Promise((resolve, reject) => {
        sendLogs(state.logsList).then(() => {
          commit('CLEAR_LOGS');
          resolve();
        }).catch(error => {
          reject(error)
        })
      })
    },
  },
  mutations: {
    // 添加日志
    ADD_LOGS: (state, { type, message, stack, info }) => {
      state.logsList.push(Object.assign({
        url: window.location.href,
        time: dayjs().format('YYYY-MM-DD HH:mm:ss')
      }, {
        type,
        message,
        stack,
        info: info.toString()
      }))
      setStore({ name: 'logsList', content: state.logsList })
    },
    // 清空日志
    CLEAR_LOGS: (state) => {
      state.logsList = [];
      setStore({ name: 'logsList', content: state.logsList })
    }
  }
};
export default logs;

在main.js中注册插件

import error from './error';
app.use(error);