- Generate source maps as part of your bundling process.
- Set up a unique identifier.
- Publish your source maps to New Relic.
1. Generate source maps
The process of generating source maps varies from one build system to another. With webpack, for example, your config.devtool should be ‘source-map’ for your production build. (If you use Browserify, use the –debug and –source-map-include-sources options on the command line or enable debug in the options.) The sample code below shows how to use webpack to create the source map when building in production environments.
2. Set up a unique identifier
Because the source map changes every time you update the source code, it’s important to know which release caused the error. The easiest way to do this is to integrate the publishing of source maps into your build process. That way, every time you release a new version of your frontend code, you send a source map to New Relic, which is then used to unminify errors from that specific release.
However, in case the URL is not uniquely identifiable, New Relic also provides an API for uniquely identifying releases to the Browser agent and connecting that to the source maps for the release.
3. Publish your source maps
You’ve just integrated source maps as part of your build process. Great job!
Don’t miss Announcing Source Map Support for New Relic Browser. And stay tuned: An upcoming post will walk you through New Relic’s frontend software architecture and Jenkins build process, and how we’ve included source maps as part of this flexible workflow.