前端錯誤監控與上報

前端錯誤的分類：

一:及時代碼運行錯誤：也稱爲代碼錯誤。這個錯誤每每是程序員在代碼書寫時形成的，好比語法錯誤、邏輯錯誤，這樣的錯誤一般在測試階段就會被發現，可是也可能存在「漏網之魚」。

二：資源加載錯誤：這個錯誤一般是找不到文件（404）或者是文件加載超時形成的。

捕獲錯誤的方法：

及時代碼運行錯誤的捕獲方法通常有兩種，

try{      // 運行可能出錯的代碼  }catch{      // 捕獲錯誤  }複製代碼

另一種是 window.onerror

資源加載錯誤的捕獲通常有三種方法，

Object.onerror，

var img =document.getElementById('#img');

     img.onerror = function() {

        // 捕獲錯誤

     }
複製代碼

window.performance.getEntries()，

瀏覽器獲取網頁時，會對網頁中每個對象（腳本文件、樣式表、圖片文件等等）發出一個HTTP請求。而經過window.performance.getEntries方法，則能夠以數組形式，返回這些請求的時間統計信息，每一個數組成員均是一個PerformanceResourceTiming對象！

(function () {
    // 瀏覽器不支持，就算了！
    if (!window.performance && !window.performance.getEntries) {
        return false;
    }
 
    var result = [];
    // 獲取當前頁面全部請求對應的PerformanceResourceTiming對象進行分析
    window.performance.getEntries().forEach((item) => {
        result.push({
            'url': item.name,
            'entryType': item.entryType,
            'type': item.initiatorType,
            'duration(ms)': item.duration
        });
    });
 
    // 控制檯輸出統計結果
    console.table(result);
})();
複製代碼

詳細資料：developer.mozilla.org/en-US/docs/…

這就是已經加載的資源，而後把整個資源的數量減去已經加載好的資源，剩下的就是沒有加載出來的資源的數量。

捕獲Error事件

window.addEventListener("error",function(ev){    console.log('捕獲',ev)// 捕獲錯誤 },true);複製代碼

addEventListener的第三個參數 必定要是true,表示在捕獲階段觸發，若是改爲false就是冒泡階段，那是獲取不到錯誤事件的。

<!-- 一個不存在的資源 -->
<script src="//baidu.com/test.js"></script>複製代碼

錯誤上報的方法：

一：Ajax上傳，Ajax上報就是在上文註釋錯誤捕獲的地方發起Ajax請求，來向服務器發送錯誤信息。

二：利用Image對象發送信息

(new Image()).src="http://post.error.com?data=xxx"

跨域js文件錯誤是否能夠捕獲：

答案是能夠，錯誤提示是   script error

解決辦法，跨域js文件獲取是有限制的，若是想獲取其餘域下的js錯誤須要在script標籤裏添加crossorigin屬性，而後服務器端要設置header('Access-Control-Allow-Origin: *'),或者 指定域名。