sourcemaps

[janusch]

Hey,
thank you very much for creating this great tiny library. It does serve me very well and has reported plenty of errors in the past.

However, since I started optimizing my javascript code with uglify.js and transpiling from ES6 the stack traces are not that useful anymore.
Is there a way to map the stack trace to the original js files with sourcemaps?
Looking through the docs I did not find such an option.

Cheers

[mperdeck]

Not that I know of. I would love to be able to do this myself.

I guess that in principle it could be done - a program could take a source map and the stack trace, and convert that to the "unminified" version of the stack trace. But I've never come across such a program.

Note that window.onerror gives you the column in the line where the exception occurred (at least some browsers do), making it a little bit less hard to find out where the exception happened.

[janusch]

@mperdeck thank you for answering!
I saw that some of the hosted error tracking services provide this option. I am also not sure on how to approach this right. Probably the best would be to handle the mapping server side after the error has been reported. In my case I am looking for something client side. The sourcemap would be downloaded when an error occurs and include the line numbers in the report. Somehow after webpack and minification often all code ends up on one line. So line number does not help much. You are right it does give a good indication though.

[rebolyte]

In case anyone finds this issue in the future looking for an answer, I am using JSNLog in conjunction with StackTrace.js, so that errors from my minified files get posted to the server with the correct function names and line numbers:

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {

    var callback = function(stackframes) {
        var stringifiedStack = stackframes.map(function(sf) {
            return sf.toString();
        }).join('\n');
        console.error(stringifiedStack);
        JL('serverLog').fatalException({
            msg: 'Exception! ' + stringifiedStack,
            errorMsg: errorMsg, 
            url: url, 
            lineNumber: lineNumber, 
            column: column
        }, errorObj);
    };
    var errback = function(err) { console.log(err.message); };

    StackTrace.fromError(errorObj).then(callback).catch(errback);

    // Tell browser to run its own error handler as well
    return false;
};

[lolaswift]

@rebolyte Hi James, brilliant idea. Really appreciated for sharing this. If understood it correctly, StackTrace is only used to convert the error messages into more readable ones and all the other duties are still done by jsnlog(log throttling and uploading, etc)? I have made jsnlog work by using the angularjs wrapper but I am a noob, still need to figure out where exactly I should place these codes. But really appreciated that you pointed me to the right direction. ---Lola