zoukankan      html  css  js  c++  java
  • 对前端异常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>
  • 相关阅读:
    shell进行mysql统计
    java I/O总结
    Hbase源码分析:Hbase UI中Requests Per Second的具体含义
    ASP.NET Session State Overview
    What is an ISAPI Extension?
    innerxml and outerxml
    postman
    FileZilla文件下载的目录
    how to use webpart container in kentico
    Consider using EXISTS instead of IN
  • 原文地址:https://www.cnblogs.com/liyongquan/p/9180562.html
Copyright © 2011-2022 走看看