/** * 監(jiān)控頁面靜態(tài)資源加載報(bào)錯(cuò) */ 
function loadResourceError() { 
    window.addEventListener('error', function(e) { 
        console.log(e, '錯(cuò)誤捕獲==='); 
        if(e){ 
            let target = e.target || e.srcElement; 
            let isElementTarget = target instanceof HTMLElement; 
            if (!isElementTarget) { 
                // js錯(cuò)誤 
                console.log('js錯(cuò)誤==='); 
                // js error處理 
                let { filename, message, lineno, colno, error} = e; 
                let { message: ErrorMsg, stack } = error; 
            }else{ 
                // 頁面靜態(tài)資源加載錯(cuò)誤處理 
                console.log('資源加載錯(cuò)誤==='); 
                let { type, timeStamp, target } = e; 
                let { localName, outerHTML, tagName, src } = target; 
                let typeName = target.localName; 
                let sourceUrl = ""; 
                if (typeName === "link") { 
                    sourceUrl = target.href; 
                } else if (typeName === "script") { 
                    sourceUrl = target.src; 
                } 
                alert('資源加載失敗，請(qǐng)刷新頁面或切換網(wǎng)絡(luò)重試。('+sourceUrl+')') 
             } 
         } 
        // 注意：由于網(wǎng)絡(luò)請(qǐng)求異常不會(huì)事件冒泡，因此必須在捕獲階段才能捕獲到異常；
        // 設(shè)為true表示捕獲階段調(diào)用，會(huì)在元素的onerror前調(diào)用,在window.addEventListener('error')后調(diào)用 
       },true); 
} 
   // 我們根據(jù)e.target的屬性來判斷它是link標(biāo)簽，還是script標(biāo)簽。目前只關(guān)注只監(jiān)控了css，js文件加載錯(cuò)誤的情況。

// 瀏覽器獲取網(wǎng)頁時(shí)會(huì)對(duì)網(wǎng)頁中每一個(gè)對(duì)象（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè)HTTP請(qǐng)求。而通過window.performance.getEntries方法，則可以以數(shù)組形式，返回這些請(qǐng)求的時(shí)間統(tǒng)計(jì)信息，每個(gè)數(shù)組成員均是一個(gè)PerformanceResourceTiming對(duì)象！ 
//原理是通過捕獲瀏覽器發(fā)出的http請(qǐng)求信息
function performanceGetEntries(){ 
    // 判斷瀏覽器是否支持 
    if (!window.performance && !window.performance.getEntries) { 
        return false; 
    } 

    var result = []; 
    // 獲取當(dāng)前頁面所有請(qǐng)求對(duì)應(yīng)的PerformanceResourceTiming對(duì)象進(jìn)行分析 
    window.performance.getEntries().forEach((item) => { 
        result.push({ 
            'url': item.name, 
            'entryType': item.entryType, 
            'type': item.initiatorType, 
            'duration(ms)': item.duration 
         }); 
    }); 
    // 控制臺(tái)輸出統(tǒng)計(jì)結(jié)果 
    console.table(result); // 表示已經(jīng)加載的資源  -這是加載成功的列表
    
   //一個(gè)最簡(jiǎn)單的方法是數(shù)量相差得出失敗的數(shù)量
   // 然后把整個(gè)資源的數(shù)量減去已經(jīng)加載好的資源，剩下的就是沒有加載出來的資源的數(shù)量。 
}

圖片：
let image = document.getElementByid('#img')
image.onerror = (e)=>{
    //錯(cuò)誤信息
    console.log(e)
}

js腳本
let script = document.createElement('script');
script.onload = function() {
    console.log('腳本加載成功');
    // 腳本加載成功后的操作
};
script.onerror = function() {
    console.error('腳本加載失敗');
    // 腳本加載失敗后的操作
};

try {
    // 嘗試執(zhí)行的代碼
    someFunctionThatMightThrow();
} catch (error) {
    // 錯(cuò)誤處理
    console.error('捕獲到錯(cuò)誤:', error);
    reportError(error); // 自定義的錯(cuò)誤上報(bào)函數(shù)
}

window.onerror = function(message, source, lineno, colno, error) {
    console.error('全局錯(cuò)誤捕獲:', message, '在', source, '行', lineno);
    reportError(message, source, lineno); // 自定義的錯(cuò)誤上報(bào)函數(shù)
    return false; // 返回false阻止默認(rèn)的錯(cuò)誤頁面顯示
};

window.addEventListener('error', function(event) {
    var message = event.message;
    var filename = event.filename || event.filename;
    var lineno = event.lineno;
    var colno = event.colno;
    var error = event.error; // Error object if available
 
    console.error('未捕獲的異常:', message, '在', filename, '行', lineno);
    reportError(message, filename, lineno); // 自定義的錯(cuò)誤上報(bào)函數(shù)
}, true); // 使用capture參數(shù)為true來捕獲事件冒泡階段的事件