JavaScript - 通过onerror事件收集错误报告

---

目录

• 主要参考
• window.onerror
• element.onerror

---

主要参考

• GlobalEventHandlers.onerror - Web APIs | MDN

---

window.onerror

JavaScript运行时错误，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()

• ErrorEvent接口

  提供了关于脚本或文件中报错的相关信息，包括message、filename、lineno、colno、error等属性。

• window.onerror()语法

  window.onerror = function(message, source, lineno, colno, error) { ... }
  

  • message：错误信息（字符串）；
  • source：发生错误的脚本URL（字符串）；
  • lineno：发送错误的行号（数字）；
  • colno：发送错误的列号（数字）；
  • error：Error对象（对象）

• 类同源限制

  当加载自不同域的脚本发送语法错误时，为避免信息泄露，浏览器将不会报告具体的错误信息，而代之以简单的“Script error”。

  可尝试通过CORS来越过此限制，具体需如下步骤：

  • 目标脚本文件需在响应头中添加Access-Control-Allow-Origin: *属性；

  • 页面引用目标脚本时，需添加crossorigin属性，如：

      <script type="text/javascript" src="http://a.com/a.js" crossorigin></script>
  

• 快捷实践

  window.onerror = function (msg, url, lineNo, columnNo, error) {
      var string = msg.toLowerCase();
      var substring = "script error";
      if (string.indexOf(substring) > -1) {
          alert('Script Error: See Browser Console for Detail');
      } else {
          var message = [
              'Message: ' + msg,
              'URL: ' + url,
              'Line: ' + lineNo,
              'Column: ' + columnNo,
              'Error object: ' + JSON.stringify(error)
          ].join(' - ');
  
          alert(message);
      }
  
      return false;
  };
  

element.onerror

当元素加载资源失败（如<img>或<script>）时，会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数

这些error事件不会向上冒泡到window

• element.onerror()语法

  element.onerror = function(event) { ... }
  

  Chrome浏览器中event对象示例：

  

• 应用场景：图片资源加载失败时的替换显示

  <img id="ELEMENT_ONERROR" src="res/a.png" />
  

  var imgTag = document.getElementById("ELEMENT_ONERROR");
  imgTag.onerror = function(event) {
  	this.onerror = null;
  	this.src = "res/NotFound.gif"
  }
  

  Tips: this.onerror = null 避免因替换资源同样加载失败，导致浏览器进入无限错误循环中

---