I would like to start using some monitoring framework for my website's JS. All of the JS is served when it's already minified, making it quite difficult to know what the problem really was. I looked at a few, but would appreciate it if anyone with experience could point me in the right direction.
-
Maybe this can be of help: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ – Sirko Jul 26 '14 at 11:48
-
Whenever there's a JS error, we generate a report on the server, but these reports are meaningless because the code is minified (line numbers are always 1...). I need a system that is able to add more information to these reports - not just something to help me with debugging – Luoruize Jul 26 '14 at 13:34
-
Does this answer your question? [Javascript: debug stack trace with source maps](https://stackoverflow.com/questions/24637356/javascript-debug-stack-trace-with-source-maps) – ADJenks Jun 16 '20 at 22:20
2 Answers
The JavaScript error reports that come from the browser will always have the minified line numbers because the JavaScript runtime itself cannot interpret the sourcemap to the original files.
To get a better error report, you need to process the data after it has been captured with the sourcemap. If you built sourcemaps with function names and code, it will totally re-write the stack trace to be much more clear. If not, it will at least point you at a better line and column number.
If you don't want to build this yourself, you can try out a third-party service like TrackJS. It will handle sourcemaps natively and help you setup your build pipeline to create the sourcemaps necessary.
Disclosure: I am one of the original founders of TrackJS.

- 630
- 4
- 18
Use this: https://github.com/mozilla/source-map
sourceMap.SourceMapConsumer
will translate the line numbers from source-mapped to original.

- 2,973
- 27
- 38