前端捕获异常技巧总结

Posted 2023-04-13

参考技术A 异常分类

捕获异常技巧
1.可疑区域增加 try...catch（只能捕获到同步的运行时错误，对于语法和异步错误无能为力，捕获不到。）

2.全局监控JS异常： window.onerror（不是万能的，只有在返回 true 的时候，异常才不会向上抛出（浏览器接收后报红），否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx，最好写在所有JS脚本的前面，否则有可能捕获不到错误，无法捕获语法错误）

3.全局监控静态资源异常： window.addEventListener

4.全局捕获没有 catch 的 promise 异常：unhandledrejection

5.iframe 异常：window.onerror

6.VUE errorHandler 和 React componentDidCatch

7.监控网页崩溃：window 对象的 load 和 beforeunload

8.Script Error跨域 crossOrigin 解决（跨源资源共享机制( CORS )：我们为 script 标签添加 crossOrigin 属性）

前端异常捕获

前端异常捕获方法：

try…catch…

try{
	const  a = 1;
	   	   c = a+b
}catch(error){
	console.error(error)//打印异常 ReferenceError: b is not defined
}

//使用try catch能够很好的捕获异常并对应进行相应处理，不至于让页面挂掉，但是其存在一些弊端，比如需要在捕获异常的代码上进行包裹，会导致页面臃肿不堪，不适用于整个项目的异常捕获。

window.onerror()

相较于try…catch… , window.onerror ()能全局异常捕获,但无法捕获跨域资源出现的异常和webpack打包压缩文件时生成的source-map

window.onerror = (errorMessage, scriptURI, lineNo, columnNo, error) => {
    console.error('errorMessage: ' + errorMessage); // 异常信息
    console.warring('scriptURI: ' + scriptURI); // 异常文件路径
    console.warring('lineNo: ' + lineNo); // 异常行号
    console.warring('columnNo: ' + columnNo); // 异常列号
    console.error('error: ' + error); // 异常堆栈信息
};

vue.config.errorHandler

vue中封装的异常捕获方法

Vue.config.errorHandler = function (err, vm, info) {
    let { 
        message, // 异常信息
        name, // 异常名称
        script,  // 异常脚本url
        line,  // 异常行号
        column,  // 异常列号
        stack  // 异常堆栈信息
    } = err;

    // vm为抛出异常的 Vue 实例
    // info为 Vue 特定的错误信息，比如错误所在的生命周期钩子
}

从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 undefined 时，被捕获的错误会通过 console.error 输出而避免应用崩溃。

从 2.4.0 起，这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。

从 2.6.0 起，这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理。

#####错误追踪服务 Sentry 和 Bugsnag 都通过此选项提供了官方支持。

参考：errorHandler

Error Boundary:

react中的异常捕获方法

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });

        // 将异常信息上报给服务器
        logErrorToMyService(error, info); 
    }

    render() {
        if (this.state.hasError) {
            return '出错了';
        }

        return this.props.children;
    }
}

使用

<ErrorBoundary>
    <MyWidget  />
</ErrorBoundary>

参考：Error Boundary