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

Question

今天我发现需要跟踪和检索 Javascript 错误堆栈跟踪来解决这些问题。

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

作为一项要求，我们被要求制作一个可以被包含而不会造成干扰的模块，例如: 将包含钩子(Hook)逻辑的模块包含在一个JS中，不会是侵入性的，在多个JS文件中包含多行代码就会是侵入性的。

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

我读过有关此跟踪器逻辑的内容:

• errorception.com/
• trackjs.com/
• atatus.com/
• airbrake.io/
• jslogger.com/
• getsentry.com/
• muscula.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

现在很难从“野外”发生的错误中获取堆栈跟踪，因为 window.onerror 无法使用 Error 对象。

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

还有一个new error event ，但此事件尚未公开 Error 对象。

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

很快，window.onerror 将得到 fifth parameter包含 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 之类的东西来获取堆栈跟踪可能是明智的，因为这样做需要每个浏览器有一个单独的代码路径。