捕获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未定义

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

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

这个怎么样？

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