javascript - 捕获 JS 错误的最简单方法

Question

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

• http://newrelic.com/sp/javascript-errors
• https://trackjs.com/
• https://raygun.io

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 库:

• https://github.com/stacktracejs/stacktrace.js
• https://github.com/stacktracejs/error-stack-parser
• https://github.com/stacktracejs/stack-generator

然而，我似乎仍然无法让它继续下去。

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(...);