I am trying to get a stack trace during run time for logging purposes in a React app.
I am doing it by calling:
let stackTrace = new Error().stack;
When testing with Jest, I got a stack trace like I expected - a trace with file names, method names and line numbers. Example:
Error
at Object.it (C:\Users\somePath\Logger.test.js:80:19)
at Object.asyncFn (C:\Users\somePath\jasmine-async.js:68:30)
at resolve (C:\Users\somePath\queueRunner.js:38:12)
...
Based on what I got, I filtered the first line which was always the method which did the logging itself, while I wanted the calling context, and that's why the first line is Object.it which is the Jest test.
After that I tried testing it by actually running a react app and sending a message to a backend running on my localhost. The stack trace I got looks different:
Error
at tryCatch (http://localhost:3000/static/js/bundle.js:101275:40)
at Generator.invoke [as _invoke] (http://localhost:3000/static/js/bundle.js:101509:22)
at Generator.prototype. [as next] (http://localhost:3000/static/js/bundle.js:101327:21)
...
How can I get a stack trace similar to the one I got on the Jest test, so when someone looks on it, he can view a normal stack trace?
EDIT:
After updating my scripts, I now see a better trace in terms of the name of the method who actually logged the error. It looks like this:
at onBlur (http://localhost:3000/static/js/main.chunk.js:538:82)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/1.chunk.js:51650:18)
However, is there also a way to get the name of the file where it happened in the original code instead of "http://localhost:3000/static/js/main.chunk.js:538:82"?