Appearance
26.Vue 项目中的错误如何处理的？
1.1 errorCaptured 钩子
可以捕获一个来自后代组件的错误时被调用，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。
父组件（errorCaptured）-》 子组件（errorCaptured）-》 孙子组件出错时，错误会一直向上抛。如果 errorCaptured 中返回 false 则会阻断传播。
1.2 全局设置错误处理
如果在组件渲染时出现运行错误，错误将会被传递至全局 config.errorHandler 配置函数。
js
Vue.config.errorHandler = (err, vm, info) => {
console.log(err, vm, info);
};Vue.config.errorHandler = (err, vm, info) => {
console.log(err, vm, info);
};1.3 接口异常处理
js
instance.interceptors.response.use(
(res) => {
return res.data;
},
(err) => {
let res = err.response;
if (res.status >= 400) {
handleError(response); // 统一处理接口异常
}
return Promise.reject(error);
}
);instance.interceptors.response.use(
(res) => {
return res.data;
},
(err) => {
let res = err.response;
if (res.status >= 400) {
handleError(response); // 统一处理接口异常
}
return Promise.reject(error);
}
);收集到错误后，提交到前端监控系统中，这样我们可以分析前端代码的异常信息啦。