前端常见异常处理

最新推荐文章于 2024-05-03 11:11:31 发布
炉火纯青-旺
最新推荐文章于 2024-05-03 11:11:31 发布
阅读量1.1k
点赞数 1
文章标签：前端 javascript vue.js
本文链接：https://blog.csdn.net/qq_34870529/article/details/122863780
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 前端常见的异常 1、js语法错误，代码异常   2、ajax请求异常   3、静态资源加载异常    4、promise异常   5、iframe异常   6、跨域script error   7、崩溃和卡顿

        // 1: try - catch  只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到
        try {
            let name = 'kebi';
            console.log(nam);
        } catch (e) {
            console.log('捕获到异常：' + e);
        }

        // 2: 异步错误
        try {
            setTimeout(() => {
                undefined.map(v => v);
            }, 1000);
        } catch (e) {
            console.log('捕获到异常：' + e);
        }

        // 3：window.onerror  当js运行时错误发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror
        window.onerror = function (message, source, lineno, colno, error) {
            // message：错误信息（字符串）。
            // source：发生错误的脚本URL（字符串）
            // lineno：发生错误的行号（数字）
            // colno：发生错误的列号（数字）
            // error：Error对象（对象）
            console.log('捕获到异常：', {
                message,
                source,
                lineno,
                colno,
                error
            });
        };

        // 注意： 1：onerror最好写在所有JS脚本的前面，否则有可能捕获不到错误
        //       2：onerror无法捕获语法错误
        //       3：window.onerror 不论是静态资源异常或是接口异常，错误都无法捕获到
        //       4：window.onerror函数只有在返回true的时候，异常才不会向上抛出，否则即使知道异常的发生控制台还是会显示Uncaught Error:xxxxx


        // 4: window.addEventListener  处理静态资源加载异常
        // 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数，这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。
        window.addEventListener('error', (error) => {
            console.log('捕获到异常：', error);
        }, true);

        // 5: Promise Catch
        // 在promise中使用catch可以非常方便的捕获到异步error，这个很简单。
        // 在没有写catch的Promise中抛出的错误无法被onerror或try-catch捕获到，所以我们务必要在Promise中不要忘记写catch处理抛出的异常。
        // 解决方案：为了防止有漏掉的Promise异常，建议在全局增加一个unhandledrejection的监听，用来全局监听U你caught Promise Error。 使用方式：
        window.addEventListener("unhandledrejection", function (e) {
            console.log(e);
        });

        window.addEventListener("unhandledrejection", function (e) {
            e.preventDefault()
            console.log('捕获到promise异常：', e);
            return true;
        });
        Promise.reject('promise error');

        window.addEventListener("unhandledrejection", function (e) {
            e.preventDefault();
            console.log('捕获到异常：', e);
            return true;
        });

        new Promise((resolve, reject) => {
            reject('jartto: promise error');
        });


        // 6: vue中异常捕获
        Vue.config.errorHandler = (err, vm, info) => {
            console.error('通过vue errorHandler捕获的错误');
            console.error(err);
            console.error(vm);
            console.error(info);
        }

        // 7： react异常捕获
        // react16提供了一个内置函数componentDidCatch，使用它可以非常简单的获取到react下的错误信息
        // componentDidCatch(error, info) {    
        //     console.log(error, info);
        // }

        // 8： iframe异常
        // 对于iframe的异常捕获，我们还得借力window.onerror
        window.onerror = function (message, source, lineno, colno, error) {
            console.log('捕获到异常：', {
                message,
                source,
                lineno,
                colno,
                error
            });
        }

        // 9: Script error
        // 一般情况，如果出现Script error这样的错误，基本上可以确定是出现了跨域问题。这个时候，是不会有其它太多辅助信息的，但是解决思路无非如下：
        // 1：资源共享机制（CORS）:我们为script标签添加crossOrigin属性
        // <script src="http://jartto.wang/main.js" crossorigin>
        // 2: 或者动态去添加js脚本 特别注意服务端需要设置： Access-Control-Allow-Origin
        const script = document.createElement('script');
        script.crossOrigin = 'anonymous';
        script.src = url;
        document.body.appendChild(script);

        // 10 崩溃和卡顿
        // 卡顿也就是网页在世响应比较慢，JS可能无法及时执行。但奔溃就不一样了，网页都崩溃了，JS都不运行了。
        // 利用window对象的load和beforeunload事件实现了网页崩溃的监控
        window.addEventListener('load', function () {
            sessionStorage.setItem('good_exit', 'pending');
            setInterval(function () {
                sessionStorage.setItem('time_before_crash', new Date().toString());
            }, 1000);
        });
        window.addEventListener('beforeunload', function () {
            sessionStorage.setItem('good_exit', 'true');
        });
        if (sessionStorage.getItem('good_exit') && sessionStorage.getItem('good_exit') !== 'true') {
            /*        insert crash logging code here    */
            alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem(
                'time_before_crash'));
        }

        // 使用 Service Worker 来实现网页崩溃的监控：
        // Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 发送消息。


        // 总结：
        // 1: 可疑区域增加Try-Catch
        // 2: 全局监控JS异常window.onerror
        // 3: 全局监控静态资源异常 window.addEventListener
        // 4: 捕获没有Catch的Promise异常：unhandlerejection
        // 5：Vue errorHandler 和 React componentDidCatch
        // 6：监控网页崩溃：window对象的load和beforeunload
        // 7：跨域crossOrigin解决 
    </script>
    <img src="./jartto.png">
</body>

</html>
炉火纯青-旺
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常见异常处理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫