我们如何跟踪Javascript错误？现有工具真的有效吗？

Question

今天我发现需要跟踪和检索Javascript错误堆栈跟踪来解决它们.

今天我们能够捕获所有其余的调用,这个想法是,一旦出现错误,自动发布该错误的堆栈跟踪以及其余已保存服务的响应,以便我们可以检测,重现和解决几乎相同的问题环境/局面.

作为一项要求,我们被要求制作一个可以包含而不会被侵入的模块,例如: 在一个JS中包含包含钩子逻辑的模块,将不是侵入性的,在各种JS文件中包含几行代码将是侵入性的.

目标是制作一个可以包含在已经开发的系统中的工具并跟踪错误事件(如控制台).

我已经读过这个跟踪器逻辑了:

• errorception.com/
• atatus.com/
• trackjs.com/
• airbrake.io/
• jslogger.com/
• getsentry.com/
• bugsense.com/
• qbaka.com/
• muscula.com/
• exceptionhub.com/
• debuggify.net/
• raygun.io/home

我们需要做类似的事情,跟踪错误并将其发送到我们的服务器.

正如"Dagg Nabbit"所说的那样...... "现在正在疯狂地发生错误,很难得到堆栈跟踪 ......"

所以,我们得到了很多付费产品,但它们是如何运作的呢？

在Airbrake中,他们使用stacktrace和window.onerror:

window.onerror = function(message, file, line) {
  setTimeout(function() {
    Hoptoad.notify({
      message : message,
      stack   : '()@' + file + ':' + line
    });
  }, 100);
  return true;
};

但我无法弄清楚堆栈跟踪何时真正使用.

在某些时候,stacktrace,raven.js和其他跟踪器需要try/catch.

1. 如果我们找到了制作全局包装器的方法会发生什么？
2. 我们可以调用stacktrace并等待捕获吗？

当客户端发生意外错误时,如何将堆栈跟踪发送到我的服务器？任何建议或良好做法？

Answer 1

从现在"疯狂"发生的错误中获取堆栈跟踪很困难,因为Error对象不可用window.onerror.

window.onerror = function(message, file, line) { }

还有一个新error事件,但此事件不会公开Error对象(尚未).

window.addEventListener('error', function(errorEvent) { })

很快,window.onerror将获得包含Error对象的第五个参数,并且您可以使用stacktrace.js来获取堆栈跟踪window.onerror.

<script src="stacktrace.js"></script>
<script>
window.onerror = function(message, file, line, column, error) {
    try {
        var trace = printStackTrace({e: error}).join('\n');
        var url = 'http://yourserver.com/?jserror=' + encodeURIComponent(trace);
        var p = new printStackTrace.implementation();
        var xhr = p.createXMLHTTPObject();

        xhr.open('GET', url, true);
        xhr.send(null);
    } catch (e) { }
}
</script>

在某些时候,Error API可能会标准化,但是现在,每个实现都是不同的,所以使用像stacktracejs这样的东西来获取堆栈跟踪可能很聪明,因为这样做需要为每个浏览器分别设置一个代码路径.

Answer 2

我是上面提到的TrackJS的联合创始人.你是对的,有时候获得堆栈跟踪需要一些工作.在某种程度上,异步函数必须包装在try/catch块中 - 但我们会自动执行此操作!

在TrackJS 2.0+,任何功能你进入一个回调(addEventListener,setTimeout,等)将被自动包装在一个try/catch.我们发现我们几乎可以捕获所有这些.

对于我们现在可以做的一些事情,你总是可以自己尝试/抓住它.我们提供一些有用的包装器来帮助,例如:

function foo() {
  // does stuff that might blow up
}

trackJs.watch(foo);