天天看點

前端錯誤監控了解前端錯誤的分類錯誤的捕獲方式上報錯誤的基本原理

前端錯誤的分類

  • 即時運作錯誤:代碼錯誤
  • 資源加載錯誤

錯誤的捕獲方式

即時錯誤的捕獲方式

  1. try..catch
  2. window.onerror

資源加載錯誤

1、object.onerror

2、performance.getEntries()

// 在浏覽器Console輸入如下代碼,可檢視加載的資源
performance.getEntries().forEach(item => { console.log(item.name) })
           

3、Error事件捕獲

例子:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>錯誤監控</title>
</head>
<body>
  <script type="text/javascript">
    window.addEventListener('error', function(e) {
      console.log('捕獲', e)
    }, true) // 此處必須為true,true為捕獲,false為冒泡
  </script>
  <script src="//baidu.com/test.js" charset="utf-8"></script> // 模拟加載一個不存在的資源
</body>
</html>
           

由于加載的資源其實不存在,是以肯定會報錯,此時可檢視捕獲結果

前端錯誤監控了解前端錯誤的分類錯誤的捕獲方式上報錯誤的基本原理

跨域的js運作錯誤的捕獲

  1. 在script标簽增加crossorigin屬性
  2. 設定js資源響應頭Access-Control-Allow-Origin:*(服務端)

上報錯誤的基本原理

1、采用Ajax通信的方式上報

2、利用Image對象上報

舉例:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>錯誤監控</title>
</head>
<body>
  <script type="text/javascript">
    (new Image()).src = 'http://baidu.com/testjk?r=test'
  </script>
</body>
</html>
           

結果,請求已經發出去了:

前端錯誤監控了解前端錯誤的分類錯誤的捕獲方式上報錯誤的基本原理