{
  "$type": "site.standard.document",
  "path": "/nextjs-bugsnag-heroku-source-maps/",
  "publishedAt": "2020-01-04T08:00:00.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "nextjs",
    "bugsnag",
    "heroku",
    "source maps",
    "development"
  ],
  "textContent": "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.\n\nGenerating source maps\n\nZeit 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.\n\n[Code block (bash)]\n\nor if you are using yarn\n\n[Code block (bash)]\n\nThen 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'.\n\n[Code block (js)]\n\nUploading source maps post build on Heroku\n\nThe 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.\n\n[Code block (bash)]\n\nNow if you pull your app's config you should see some additional metadata.\n\n[Code block (bash)]\n\nNext lets install bugsnag's upload CLI.\n\n[Code block (bash)]\n\nor if you are using yarn\n\n[Code block (bash)]\n\nSweet, 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:\n\n[Code block (json)]\n\nThen in the post build script /scripts/upload-sourcemaps.sh:\n\n[Code block (bash)]\n\nThat's it, next time you release on heroku you should see source maps uploaded during the build process.\n\n[Image: build_with_maps.png]\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/nextjs-bugsnag-heroku-source-maps/",
  "title": "Setting up source maps (NextJS 9, BugSnag)"
}