Setting up source maps (NextJS 9, BugSnag)

I recently set up bugsnag and had to fiddle around to get source maps working. I wanted to share my setup in case it is useful to anyone else out there. I'm using NextJS 9 and hosting my application on Heroku. This guide assumes you have already installed and configured bugsnag in your NextJS app.

Generating source maps

Zeit provides a nice plugin to generate source maps as part of your build: https://www.npmjs.com/package/@zeit/next-source-maps. To setup source maps install this package.

[Code block (bash)]

or if you are using yarn

[Code block (bash)]

Then in your next.config.js import the plugin and configure it. I'm using a few other plugins here withOffline for PWA support, and withBundleAnalyzer to check the size of the resulting bundle. The key items are withSourceMaps and setting devtool: 'hidden-source-map'.

[Code block (js)]

Uploading source maps post build on Heroku

The first thing you should do is enable dyno metadata. This will give you access to the build and dyno metadata so we can properly link releases to their code.

[Code block (bash)]

Now if you pull your app's config you should see some additional metadata.

[Code block (bash)]

Next lets install bugsnag's upload CLI.

[Code block (bash)]

or if you are using yarn

[Code block (bash)]

Sweet, now we have all the info we need to tell bugsnag about this release. We can set up a post build task that runs a script to upload our source maps. Lets add that to package.json:

[Code block (json)]

Then in the post build script /scripts/upload-sourcemaps.sh:

[Code block (bash)]

That's it, next time you release on heroku you should see source maps uploaded during the build process.

[Image: build_with_maps.png]

Read the original post with all embeds and interactive content at https://rants.broonix.ca/nextjs-bugsnag-heroku-source-maps/