pimterry / loglevel

:ledger: Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods
MIT License
2.6k stars 158 forks source link

Getting filename & line number as chunk.js #154

Closed Anush-DP closed 3 years ago

Anush-DP commented 3 years ago

I am using loglevel in my React app along with loglevel-plugin-remote and when I do log.error() I get filename and line number as chunk.js in the stack trace in my log server, but in the browser console, I get the proper filename with proper line number. Example:

2020-11-11T13:22:09.140Z: ERROR: Custom Error
    at http://localhost:3000/static/js/main.chunk.js:9130:55

Can you please tell me how I can know/get the actual file name and line number ? Thanks.

pimterry commented 3 years ago

This is probably due to your source maps configuration. I expect main.chunk.js is the output of your build process, and that that is the real javascript file that's running in your page (so that server stack trace is actually the correct one).

Your build process must also be producing a source map though, which turns main.chunk.js references back into references to the original raw code. https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ explains this in more depth. Browsers understand these source maps, and apply them automatically in their developer tools in most places, which is how it has the correct stacktrace there.

To get a correct stacktrace on your server, you need to get the right source map & source files for your UI, and manually convert from your main.chunk.js reference back to the raw source reference. I'm not sure how to do that, but it looks like https://www.npmjs.com/package/sourcemap-lookup will let you do that manually, or you can look at that package's code and how it uses https://www.npmjs.com/package/source-map and build your own automation for that.

Hope that helps! This is due to your build process and probably needs fixing on your server though, unrelated to loglevel, so I'm going to close this as an issue here for now.

Anush-DP commented 3 years ago

Thank you so much for your help @pimterry. I learnt something new today 😄 .