Source Maps

Understand supports un-minifying JavaScript via source maps. This feature lets you view source code context obtained from stack traces in their original untransformed form, which is particularly useful for debugging minified code (e.g. UglifyJS), or transpiled code from a higher-level language (e.g. TypeScript, ES6). We recommend you to incorporate source maps with your source code if you want to receive the full benefit of error tracking and monitoring.

The simplest way to start is to host your source maps alongside your bundled JS. The library will then look for the

//# sourceMappingURL=

comment in the minified file to know where to fetch the expanded source. This comment is inserted automatically by most tools that generate source maps.

The Understand handler will then automatically fetch the source code and source maps by scraping the URLs within the stack trace. However, you can legitimately decide to disable this feature. You can do this using the option disableSourceMaps when initializing the handler:

Understand.init({
  token : '<token>',
  disableSourceMaps: true
})

Here we provide a few examples of how source maps can be generated for your code:

UglifyJS

For example, when using UglifyJS you can generate source maps using a command like the follwing

uglifyjs --compress --source-map source.js.map --source-map-root http://<root url> --source-map-url test.js.map --output source.min.js source.js

Laravel Mix

Enabling source maps in Laravel Mix is easy as calling mix.sourceMaps() in your Mix file.

mix.js('resources/js/app.js', 'public/js')
  .sourceMaps({
    generateForProduction = true,
    devType = 'eval-source-map',
    productionType = 'source-map'
  });

You can change the type of source mapping by providing one of the available parameters.