前端錯誤監控總結

【要點】

1. 前端錯誤的分類

2. 錯誤的捕獲方式

3. 上報錯誤的基本原理

【總結】

1. 錯誤分類

• 運行時錯誤，代碼錯誤
• 資源載入錯誤

2.捕獲方式

• 代碼錯誤捕獲

  • 　　try ... catch:

    try {
        console.log("歡迎光臨！");
    }
    catch(err) {
        document.getElementById("xxx").innerHTML = err.message;
    }

  • 　　window.onerror

    1 window.onerror = function(){
    2 
    3     console.log(error msg);
    4 
    5 }

• 資源載入錯誤  （不會冒泡到window, 這也是window.onerror捕獲不到的原因）
  • object.onerror：img標簽、script標簽都可以添加onerror事件，用來捕獲資源載入錯誤；
  • performance.getEntries()：可以獲取所有已載入資源的載入時間，通過這種方式，可以間接的拿到沒有載入的資源錯誤。
  • Error事件捕獲：資源載入錯誤，雖然會阻止冒泡，但是不會阻止捕獲。true:捕獲，false:冒泡

　　【延申】

         跨域js運行錯誤也是可以捕獲到的，但是拿不到具體的信息，比如：出錯行號、出錯列號，錯誤詳情等，這種問題應該怎麼處理呢？

　　 分兩步：

• 1.在script標簽上增加crossorigin屬性；
• 2.設置js資源響應頭Access-Control-Allow-Origin:*；（也可以設置特定的功能變數名稱) 這樣就可以拿到具體的錯誤信息了

3.上報錯誤的基本原理

1. 利用Ajax通信的方式上報

2.利用Image對象上報 (推薦的方式) 是大部分瀏覽器的監控體系選擇的方法

 然後在network中就可以看到發送了請求