How to upload source maps to Honeybadger

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
Copy

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 %}
Copy

1
2We can get the `appId` and `token` from Honeybadger project settings.
3
4
5~~~plaintext
6grunt upload_sourcemaps
Copy

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
Copy

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