错误日志

2021-05-15(修改时间)

前端通过捕获异常捕获出的数据 发送请求

错误日志内容可以更改

后端错误日志api:

第一种情况:vue组件报错 使用vue自带的 Vue.config.errorHandler = function (err, vm, info) {}来捕获异常

//main.js
Vue.config.errorHandler = function (err, vm, info) { //vue错误捕获
  const date = new Date();
  const errObject = {
    type: "Vue",
    status: "vueError",
    msg: err,
    path: vm.$router.history.current.path,
    info,
    time: date.toLocaleDateString() + "-" + date.toLocaleTimeString()
  }
}

第二种情况 静态资源未找到 （此处单指图片资源信息）

//main.js
window.addEventListener('error', function (event) { //静态资源加载失败
  let target = event.target || event.srcElement;
  let isElementTarget = target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
  if (!isElementTarget) return false;
  let url = target.src || target.href;
  const dateObj = new Date();
  const errObject = {
    type: "fileError",
    requirePath: url,
    time: dateObj.toLocaleDateString() + '-' + dateObj.toLocaleTimeString()
  };
}, true);

第三种情况 网络请求报错或服务端报错 

//iZnstance.interceptors.response.use(res => {}) axios响应拦截器
if (res.status != 200 || res.data.code != 0) {
        const date = new Date();
        const errObject = {
          type: "axios",
          status: "networkError",
          path: res.config.url,
          msg: res.data,
          time: date.toLocaleDateString() + "-" + date.toLocaleTimeString()
        }
      }

第四种 异步异常

//main.js
window.addEventListener("unhandledrejection", function (e) { //异常捕获
  console.log('捕获到异常：', e);
});