所以给我们的启示是组件库或者业务系统中的块级的一些东西(spm模型中的c位)一定要考虑好组件级别的异常处理。
异常的全局上报
基本上这是对付不可预知异常的终极解法,自动收集错误报告并在达到阈值时做出告警,属于在理想情况下异常发生后能让研发同学们能第一时间发现并定位解决问题,主要会使用2个全局事件:
window.onerror事件
JS运行中的大部分异常(包括语法错误),都会触发window上的error事件执行注册的函数,不同于try catch,onerror既可以感知同步异常也可以感知异步任务的异常(除了promise异常),使用方法如下:
// message:错误信息(字符串)。
// source:发生错误的脚本URL(字符串)
// lineno:发生错误的行号(数字)
// colno:发生错误的列号(数字)
// error:Error对象(对象)
window.onerror = function(message, source, lineno, colno, error) {
logger.log('捕获到异常:',{ message, source, lineno, colno, error });
}
unhandledrejection事件
作为以上方案的补充版,promise异常的捕获依赖于全局注册unhandledrejection,使用方法如下
window.addEventListener('unhandledrejection', (e) => {
console.error('catch', e)
}, true)
写在最后
其实总结下来我们的异常处理主要也只是干两件事情:
1、将面向开发的异常信息转换成更友好的用户界面提示;
2、将异常信息上报到服务端让研发同学去解决这些异常;希望大家看了本篇文章有所收获!
参考链接:
[1]
[2]reactjs.org/docs/error-boundaries.ht
[3]procomponents.ant.design/
来源:【九爱网址导航www.fuzhukm.com】 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!