How can I get readable stacktrace while using webpack? Tried stacktrace.js

Question

I am using webpack with "devtool: nosources-source-map" in order to create a bundle that includes my javascript codes. But I also need to log the stack trace when an error occures. I need to log trace as it shows on browser console:

But in the end I got it as below;

In order to get the correct stack trace I have tried using https://www.stacktracejs.com/

window.onerror = function myErrorHandler(message, source, lineNo, colNo, errorObj) {
    StackTrace.fromError(errorObj).then(function(stackframes) {
        var stringifiedStack = stackframes.map(function(sf) {
            return sf.toString();
        }).join('\n');
        sendErrorToServer(message, source, lineNo, colNo, errorObj, stringifiedStack);
    }).catch(function(err) {
        console.log(err.message);
    });
    return false;
};

It provides a readable stack trace but in the console log it gets crossorigin errors.

How should I use stacktracejs and dont get the crossorigin errors? Or as an alternative how can I get readable stacktrace while using webpack?

Thank you for your time.

Answer 1

For those who are facing the same problem while using stacktracejs, you should consider a workaround existing in issues page of library.

https://github.com/stacktracejs/stacktrace-gps/issues/65

This worked for me.