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

对于前端的异常捕获,我们都会知道onerror事件(当然还有try,catch),但针对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可以不让异常信息输出到控制台

 

注:如果script的src是非同源的跨域引用则需要在标签上加crossorigin参数,并且配置一下服务器,设置静态资源Javascript的Response为Access-Control-Allow-Origin'才可以。

 

示例代码:

<!doctype html>
<html> <head> <script type="text/javascript"> window.onerror = handleOnError
window.addEventListener('error', handleListenerError, true); function handleOnError(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {   // 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>
<script type="text/javascript" src="abc.js" crossorigin></script> <img src="abc.png"/> </body> </html>

 

posted @ 2018-06-13 22:34  大地长空  阅读(8063)  评论(0编辑  收藏  举报