前端錯誤監控原理與實戰

本文將從如下幾點來分析前端錯誤監控的相關知識點：

一、前端錯誤的分類；

二、錯誤的捕獲方式；

三、上報錯誤的基本原理。

 

1、前端錯誤的分類：

　　包括兩種：

　　一、即時運行錯誤：也就是代碼錯誤；

　　二、資源加載錯誤：好比圖片加載失敗、JS加載失敗、CSS加載失敗等；

2、錯誤的捕獲方式：

　　即時運行錯誤的捕獲方式：

　　一、try...catch

　　二、window.onerror：只能捕獲即時運行錯誤，不能捕獲資源加載錯誤(原理：資源加載錯誤，並不會向上冒泡，object.onerror捕獲後就會終止，因此window.onerror並不能捕獲資源加載錯誤)；

　　資源加載錯誤的捕獲方式：

　　一、object.onerror：img標籤、script標籤均可以添加onerror事件，用來捕獲資源加載錯誤；

　　二、performance.getEntries：能夠獲取全部已加載資源的加載時間，經過這種方式，能夠間接的拿到沒有加載的資源錯誤。

　　　　舉例：

　　　　瀏覽器打開一個網站，在Console控制檯下，輸入：performance.getEntries().forEach(function(item){console.log(item.name)})，顯示出來的資源就是已經成功加載的；

　　　　再輸入document.getElementsByTagName('img')，就會顯示出全部的img集合，這是全部須要加載的圖片的集合；

　　　　document.getElementsByTagName('img')獲取的資源數組減去經過performance.getEntries()獲取的資源數組，剩下的就是沒有成功加載的，這種方式能夠間接的捕獲到資源加載錯誤。

　　　　請看下圖：

 

 

　　三、Error事件捕獲

　　資源加載錯誤，雖然會阻止冒泡，可是不會阻止捕獲。

　　示例：

　　

 

 

　　延伸問題：跨域js運行錯誤能夠捕獲嗎？錯誤提示是什麼？應該怎麼處理呢？

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

　　分兩步：

　　1.在script標籤上增長crossorigin屬性；

　　2.設置js資源響應頭Access-Control-Allow-Origin:*；

 

3、上報錯誤的基本原理

　　1.採用Ajax通訊的方式上報；

　　2.利用Image對象上報；(推薦的方式)

　　如何利用Image對象上報呢？

　　只須要動態建立一個Image對象便可

　　

　　經過network能夠看到請求已經發出了