本文將從以下幾點來分析前端錯誤監控的相關知識點：
1、前端錯誤的分類；
2、錯誤的捕獲方式；
3、上報錯誤的基本原理。
一、前端錯誤的分類：
包括兩種：
1、即時運行錯誤：也就是代碼錯誤；
2、資源加載錯誤：比如圖片加載失敗、JS加載失敗、CSS加載失敗等；
二、錯誤的捕獲方式：
即時運行錯誤的捕獲方式：
1、try...catch
2、window.onerror：只能捕獲即時運行錯誤，不能捕獲資源加載錯誤(原理：資源加載錯誤，並不會向上冒泡，object.onerror捕獲后就會終止，所以window.onerror並不能捕獲資源加載錯誤)；
資源加載錯誤的捕獲方式：
1、object.onerror：img標簽、script標簽都可以添加onerror事件，用來捕獲資源加載錯誤；
2、performance.getEntries：可以獲取所有已加載資源的加載時間，通過這種方式，可以間接的拿到沒有加載的資源錯誤。
舉例：
瀏覽器打開一個網站，在Console控制台下，輸入：performance.getEntries().forEach(function(item){console.log(item.name)})，顯示出來的資源就是已經成功加載的；
再輸入document.getElementsByTagName('img')，就會顯示出所有的img集合，這是所有需要加載的圖片的集合；
document.getElementsByTagName('img')獲取的資源數組減去通過performance.getEntries()獲取的資源數組，剩下的就是沒有成功加載的，這種方式可以間接的捕獲到資源加載錯誤。
請看下圖：
3、Error事件捕獲
資源加載錯誤，雖然會阻止冒泡，但是不會阻止捕獲。
示例：
延伸問題：跨域js運行錯誤可以捕獲嗎？錯誤提示是什么？應該怎么處理呢？
跨域js運行錯誤也是可以捕獲到的，但是拿不到具體的信息，比如：出錯行號、出錯列號，錯誤詳情等，這種問題應該怎么處理呢？
分兩步：
1.在script標簽上增加crossorigin屬性；
2.設置js資源響應頭Access-Control-Allow-Origin:*；
三、上報錯誤的基本原理
1.采用Ajax通信的方式上報；
2.利用Image對象上報；(推薦的方式)
如何利用Image對象上報呢？
只需要動態創建一個Image對象即可
通過network可以看到請求已經發出了
