前端錯誤監控總結

【要點】

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中就能夠看到發送了請求