Upload source maps to un-minify JS errors

New Relic Browser supports the uploading of source maps.

Source maps support is primarily useful for "decoding" minified JavaScript. Minified JavaScript results in mostly useless error stack traces on New Relic Browser's JS errors page. Uploading source maps converts these errors to understandable stack traces, with useful references to code lines. This feature might also be useful for bundled or transpiled JavaScript code.

Access to this feature depends on your subscription level.

New Relic Browser gives you two options for using source maps:

  1. Upload source maps via the Browser UI
  2. Publish source maps to Browser via the API

This document will explain the first method: how to upload source maps via the UI, along with general troubleshooting help. For instructions on using the API method, see Push source maps via the API.

Import source maps via the New Relic UI

rpm.newrelic.com/browser > (select an app) > JS errors > (select a JS error group): You can easily drag and drop source map into the New Relic Browser UI to associate source maps with specific JavaScript files. You can also upload source maps via the API.

You can drag and drop, or upload, a source map file into the New Relic Browser UI to associate it with a specific JavaScript file. New Relic will then convert minified stack traces into un-minified traces and source code visible on the JS errors page.

To drag in or upload a source map to New Relic Browser, the source map must be on your local machine.

To associate a source map with an error stack trace on the JS errors page:

  1. Go to rpm.newrelic.com/browser > (select an app) > JS Errors, then select a JS error group. (Don't select an Errors without a stack trace group.)
  2. From the selected JS error group, select the error instance details tab (next to the Overview tab).
  3. Error groupings will have one or more frames listed that reference JavaScript files. Select the + icon on the right side of a frame to expand it. Then drag the matching source map file into the frame. Alternative option: when the frame is expanded, select find file to upload the file manually.

    An error frame with a gray strip on the left side indicate minified JS; a blue strip indicates it has had a source map applied.

Other JS error frame features include:

If you want to... Do this...
See more of the surrounding code Select Show 10 more lines above/below to view the code before or after the code in the stack trace.
See original, minified file information
  • For individual frame info: Next to the frame's source line and column, mouse over the ellipsis ellipsis.
  • For raw data of the entire stack trace: At the top of the error tab, select </> Raw.
Remove a source map

From an expanded stack trace frame, select Remove file.

Troubleshooting

If you have uploaded source maps to New Relic and still see minified stack traces, there are a few things to check. Using the API is the best way to investigate potential issues, by listing or deleting published source maps.

Typical problems Troubleshooting tips
URL mismatch

Each frame in the stack trace is associated with a specific JavaScript URL. That URL must match the JavaScript URL that was used when publishing the source map. Ensure that these URLs match exactly.

browser-source-map-ui-ss.png
Release name/ID mismatch

If the JavaScript URL is not versioned when you deploy your front end assets, a release name and release ID must be specified using the newrelic.addRelease API method, and also when publishing your source maps. Ensure that these strings match exactly.

browser release id ss.png
409 error: Combination of javascriptUrl, releaseName, and releaseId must be unique

If a source map file for a particular JavaScript URL is uploaded without a release name or ID specified, New Relic treats the URL as a unique identifier.

To resolve this, delete the source map that has NULL release name and ID values and re-upload all versions for that URL including those parameters. This will allow multiple versions of source maps for a particular JS URL.

Generate source maps

Having trouble even generating source maps? Every build system has its own instructions for generating source maps. For more specific details, please see the documentation for your particular tool. Below are source map generation instructions for two popular build systems:

Generate source maps with UglifyJS
Generate source maps using UglifyJS: When "uglifying" source files, specify a source map file name and include the original source content:

uglifyjs [source files]   \ 
     -o bundle.min.js   \ 
     --source-map bundle.min.js.map   \ 
     --source-map-include-sources   \ 
     -c -m
Generate source maps with webpack

Generate source maps using Webpack: In your production webpack config, simply specify source-map for the config.devtool property. The sourceMapFilename property of config.output is optional and defaults to [name].js.map.

devtool: 'source-map', 
output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].js', 
     sourceMapFilename: '[name].js.map', 
},

For more help

Recommendations for learning more: