需求: 把vue项目的所有接口请求异常/代码异常捕获并落日志。
技术点: vue全局应用配置errorHandler方法
(参考vue官方文档)

errorHandler可以捕获的异常类型

1.代码里的异常

错误的js语法使用(errorHandler自动捕获)

2.接口请求异常

接口请求报错404,500等(需手动提交完成捕获)

errorHandler在项目中的具体应用

1.main.js文件

全局注册errorHandler方法

//Vue全局异常捕获,落日志
const errorHandler = (err, vm, info)=>{
    console.warn('Vue全局异常捕获开始===========')
    console.log(`Error: ${err.toString()}\nInfo: ${info}`)
    if (err.isAxiosError) {
        console.log('axios请求错误!!')
        }
    console.warn('Vue全局异常捕获结束===========')
    
}
  
Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);
2.响应拦截

在公共方法axios请求的响应拦截错误回调函数里,使用 Vue.$throw(err)将错误信息提交给errorHandler函数去捕获处理

   console.warn(`响应拦截异常!!!\n错误信息:${err.toString()}\n接口名称:${err.config.url}`)
    Vue.$throw(err)
3.落日志(略)
Logo

前往低代码交流专区

更多推荐