前端錯誤的分類
- 即時運作錯誤：代碼錯誤
- 資源加載錯誤
錯誤的捕獲方式
即時錯誤的捕獲方式
- try..catch
- 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運作錯誤的捕獲
- 在script标簽增加crossorigin屬性
- 設定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>
結果，請求已經發出去了：
