对前端异常window error捕获的全面总结

对于前端的异常捕获，我们都会知道onerror事件，但针对window的error事件的用法，其实是有区别的。

方式一： window.onerror = handleOnError

1. 能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。

2. 参数对应5个值（错误信息，所在文件，行，列，错误信息）

3. 函数体内用return true可以不让异常信息输出到控制台

方式二: window.addEventListener

1. 为捕获状态时（第三个参数为true）能捕获到js执行错误，也能捕获带有src的标签元素的加载错误。

为冒泡状态时（第三个参数为false）能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。

2. 参数对应1个值，异常事件，错误信息都在里面

3. 函数体内用preventDefault可以不让异常信息输出到控制台

示例代码：

<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onerror = handleOnError
window.addEventListener('error', handleListenerError, false);
function handleOnError(msg,url,h,l,e)
{
　　// some code
　　return true // 阻止浏览器console输出
}
function handleListenerError (eventErr){
　　// some code
　　eventErr.preventDefault() // 阻止浏览器console输出
}
function message1()
{
　　aalert("hello!")
}
function message2()
{
　　throw new Error('hello')
}
function message3()
{
　　console.log(a)
}
function message4()
{
  xhr = new XMLHttpRequest();
  xhr.open('GET',url)
  xhr.onreadystatechange=state_Change;
  xhr.send()
}
function state_Change()
{
　　if (xhr.readyState==4)
　　{
　　　　if (xhr.status==200)
    　　{
　　　　　　message3()
    　　} else {
    　　　　// somecode
    　　}
　　}
}
</script>
</head>
<body>
<input type="button" value="异常1" onclick="message1()" />
<input type="button" value="异常2" onclick="message2()" />
<input type="button" value="异常3" onclick="message3()" />
<input type="button" value="异常4" onclick="message4()" />
<script type="text/javascript" src="abc.js"></script>
<img src="abc.png"/>
</body>
</html>

对前端异常window error捕获的全面总结

猜你喜欢