前端錯誤的分類
- 即時運行錯誤(代碼錯誤)
- 資源加載錯誤
錯誤的調(diào)試方式
function fn(param) {
debugger; // 在Chorme中運行的時候代碼會停在這里
let result = param +1;
return result;
}
fn(12);
錯誤的捕獲方式
即時運行錯誤的捕獲方式
- try ... catch
function multiple(a, b) {
if ((typeof a != "number") || (typeof b != "number")) {
throw new Error("arguments should all be number!");
// 在這里拋出一個錯誤，并停止運行
// 會往上尋找最近的try處理
}
return a * b;
}
var c;
// 如果內(nèi)部的代碼拋出錯誤鸦采，則代碼直接跳入catch塊運行
// 且把錯誤對象賦值給catch括號內(nèi)的變量
try {
c = multiple("a", "b");
console.log("它們的乘積是",c);
} catch (e) {
console.log(e); // Error: arguments should all be number!
} finally {
//做一些請理性的工作
//finally塊是一定會執(zhí)行的
console.log("finally"); // finally
}
- window.onerror
用DOM2的addEventListener方式也是可以的
資源加載錯誤的捕獲方式
- object.onerror
- performance.getEntries
performance.getEntries().forEach(item=>{console.log(item.name)}) // 獲得所有資源文件
document.getElementsByTagName('img'); // 獲得所有img標(biāo)簽
所有img標(biāo)簽中备埃，沒有通過performance.getEntries()找到的資源财忽，就是加載錯誤的資源胜榔。
- Error事件捕獲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.addEventListener('error',function(e){
console.log('捕獲',e);
},true);
</script>
</head>
<body>
<script src="http://baidu.com/test.js"></script>
<!-- 輸出結(jié)果： -->
<!-- GET file://baidu.com/test.js net::ERR_FILE_NOT_FOUND -->
<!-- 捕獲 Event {isTrusted: true, type: "error", target: script, currentTarget: Window, eventPhase: 1, …} -->
</body>
</html>
只能通過Error事件捕獲才行鼠冕，通過Error事件是不行的涂滴。
注意查看以下的輸出結(jié)果枣宫，是沒有執(zhí)行到console.log('捕獲',e);的。
因為資源的error事件不會冒泡哎甲，這個需要注意楔敌。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.addEventListener('error',function(e){
console.log('捕獲',e);
});
</script>
</head>
<body>
<script src="http://baidu.com/test.js"></script>
<!-- 輸出結(jié)果： -->
<!-- GET file://baidu.com/test.js net::ERR_FILE_NOT_FOUND -->
</body>
</html>
延伸：跨域的js運行錯誤可以捕獲嗎啤挎，錯誤提示是什么，應(yīng)該怎么處理梁丘？
結(jié)論：可以捕獲侵浸，但是顯示結(jié)果只有Script error提示
微信圖片_20181130141515.png
要怎樣才能拿到詳細(xì)的信息呢？需要做以下兩個事情氛谜。
客戶端：在script標(biāo)簽中增加crossorigin屬性
服務(wù)端：設(shè)置js資源響應(yīng)頭Access-Control-Allow-Origin:*
上報錯誤的基本原理
采用Ajax通信的方式上報
可以掏觉，但是所有的錯誤監(jiān)控，都不是通過這種方式做的值漫。利用Image對象上報
所有監(jiān)控體系都采用這種方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.addEventListener('error',function(e){
console.log('捕獲',e);
},true);
</script>
</head>
<body>
<script src="http://baidu.com/test.js"></script>
<script type="text/javascript">
(new Image()).src = 'http://baidu.com/test?r=123';
</script>
</body>
</html>
查看Network澳腹，可以看到test?r=123這個請求已經(jīng)發(fā)出去了。
微信圖片_20181130143614.png
