捕获 JS 错误的最简单方法

Question

我一直在研究如何捕获 JavaScript 错误，然后将它们发送到我们自己的系统以进行 内部日志记录 （这样我们就可以尝试并在可能的情况下进行复制，并修复任何可能的错误）。到目前为止，我发现了相当多的付费服务：

TrackJS 看起来确实很有趣，但我们真的负担不起每个月再花更多的钱。然后我遇到了这个图书馆：

http://www.stacktracejs.com/#!/docs/stacktrace-js

不过我似乎无法让它继续下去。这是我正在尝试的：

window.onerror = function(msg, file, line, col, error) {
    StackTrace.fromError(error).then(callback).catch(errback);
};

var callback = function(stackframes) {
    var stringifiedStack = stackframes.map(function(sf) {
        return sf.toString();
    }).join('\n');
    console.log(stringifiedStack);
};

var errback = function(err) {
        console.log(err);
};

StackTrace.get().then(callback).catch(errback);

...我得到的结果是：

TypeError: ErrorStackParser is undefined

var stackframes = ErrorStackParser.parse(error);

其他人能否提出解决方案，或者看看我在 stacktrace.js 脚本中做错了什么？

更新： 在下面的帮助下，我现在至少可以让它做一些事情。结果你需要多个 js 库：

但是，我似乎仍然无法继续下去。

var callback = function(stackframes) {
    console.log(stackframes)
    var stringifiedStack = stamap(function(sf) {
        return sf.toString();
    }).join('\n');
    console.log(stringifiedStack);
};

var errback = function(err) { console.log(err.message); };

 try {
    foo;
 } catch(e) {
    StackTrace.get().then(callback).catch(errback);
 }

虽然我现在在控制台中记录了错误，但行号和错误消息几乎没有用:(示例：

.get()@https://cdn.steampunkjunkies.net/2014/js/scripts-all11.js:5:19706
{anonymous}()@https://cdn.steampunkjunkies.net/2014/js/scripts-all11.js:84:2

第84行是调用函数：

StackTrace.get().then(callback).catch(errback);

...第 5 行是 stacktrace.min.js 的缩小包含（在我的主 JS 文件中）

我对我们如何从中获得任何有用的信息感到有点困惑：/

更新 2：好的，我越来越近了！

var callback = function(stackframes) {
    var stringifiedStack = stackframes.map(function(sf) {
        return sf.toString();
    }).join('\n');
    alert(stringifiedStack);
};

var errback = function(err) { console.log(err.message); };

 try {
    var foo = 0;
    foo / 1;

    aklert;

    test;
 } catch(e) {
    StackTrace.fromError(e).then(callback).catch(errback);
 }

这现在打印出 alert() 消息：

{anonymous}()@https://cdn.steampunkjunkies.net/2014/js/scripts-all11.js:73:1

但是，这并不是我需要的全部信息。显然它需要一个好的消息（即var x cannot be undefined）

有人有什么想法吗？

我确实尝试将它们存储在一个数组中（带有行号和列号），但这并不适用于所有浏览器（具有讽刺意味的是，调试代码导致了致命的:)）

更新 3

好的，我们越来越近了:)

var callback = function(stackframes) {
    var stringifiedStack = stackframes.map(function(sf) {
        return sf.toString();
    }).join('\n');
    alert(stringifiedStack);
};

var errback = function(err) { console.log(err.message); };

window.onerror = function(msg, file, line, col, error) {
    var callback = reportWithMessage(msg);
    StackTrace.fromError(error).then(callback).catch(errback);
};


function reportWithMessage(message) {
    return function report(stack) {
        var yourErrorCollectorUrl = 'https://steampunkjunkiesdev.net/cgi-bin/debug.cgi';
        stack.message = message;
        StackTrace.report(stack, yourErrorCollectorUrl);
    };
}

 try {
    var foo = 0;
    foo / 1;

    aklert;

    test;
 } catch(e) {
    StackTrace.get().then(reportWithMessage()).catch(errback);
 }

92行就是这个}:

StackTrace.get().then(reportWithMessage()).catch(errback);

...所以它所做的一切都是告诉我调用了这个函数，但它没有实际错误的行号。

有什么想法吗？我无法相信捕获 JS 错误并将它们报告回脚本有多么复杂。您可能会想到，在过去 20 多年的互联网发展中，已经为我们开发人员开发了一些更符合要求的东西：/

Answer 1

对于您在开始使用时遇到的麻烦，我们深表歉意。请使用捆绑了所有依赖项的 dist/stacktrace.min.js。我提交了这个问题，以便我们可以更清楚地说明这一点，并避免其他人遇到你遇到的痛苦：https://github.com/stacktracejs/stacktrace.js/issues/140

关于错误消息，您似乎可以在错误报告系统中使用 window.onerror 的 msg 参数做一些事情。我知道这不是直截了当的，因为没有明显的地方可以存储消息。

这个怎么样？

window.onerror = function(msg, file, line, col, error) {
    var callback = reportWithMessage(msg);
    StackTrace.fromError(error).then(callback).catch(errback);
};


function reportWithMessage(message) {
    return function report(stack) {
        var yourErrorCollectorUrl = 'https://yourdomain.com/ec';
        stack.message = message;
        // HTTP POST with {message: String, stack: JSON}
        StackTrace.report(stack, yourErrorCollectorUrl);
    };
}

在 window.onerror 之外，您也许可以：

StackTrace.get().then(reportWithMessage()).catch(errorhandler);

更新：如果你发现错误，你想使用

StackTrace.fromError(error).then(...).catch(...);

捕获 JS 错误的最简单方法

Simplest way to catch JS errors

javascript

stack-trace

stacktrace.js