web前端之異常/錯誤監控

dykily發表於2019-03-09
Web前端

為什麼要異常/錯誤監控

我們都知道有程式難免就會有異常/錯誤，當我們程式碼越來越多的時候異常/錯誤出現的機率也就會多，雖然我們會有測試，但是測試用例並不能覆蓋所有可能，所以程式在生產上執行的時候進行異常/錯誤監控是有必要的。當有使用者進行某些操作，出現錯誤或異常我們就能馬上的收到資訊，並進行相應處理。如果程式沒有這樣的監控措施，錯誤就需要人肉去發現，這種發現效率是很低的。

web的異常/錯誤分類

執行時錯誤

比如程式碼執行有錯誤

捕獲錯誤的方法通常是下面兩種

  1. try...catch
  2. window.onerror = function(e){};

如果script跨域要捕獲錯誤，需要在script上加 crossorigin才能捕獲到錯誤。 上面就是捕獲執行時錯誤的常用方法。

資源錯誤

比如img、css、js 載入不成功，下面兩種方法都可以知道有哪些資源錯誤

  1. 通過performance.getEntries()可以拿到所有成功載入的資源，拿到成功載入的資源，再和需要載入的資源進行對比就可以知道哪些資源載入錯誤了。
  2. 資源的錯誤是不會冒泡，所以我們通過window.onerror = function(e){};是無法得知，但是資源的錯誤可以被捕獲，使用 window.addEventListener("error",function(e){},true) 事件捕獲這種方式就可以拿到資源錯誤的資訊。

上報錯誤的方式

目前上報錯誤的方式一般是通過img標籤來傳送一個請求，這樣既方便又快速。當然如果你想通過ajax方式也是可以的。

相關文章