javascript - Simplest way to catch JS errors - Stack Overflow

admin管理员组

文章数量:1406942

I've been doing some research into how we can catch JavaScript errors, and then send them off to our own system for internal logging (so we can try and replicate where possible, and fix any possible bugs). So far I have found quite a few paid services:

• /

The TrackJS one does look interesting, but we really can't afford to be spending out yet more money each month. I then came across this libray:

!/docs/stacktrace-js

I can't seem to get it going though. Here is what I'm trying:

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

... and all I get back is:

TypeError: ErrorStackParser is undefined

var stackframes = ErrorStackParser.parse(error);

Can anyone else suggest a solution, or see what I'm doing wrong with the stacktrace.js script?

UPDATE: With the help below, I was able to at least get it to do something now. Turns out you need multiple js libs:

• .js

However, I still can't seem to get it going.

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);
 }

While I now get errors logged in the console, the line numbers and error messages are less than useless :( Example:

.get()@.js:5:19706
{anonymous}()@.js:84:2

Line 84 is the caller function:

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

...and line 5, is the minified include of stacktrace.min.js (in my main JS file)

I'm a bit baffled as to how we can even get any useful information out of this :/

UPDATE 2: Ok, I'm getting closer!

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);
 }

This now prints out an alert() message:

{anonymous}()@.js:73:1

However, thats not all the information I need. Obviously it needs a nice message (i.e var x cannot be undefined)

Anyone got any ideas?

I did try storing them in an array (with the line number and col number), but that doesn't work across all browsers (and ironically, the debug code caused a fatal :))

UPDATE 3

Ok, well we are getting closer :)

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 = '.cgi';
        stack.message = message;
        StackTrace.report(stack, yourErrorCollectorUrl);
    };
}

 try {
    var foo = 0;
    foo / 1;

    aklert;

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

Line 92 is this one}:

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

...so all its doing, is telling me that this function was called, but it no line number for the actual error.

Any ideas? I can't believe how plicated it is to catch JS errors and just report them back to a script. You would have thought with the last 20+ years of the Internet developing, something more pliant would have been developed for us developers :/

I've been doing some research into how we can catch JavaScript errors, and then send them off to our own system for internal logging (so we can try and replicate where possible, and fix any possible bugs). So far I have found quite a few paid services:

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

The TrackJS one does look interesting, but we really can't afford to be spending out yet more money each month. I then came across this libray:

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

I can't seem to get it going though. Here is what I'm trying:

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

... and all I get back is:

TypeError: ErrorStackParser is undefined

var stackframes = ErrorStackParser.parse(error);

Can anyone else suggest a solution, or see what I'm doing wrong with the stacktrace.js script?

UPDATE: With the help below, I was able to at least get it to do something now. Turns out you need multiple js libs:

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

However, I still can't seem to get it going.

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);
 }

While I now get errors logged in the console, the line numbers and error messages are less than useless :( Example:

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

Line 84 is the caller function:

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

...and line 5, is the minified include of stacktrace.min.js (in my main JS file)

I'm a bit baffled as to how we can even get any useful information out of this :/

UPDATE 2: Ok, I'm getting closer!

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);
 }

This now prints out an alert() message:

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

However, thats not all the information I need. Obviously it needs a nice message (i.e var x cannot be undefined)

Anyone got any ideas?

I did try storing them in an array (with the line number and col number), but that doesn't work across all browsers (and ironically, the debug code caused a fatal :))

UPDATE 3

Ok, well we are getting closer :)

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/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);
 }

Line 92 is this one}:

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

...so all its doing, is telling me that this function was called, but it no line number for the actual error.

Any ideas? I can't believe how plicated it is to catch JS errors and just report them back to a script. You would have thought with the last 20+ years of the Internet developing, something more pliant would have been developed for us developers :/

• javascript
• stack-trace
• stacktrace.js

Share Improve this question Follow edited Nov 23, 2015 at 6:21 Eric Wendelin 44.4k99 gold badges7272 silver badges9494 bronze badges asked Nov 9, 2015 at 15:44 Andrew NewbyAndrew Newby 5,22677 gold badges5050 silver badges8686 bronze badges 7

• 1 ErrorStackParser is undefined makes me feel like it's not installed / imported on your file. Did you follow the installation guide ? – pistou Commented Nov 9, 2015 at 15:50
• @pistou thanks for the reply. I run npm install stacktrace-js to get the JS file - then I include the JS file (prior to my own code), and finally in my own code I have the code in the above. Maybe I'm missing a step? – Andrew Newby Commented Nov 9, 2015 at 15:58
• I don't know StackTrace.JS but as far as I understand their website, it seems like stacktrace-js and error-stack-parser are two separated libraries (maybe one depending on the other) – pistou Commented Nov 9, 2015 at 16:01
• @pistou - ah, well that would explain part of it! I'm used to all the modules for lib being in one download. I don't get any errors now, but I'm a bit baffled as to the error stack being outputted: .get()@https://cdn.steampunkjunkies/2014/js/scripts-all11.js:8:19706 {anonymous}()@https://cdn.steampunkjunkies/2014/js/scripts-all11.js:25:1 . Line 25 is the place where the debug is called: StackTrace.get().then(callback).catch(errback); ... but it doesn't seem to give any other info (I've intentionally left a syntax error in the file, but nothing es up) – Andrew Newby Commented Nov 9, 2015 at 16:19
• @AndrewNewby you should post your solution that resolved this error, and then ask a new question for additional help – Adjit Commented Nov 9, 2015 at 17:28

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

I'm sorry for your troubles getting started. Please use dist/stacktrace.min.js which has all dependencies bundled. I filed this issue so we can make this clearer and others avoid the pain you've encountered: https://github./stacktracejs/stacktrace.js/issues/140

Regarding the Error message, it seems like you can do something with the msg parameter of window.onerror in your error reporting system. I understand that it's not straight-forward given there is no obvious place to store messages.

How about this?

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./ec';
        stack.message = message;
        // HTTP POST with {message: String, stack: JSON}
        StackTrace.report(stack, yourErrorCollectorUrl);
    };
}

Outside of window.onerror you can maybe do:

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

UPDATE: In the case where you've caught an Error, you want to use

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

本文标签： javascriptSimplest way to catch JS errorsStack Overflow