需求: 把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)