js中的錯誤監控（二）【網絡+資源加載】的錯誤捕獲與上報

相關博客：

js中的錯誤監控（一）【promise，async，generator異步+內置錯誤類型】的錯誤捕獲與上報
js中的錯誤監控（二）【網絡+資源加載】的錯誤捕獲與上報

---

一、網絡錯誤類型

1.addEventListener監聽全局網絡error事件

1⃣️ 通過window.addEventListener來實現，網絡異常可以在事件捕獲的階段捕捉到，addEventListener第三個參數設置爲true
2⃣️ 代碼必須放在文檔載入之前
3⃣️ 通過e.srcElement來判斷網絡錯誤事件發生的元素
html:

<!-- 兩個不存在的資源 -->
<script src="//baidu.com/test.js"></script>
<img src="//baidu.com/test.js" alt="圖片加載中" />

js:

//addEventListener捕獲網絡請求錯誤
window.addEventListener(
  "error",
  e => {
    e.stopImmediatePropagation();
    const srcElement = e.srcElement;
    if (srcElement === window) {
      // 全局錯誤
      console.log("全局錯誤");
      console.log("message", e.message);
    } else {
      // 元素錯誤，比如引用資源報錯
      console.log("元素錯誤");
      console.log("tagname", srcElement.tagName);
      console.log("src", srcElement.src);
    }
    console.log("onerror捕獲網絡請求錯誤", e); // 捕獲錯誤
  },
  true //網絡錯誤，在捕獲階段獲取，第三個參數爲true
);

控制檯輸出：

2.資源object加載錯誤

Object.onerror定義指定對象資源加載錯誤時的回調函數

var imgObj = document.getElementById("img");
imgObj.onerror = function(e) {
  console.log("obj.onerror捕獲網絡請求錯誤", e); // 捕獲錯誤
  console.log("tagname", e.srcElement.tagName);
  console.log("src", e.srcElement.src);
};

控制檯：

3.window.performance.getEntries()，

瀏覽器獲取網頁時，會對網頁中每一個對象（腳本文件、樣式表、圖片文件等等）發出一個HTTP請求。而通過window.performance.getEntries方法，則可以以數組形式，返回這些請求的時間統計信息，每個數組成員均是一個PerformanceResourceTiming對象:

(function() {
  // 瀏覽器不支持，就算了！
  if (!window.performance && !window.performance.getEntries) {
    return false;
  }

  var result = [];
  // 獲取當前頁面所有請求對應的PerformanceResourceTiming對象進行分析
  window.performance.getEntries().forEach(item => {
    result.push({
      url: item.name,
      entryType: item.entryType,
      type: item.initiatorType,
      "duration(ms)": item.duration
    });
  });

  // 控制檯輸出統計結果
  console.table(result);
})();

Window​.performance：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/performance

4.跨域文件錯誤

如果引用外鏈不同源的文件，外鏈不同源js文件報錯，onerror只會提示Script error，無法精確到指定文件和行數，可以通過script標籤的：

crossorigin="anonymous"

html標籤中的src屬性的資源服務器也需要開啓cors驗證，並允許引用頁面的域名訪問

Access-Control-Allow-Headers:
Origin, X-Requested-With, Content-Type, Accept, Range
Access-Control-Allow-Origin:
*

注意： 以上兩步缺一不可。實驗二告訴我們，如果只是加上Access-Control-Allow-Origin:*的話，錯誤還是無法捕獲。如果只加上crossorigin屬性，瀏覽器會報無法加載的錯誤，如下圖

二、錯誤上報

1.Ajax上傳

Ajax上報就是在上文註釋錯誤捕獲的地方發起Ajax請求，來向服務器發送錯誤信息。

2.利用Image對象發送信息

(new Image()).src="http://post.error.com?data=xxx"

3.壓縮js的錯誤定位

在線上的代碼都是經過壓縮的，可以捕捉到的錯誤爲壓縮後的行數和變量，可以通過node提供的source-map模塊來定位上報錯誤信息對應源文件錯誤的行號

參考：https://www.jianshu.com/p/315ffe6797b8
https://www.kelen.cc/posts/5b4acef0ab4f6a413ad093fb
https://juejin.im/post/5beb7dcff265da614f6fdbce