本文將從以下幾點來分析前端錯誤監控的相關知識點：
1、前端錯誤的分類；
2、錯誤的捕獲方式；
3、上報錯誤的基本原理。
一、前端錯誤的分類：
包括兩種：
1、即時執行錯誤：也就是**錯誤；
二、錯誤的捕獲方式：
即時執行錯誤的捕獲方式：
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))，顯示出來的資源就是已經成功載入的；
再輸入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可以看到請求已經發出了
前端錯誤監控
1.前端錯誤分類 即時執行錯誤 錯誤 1 try catch 2 window.onerror 資源載入錯誤 找不到檔案或者資源載入超時造成的 1 object.onerror 2 performance.getentries 3 error事件捕獲 延伸 跨域js執行錯誤可以捕獲嗎，錯誤提示什麼，...
前端錯誤監控
前端錯誤一般指的是以下兩種情況 即時執行錯誤 錯誤 和資源載入錯誤。1 try.catch方案 可以針對某個 塊使用try,catch包裝，這個 塊執行時出錯時能在catch塊裡邊捕捉到。2 window.onerror方案。1 object.onerror 資源載入錯誤不會冒泡，所以window....
前端錯誤監控類
一 前端錯誤的分類 1.即時執行錯誤 錯誤 try catch 需要把try.catch布到 中 window.onerror dom0 只能捕獲即時執行錯誤 object.onerror 通過節點綁onerror事件，捕獲載入錯誤 performance.getentries 獲取已載入資源時長，...