Using JS source-maps in production

Production code before ships goes through a bunch of preparation steps. Code becomes nonhuman friendly. Read and debug transpired, minified and uglified JS code is very hard and sometimes impossible.

To keep code readable build tools adds source-maps files. Devtools lookup for the

//# sourceMappingURL=bundle.js.map

in the end of each bundle and uses it to set traces between minified code and sources.

Leaving source-maps files reference and files itself in prod env is dangerous. Your source code could be stolen and this doesn’t lead to any props.

Build tools like webpack support options to handle this issue. You could use one of the options hidden-source-map or nosources-source-map.

hidden-source-map option generates regular source maps but doesn’t include reference in the JS file to it. Please avoid publishing these map files.

nosources-source-map generates maps without sourceContent but exposes filenames and structure. These sources could be deployed to the webserver.

Working with production source maps

Using chrome dev tools to add source maps to the prod code.

To see sources for the code in prod env you code add source maps manually.

1. Checkout to the actual prod state commit. And run prod build with source-maps flag on.
2. Go to the sources tab in the dev tools.
3. Select bundle file. And set the related source map file in the context menu by “Add source map…”.

This solution is very helpful if you are looking for a quick way to see original sources of the code without any build pipeline changes.

Upload source-maps to the server available only via VPN connection.

Storing source-maps for the build on the server available only via VPN connection will not expose your code to the world and will let you debug it properly. Another positive thing here is that source-maps files fetches by browser only when devtools opened for the page, this means there has no performance impact in that case.

Debug/report tools that support hidden source maps.

Some tools analytic and error catching tools like sentry and datadog has their own CI solutions for hidden source-maps upload that could be integrated with your pipeline.

Conclusion

Hidden source maps is a great thing that unveils a treasure of the safe debug in the production environment. If you didn't use it before try it. Possibly it could save a lot of time while you figuring out the reason for the production issue.