前端 JavaScript 错误收集

前言

最近有个页面写好后在 Chrome devtools 里运行正常，但是手机上运行时却出了问题，就想着在代码里添加下面的内容，到手机上显示错误消息

window.onerror = function (msg, url, lineNo, columnNo, error) {
  alert('Error: ' + msg + ' Script: ' + url + '\nPosition: ' + lineNo + ' / ' + columnNo
   + '\nStackTrace: ' +  error);
  return false;
};

可是到手机上一看，错误信息并没有打印出来，而是 Error: Script error
只好放狗 (Google) 一查，原来是跨域问题

<!--more-->

解决跨域问题

• script 添加 crossorigin 属性

  <script crossorigin src="...">

• 然后为 js 文件添加跨域 header Access-Control-Allow-Origin: *（怎样添加？）

收集 JavaScript 错误

在工作中，我们经常遇到本地无法重现的错误，我们可以将 onerror 捕获的错误信息提交到服务器，这样我们就知道用户在访问我们的网页时的 js 错误，方便 BUG 定位等。

window.onerror = function (msg, url, lineNo, columnNo, error) {
  var errorData = {
    msg: msg,
    url: url,
    lineNo: lineNo,
    columnNo: columnNo,
    error: error,
    ua: navigator.userAgent // 需要的调试的其它信息也可以收集，比如已登录的用户id
  };
  $.post('/js-logger', errorData);
  return false;
};

参数解析

msg, url, lineNo, columnNo， 这4个参数看名字就能知道大概意思了。
error，Error Object (object) 表示当前错误对象，包含当前错误比较详细的堆栈等信息，需要比较新的浏览器才有这个参数。

总结

这样我们就可以利用 onerror 收集用户的 JavaScript 报错信息了

完整的 JavaScript 错误收集系统见下面的参考链接。

参考链接

• https://blog.sentry.io/2016/0...

• https://medium.com/javascript...

• https://trackjs.com/blog/scri...

• BugHD for JavaScript 全面收集前端报错

原文地址：https://uedsky.com/2016-09/catch-javascript-error/
获取最佳阅读体验并参与讨论，请访问原文