原创

js-监控js、css加载报错-方法执行报错

<script>
/**
 * js 监控css 和 js加载
 * js报错以后用邮件，如果有必要的话。
 * @param message
 * @param source
 * @param lineno
 * @param colno
 * @param error
 */

//TODO 后台搞个调试模式的配置
window.onerror = function(message, source, lineno, colno, error) {
    console.log(message, source, lineno, colno, error);
   // alert("方法执行出错，message="+message+",source="+source+",行="+lineno+",列="+colno+",error="+error);
};

// 重试的信息
var _retry_open = false; //TODO true还没有调试
var retryInfo = {};
var maxRetryNum = 3;

window.addEventListener('error', (event) => {

    //TODO 可以根据这个在控制台分析path: 和 target:
    //console.log(event);


    // 拿到触发错误的标签
    const tag = event.target;
    // 便签的名称必须是 'SCRIPT' 与 event 错误的类型不能是 ErrorEvent
    if(!(event instanceof ErrorEvent)){
        let isJs =false;
        let isCss =false;
        const url = null;
        if (tag.tagName.toLowerCase() === 'script'){
            console.log(tag.src, 'script 加载错误');
            url = tag.src;
            isJs =true;
            //alert("js资源加载出错:"+tag.src);
        }
        if (tag.tagName.toLowerCase() === 'link' ) {
            console.log(tag.href, 'css 加载错误');
            url = tag.href;
            isCss =true;
            //alert("css资源加载出错 :"+tag.href);
        }

        if (_retry_open) {
            if (!retryInfo[url]) {
                retryInfo[url] = {
                    retryTime: 0
                }
            }
            // 如果重试的次数小于 最大的重试次数，才可以继续重试
            if (retryInfo[url].retryTime < maxRetryNum) {
                // 重试就要生成一个新的元素
                if (isJs) {
                    const script = document.createElement('script');
                    // 然后将新的 url 添加到新的 script 的 src 里
                    script.src = url.toString();
                    // 将新的 script 加入到失败的 script 之前
                    document.body.insertBefore(script, tag);
                    retryInfo[url].retryTime++
                }
                if (isCss) {
                    const link = document.createElement('link');
                    link.href = url.toString();
                    link.rel = "stylesheet";
                    // 将新的 css 加入到失败的 css 之前
                    document.body.insertBefore(link, tag);
                    retryInfo[url].retryTime++
                }
            } else if (retryInfo[url].retryTime === maxRetryNum) {
                alert("重试次数到了" + url)
            }
        }
    }
}, true);

    </script>

正文到此结束

所属分类：前端基础

本文标签： JavaScript
本文链接： https://code.jiangjiesheng.cn/article/103
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

js-监控js、css加载报错-方法执行报错

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息