Back to Blog

How to upload source maps to Honeybadger

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.


You might also like

If you liked this blog post, check out similar ones from BigBinary