前端錯誤監控分類及方式

前端錯誤的分類

• 即時運行錯誤：代碼錯誤
• 資源加載錯誤（包括圖片、js、css加載失敗）

錯誤的捕獲方式

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

1. try…catch
2. window.onerror（屬於DOM 0，還可以使用addEventListener()）

• 資源加載錯誤

1. Object.onerror
2. performance.getEntries()
3. Error事件捕獲

<script type="text/javascript">
  window.addEventListener('error', function (e) {
      console.log('捕獲', e);
  }, true);
</script>

• 延伸：跨域的JS運行錯誤可以捕獲嗎，錯誤提示什麼，應該怎麼處理？

1. 在script標籤增加crossorigin屬性
2. 設置js資源響應頭Access-Control-Allow-Origin字段

上報錯誤的基本原理

1. 採用Ajax通信的方式上報
2. 利用Image對象上報（推薦）

<script type="text/javascript">
  (new Image()).src = 'http://baidu.com/tesjk?r=tksjk';
</script>