前端錯誤監控與上報

米啟點發表於2018-11-14
前端

前端錯誤的分類：

一:及時程式碼執行錯誤：也稱為程式碼錯誤。這個錯誤往往是程式設計師在程式碼書寫時造成的，比如語法錯誤、邏輯錯誤，這樣的錯誤通常在測試階段就會被發現，但是也可能存在“漏網之魚”。

二：資源載入錯誤：這個錯誤通常是找不到檔案（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: *'),或者 指定域名。


相關文章