Debug Minified JavaScript with Source Maps and Atatus

Fizer Khan -

Source Map is one of the most sought after feature in javascript error tracking. As a web developer you might want to improve your site’s performance and one sure shot way to do it is to minify your JavaScript. When you have a minified JavaScript, it makes debugging your JavaScript code a nightmare, since the browser’s developer tools will show you code that is virtually unreadable and does not point to the original location in your uncompressed source files. Source Maps are designed to make this problem a thing of the past.

What are Source Maps

Source Maps are the format that maps the lines and columns of your compressed, production source code, back to their original locations in the corresponding uncompressed source files. The modern browsers such as Chrome and Firefox, use this map file to support source level debugging. With source map, the stack trace that you see with the minified version can be deobfuscated.

You can generate source maps using tools like UglifyJS2 and Closure Compiler.

Debugging with Source Maps in Atatus

Let’s assume, our website is http://mywebapp.com. We have a source tree like this:

mywebapp/
mywebapp/js/script.min.js
mywebapp/js/script.min.map
mywebapp/js/main.js
mywebapp/js/token.js

We built our minified file (js/script.min.js) and source map (js/script.min.map) by running the UglifyJS2 from mywebapp/. It contains code from js/main.js and js/token.js.

Here’s an example Uglifyjs command run from mywebapp/ to generate the min and map files:

uglifyjs  js/main.js  js/token.js --output  js/script.min.js --source-map  js/script.min.map

Here is the same command for Closure Compiler :

java -jar compiler.jar --js js/main.js --js js/token.js --js_output_file js/script.min.js --create_source_map js/script.min.map

We have a minified javascript file at http://mywebapp.com/js/script.min.js. To use source map in Atatus, you need to enable source map in configuration as follows

atatus.config('YOUR_API_KEY', {
    enableSourcemap: true
}).install();
atatus.setVersion('1.0.0');

Then you have to upload the source map file from mywebapp/ to Atatus.

curl https://api.atatus.com/api/browser/sourcemap \
  -H "Authorization: token ADMIN_API_KEY" \
  -F version='1.0.0' \
  -F url=http://mywebapp.com/js/script.min.js \
  -F sourcemap=@js/script.min.map

Upload Parameters

  • ADMIN_API_KEY - Your Admin API key that you can find in your project settings.
  • version - A string identifying what version of your code this source map package is for. We recommend using the version number/string from your version control system.
  • url - The full URL of the minified file. Should start with http: or https:, which we’ll strip off.
  • sourcemap - The contents of the source map, as a multipart file upload.

Once you upload your source map files into Atatus, it will automatically map the stack traces that were generated in your minified code into the original sources.

This is what you will see without source map

and after the source is mapped

Get Started with Atatus

Ready to setup SourceMap with Atatus and make your debugging easier? Simply install the two line script in all your pages and enable source map in your Atatus configuration. Then all the errors that are generated would be automatically mapped for you - ready for fixing it right away!

Get started now. Sign up and deploy Atatus today.