When developing a web application, you might encounter errors that are difficult to debug because they occur in compiled and minified code. Source maps help you to debug errors in the original source code, which can save you a lot of time and effort. Rollbar is a service that helps you monitor and debug errors in your web application, and it supports source maps. In this article, we will learn how to upload source maps from Rails Webpacker compiled files to Rollbar using Heroku.

Prerequisites

To follow this tutorial, you should have:

- A Rails application that uses Webpacker to compile assets.
- A Rollbar account with an access token.
- A Heroku account with a deployed Rails application.

1. Generate Source Maps

To generate source maps in Webpacker, you need to set the devtool option in your webpack configuration file. For example, you can add the following line to your configuration file:

This tells Webpacker to generate source maps for your assets. You can also use other devtool options, such as eval-source-map or cheap-source-map, which produce inline source maps. For more information on devtool options, see the [Webpack documentation](https://webpack.js.org/configuration/devtool/).

2. Retrieve Rollbar Access Token

To retrieve your Rollbar access token, go to your Rollbar dashboard, click on the project you want to use, and go to the Settings tab. You will see your post_server_item access token under the Access Tokens section.

3. Switch on Heroku Labs Metadata

Heroku Labs Metadata allows you to retrieve metadata about your application at runtime, including the commit SHA of the current release. To enable Heroku Labs Metadata, run the following command:

This will enable the runtime-dyno-metadata feature for your application, and makes available a HEROKU_SLUG_COMMIT wich we can use for version control of our source maps in rollbar.

4. Add Rake Task to upload source maps

To upload source maps to Rollbar, we will create a Rake task that runs when a new release is deployed. To do this, create a new task in your lib (Gist HERE).

This code defines a Rake task called source_maps:upload that uploads all source map files in the public/packs/js directory to Rollbar. The task uses the HTTParty gem to make a POST request to the Rollbar API with the access token, minified URL, source map file, and code version. The code version is retrieved from the HEROKU_SLUG_COMMIT environment variable, which is set by Heroku when a new release is deployed. The application host is retrieved from the default_url_options of your Rails application.

Keep in mind that this will only work after your assets have been precompiled for production.

5. Add Rake Task to Procfile

To run the Rake task when a new release is deployed, you need to add it to your Procfile. Add the following line to your Procfile:

This tells Heroku to run the source_maps:upload Rake task after each release is deployed.

Conclusion

In this article, we learned how to upload source maps from Rails Webpacker compiled files to Rollbar using Heroku. We saw how to generate source maps, retrieve the Rollbar access token, switch on Heroku Labs Metadata, and add a Rake task to upload source maps to Rollbar. With this setup, you can easily debug errors in your web application and improve the user experience for your users.