How to upload source maps to Honeybadger

Arbaaz

By Arbaaz

on July 16, 2018

During the development of a chrome extension, debugging was difficult because line number of minified JavaScript file is of no use without a source map. Previously, Honeybadger could only download the source map files which were public and our source maps were inside the .crx package which was inaccessible to honeybadger.

Recently, Honeybadger released a new feature to upload the source maps to Honeybadger. We have written a grunt plugin to upload the source maps to Honeybadger.

Here is how we can upload source map to Honeybadger.

First, install the grunt plugin.

1npm install --save-dev grunt-honeybadger-sourcemaps

Configure the gruntfile.

1{% highlight JavaScript %}
2grunt.initConfig({
3  honeybadger_sourcemaps: {
4    default_options:{
5      options: {
6        appId: "xxxx",
7        token: "xxxxxxxxxxxxxx",
8        urlPrefix: "http://example.com/",
9        revision: "<app version>"
10        prepareUrlParam: function(fileSrc){
11          // Here we can manipulate the filePath
12          return filesrc.replace('built/', '');
13        },
14      },
15      files: [{
16        src: ['@path/to/**/*.map']
17      }],
18    }
19  },
20});
21grunt.loadNpmTasks('grunt-honeybadger-sourcemaps');
22grunt.registerTask('upload_sourcemaps', ['honeybadger_sourcemaps']);
23{% endhighlight %}
1
2We can get the `appId` and `token` from Honeybadger project settings.
3
4
5~~~plaintext
6grunt upload_sourcemaps

Now, we can upload the source maps to Honeybadger and get better error stack trace.

Testing

Clone the following repo.

1git clone https://github.com/bigbinary/grunt-honeybadger-sourcemaps

Replace appId and token in Gruntfile.js and run grunt test. It should upload the sample source maps to your project.

Stay up to date with our blogs. Sign up for our newsletter.

We write about Ruby on Rails, ReactJS, React Native, remote work,open source, engineering & design.