监控 Vue 项目控制台报错发送给后台打印

由于遇到线上项目出现未知错误的问题。为了排除错误，需要确定是否是前端有语法错误。所以这里实现了一个将错误日志发送给后台打印日志的功能。

index.js

首先在前端入口文件进行 window 和 Vue 的错误监听，如果有错误发送错误信息到 node 中间层。

Vue.config.errorHandler = function (err) {
  post('error', {
    data: {
      error: err.stack
    }
  });
};

window.onerror = function(message, source, lineno, colno, error) {
  post('error', {
    data: {
      error: error.stack
    }
  });
};

window.addEventListener('error', (event) => {
  post('error', {
    data: {
      error: event.error.stack
    }
  });
});

error.js

在 node 后端层创建接口用于打印错误日志。为了符合前端 ajax 规范所以请求返回了一个 { code: 1 }

export default {

  needLogin: false,

  async handler(ctx) {
    const params = ctx.request.body.error;
    console.error(params)
    ctx.ajax({
        code: 1
    });
  }
}

注意

本文作用于工作项目中，仅供借鉴