nuxt.js项目中全局捕获异常并生成错误日志全过程

需求：客户在使用过程中页面报错时，可以生成错误记录传回服务器，以便改进。

步骤：

• 全局捕获异常，
• 发送到服务端，
• 生成错误日志。

(一).全局捕获异常

如图，vue提供了errorHandle这个方法来处理全局异常，更多详细内容参见官网。

我在页面中写了一个错误的函数，触发了errorHandler，控制台打印如下：

在utils.js中写了如下代码：

//系统错误捕获
const errorHandler = (error,vm,info)=>{
   
  getErr(error,vm,info);
}

Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error,vm,info)=> errorHandler(error,vm,info);

然后在另一个公用的js（commonService.js）中：

/**
 * 捕获异常
 */
const getErr = async(err,_this,info) => {
   
  _this.$store.dispatch('getErr',{
   
    err:err.stack,
    hook:info
  }
}

说明一下，之所以写在两个文件中，是因为项目结构就是这样的。

(二).发送到服务端

接下来就是如何把请求发送到node服务器上了。既然通过dispatch触发，那就统一在store目录下的index.js中处理

// 捕获异常，存在node服务器中
async getErr({
    commit },{
    err_info }) {
   
    console.log({
   err_info})
    await axios.post('/api/get