前言

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

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

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

解决跨域问题

  • script 添加 crossorigin 属性

    JavaScript
    <script crossorigin src="...">
  • 然后为 js 文件添加跨域 header Access-Control-Allow-Origin: *怎样添加?

收集 JavaScript 错误

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

JavaScript
window.onerror = function (msg, url, lineNo, columnNo, error) {
var errorData = {
msg: msg,
url: url,
lineNo: lineNo,
columnNo: columnNo,
error: error,
from: location.href,
ua: navigator.userAgent // 还可以添加更多调试所需信息,比如登录了的用户 id 等
};
$.post('/js-logger', errorData); // 如果需要跨域也可以直接使用图片来请求
return false;
};

参数解析

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

防止错误信息丢失

Ajax 或者图片请求如果出错后马上跳转,请求可能还没发送出去,我们可以优先使用 sendBeacon 来发送请求(不兼容的浏览器需要 fallback)

JavaScript
navigator.sendBeacon(url, data);

总结

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

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

参考链接

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