跳到主要内容

异常处理

2023年03月14日
柏拉文
越努力，越幸运

一、认识​

在 Vue 中, 异常分为两种:

  1. 后端接口错误

  2. 代码中本身逻辑错误

二、对于后端接口错误​

对于后端接口错误: 可以在接口响应之后统一处理, 比如在 axios 的 interceptor 实现对网络请求的第一层拦截

axios.interceptor.response.use((response)=>{
  return response
},error=>{
  if(error.response.status === 401){
    return Promise.reject('401');
  }else{
    return Promise.reject(error);
  }
});

三、对于自身代码逻辑错误​

3.1 全局错误处理​

全局错误处理: app.config.errorHandler

app.config.errorHandler = (err, instance, info) => {
    console.log('err', err);
    console.log('instance', instance);
    console.log('info', info);
};

如果在组件渲染时出现运行错误，错误将会被传递至全局 app.config.errorHandler 配置函数 (如果已设置)。比如前端监控领域的 sentry，就是利用这个钩子函数进行的 vue 相关异常捕捉处理

3.2 子孙组件错误处理​

子孙组件错误处理: onErrorCaptured

onErrorCaptured((err, instance, info) => {
    console.log('App');
    console.log('err', err);
    console.log('instance', instance);
    console.log('info', info);
    return false;
});

说明: 默认情况下，所有的错误都会被发送到应用级的 app.config.errorHandler (前提是这个函数已经定义)，这样这些错误都能在一个统一的地方报告给分析服务。errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。即表示这个错误已经被处理了，应当被忽略，它将阻止其他的 errorCaptured 钩子或 app.config.errorHandler 因这个错误而被调用。

3.3 终极错误捕捉​

终极错误捕捉: window.onerror

window.onerror = function(message, source, line, column, error) {};

它是一个全局的异常处理函数，可以抓取所有的 JavaScript 异常