前端錯誤監控

什麼是前端錯誤？

前端錯誤通常指的是如下兩種狀況：即時運行錯誤（代碼錯誤）和資源加載錯誤。

捕獲方式

即便運行錯誤捕獲

一、try...catch方案：能夠針對某個代碼塊使用try,catch包裝，這個代碼塊運行時出錯時能在catch塊裏邊捕捉到。

二、window.onerror方案。

資源加載錯誤捕獲

一、Object.onerror;

資源加載錯誤不會冒泡，因此window.onerror不能捕獲資源加載錯誤。

二、performance.getEnteries();

獲取到全部已加載資源的加載時長。能夠間接的拿到沒有加載的資源錯誤。

舉個栗子：

遍歷已成功加載的資源：

獲取咱們所須要加載的全部圖片：

所需加載的資源減去已加載的就能獲取到加載失敗的資源了。

3)Error事件捕獲（冒泡不可）。

window.addEventListener('error', function(e) { console.log('捕獲',e) },true); //事件捕獲

<!-- 一個不存在的資源 -->
<script src="//baidu.com/test.js"></script>

控制檯打印出錯誤：

>>延伸：跨域的js運行錯誤捕獲錯誤提示：

處理方法：

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

上報錯誤的基本原理

1.採用Ajax通訊的方式上報（不推薦）。

2.利用Image對象上報。

比Ajax方式簡單，不須要藉助任何第三方庫。

(new Image()).src = 'http://baidu.com/test?r=test';