Webpack

Upload source maps, and report builds to Bugsnag using Webpack

Use our Webpack plugin to:

  • Upload source maps to unminify stack traces and get human-readable method names, files, and line numbers.
  • Report information when you build your app to enable linking to code in your source control provider from the releases dashboard, timeline annotations, and stack traces.

Installation

Install the webpack-bugsnag-plugins module.

npm install --save-dev webpack-bugsnag-plugins

Reporting builds

webpack-bugsnag-plugins can auto detect source control info from .git, .hg and package.json. For detailed usage instructions, check out the readme.

Here’s an example to get you started:

/* webpack.config.js */

const { BugsnagBuildReporterPlugin } = require('webpack-bugsnag-plugins')

module.exports = {
  entry: './app.js',
  output: {
    path: __dirname,
    filename: './bundle.js'
  },
  plugins: [
    // It's a good idea to only run this plugin when you're building a bundle
    // that will be released, rather than for every development build
    new BugsnagBuildReporterPlugin({
      apiKey: 'YOUR_API_KEY',
      appVersion: '1.2.3'
    }, { /* opts */ })
  ]
}

Setting appVersion

There are a variety of ways to manage or inject version numbers in your build, so the following advice applies to whichever strategy you use.

  • Set appVersion in your notifier so that sessions and error reports are correctly associated with your reported builds
  • Keep the notifier appVersion in sync with the build reporter
  • appVersion should change any time your source code, or any of its dependencies changes

Uploading source maps

Support for uploading source maps is coming soon. Until then please see our source map support guide.