前端面試10：錯誤監控/產品效能體系

課程思維導圖

Q：前端錯誤分類有哪些？

1. 即時執行錯誤，如程式碼錯誤
2. 資源載入錯誤

Q：前端錯誤捕獲方式分別是什麼？

1. 即時錯誤的捕獲方式
   1. try-catch
   2. window.onerror（只能捕獲即時錯誤）
2. 資源載入錯誤的捕獲方式
   1. Object.onerror
   2. performance.getEntries() 拿到所有成功載入資源的集合
   3. Error事件捕獲

Q：如何使用Object.onerror捕獲資源載入錯誤？

（注意：這種錯誤不會冒泡，但可以捕獲）

window.addEventListener('error', function (e) {
    console.log(e)
}, true);
複製程式碼

Q：跨域的JS執行錯誤可以捕獲麼？錯誤提示是什麼，應該怎麼處理？

可以捕獲，提示“Script error”，具體錯誤資訊無法獲得 解決方案：

1. 客戶端：在script標籤增加crossorigin屬性
2. 服務端：設定JS資源響應頭Access-Control-Allow-Origin

Q：客戶端上報錯誤的基本原理是什麼？

1. 使用Ajax通訊的方式上報
2. 利用Image物件上報：(new Image()).src = "http ://xxx/com/test";