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);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容