Bugsnag-js: Source maps working in browser but not in bugsnag for webpack

[samrispaud]

In the browser, on JS errors, I'm pointed to the exact line in my JS file but on Bugsnag I get the line in my minified JS file. Has anyone successfully enabled automatic source maps with the UglifyJS webpack plugin? I've gone through all the documentation on this repo and things don't seem to be working. I can provide my webpack config or other info that may be useful. Thanks in advance!

[kattrali]

Thanks for the report, @samrispaud. Taking a look now.

[jmshal]

Have you checked to make sure the server your sourcemaps are being served from are available from Bugsnag sourcemap grabbing servers? If you're testing locally it likely won't work, however in production you should be able to see the proper line of code which has errored, as long as your server is serving them publicly/has Bugsnags IP on a whitelist.

[jmshal]

See http://docs.bugsnag.com/api/js-source-map-upload/#automatic-fetching for more info.

[samrispaud]

I've now made sure the assets and maps are publicly available. When I say
testing locally, I mean I'm serving the app and assets from an ngrok end
point at http://avhana-clinicals.ngrok.io/webpack/application.js and
http://avhana-clinicals.ngrok.io/webpack/application.js.map and I've
triggered a JS error to test thing out. This is what I'm seeing now. Is
there a way to trigger a different error that will allow me to test this?
ᐧ

On Fri, Jun 17, 2016 at 6:22 PM, Jacob Marshall [email protected]
wrote:

See http://docs.bugsnag.com/api/js-source-map-upload/#automatic-fetching
for more info.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/bugsnag/bugsnag-js/issues/147#issuecomment-226895333,
or mute the thread
https://github.com/notifications/unsubscribe/AKZbxAe0CDaicbJrtYGeBRo3Qt1JEh-Tks5qMx4WgaJpZM4I4v5b
.

[eanakashima]

@samrispaud any luck figuring this out? We've recently switched to using webpack with the uglifyjs plugin for our own dashboard js, so I don't think the plugin itself should be the issue. We've also had a few backend issues processing sourcemaps recently, so it's possible you could have been temporarily affected by one of those.

[samrispaud]

@eanakashima no luck. the only thing that worked for us was setting config.devtool = 'source-map' but when using uglifyjs the source maps break again. anything with eval stacktraces seems to break things. @jacobmarshall any insight into why uglifyjs is not compatible with source maps in bugsnag?

[jmshal]

@jacobmarshall any insight into why uglifyjs is not compatible with source maps in bugsnag?

We use webpack and uglifyjs where I work, and we have absolutely no issues with Bugsnag grabbing and correctly parsing our sourcemaps.

What do errors look like for you in Bugsnag? When you hover over each stacktrace frame does it turn bold? I'm just wondering if the issue is the stacktrace being _wrong_ or whether Bugsnag just hasn't found them.

Also could you please provide your webpack.config.js file (or at least the generated config object)?

[samrispaud]

@jacobmarshall so after investigating further and tweaking things a bit, when hovering over the stacktrace frame, the text turns bold and we do get a line number now. the problem is that it's a line number in the minified application.js file and not the separate js file where this code actually lives. is this expected? when i set config.devtool='source-map' the line in the individual js file is displayed instead of the line in the minified application.js but we can't use this in production. thanks for your help

// Example webpack configuration with asset fingerprinting in production.
var path = require('path');
var webpack = require('webpack');
var StatsPlugin = require('stats-webpack-plugin');

// must match config.webpack.dev_server.port
var devServerPort = 3808;

// set TARGET=production on the environment to add asset fingerprints
var production = process.env.NODE_ENV === 'production';

var config = {
  entry: {
    // Sources are expected to live in $app_root/webpack
    application: './webpack/application.js',
  },

  output: {
    // Build assets directly in to public/webpack/, let webpack know
    // that all webpacked assets start with webpack/

    // must match config.webpack.output_dir
    path: path.join(__dirname, '..', 'public', 'webpack'),
    publicPath: '/webpack/',

    filename: production ? '[name]-[chunkhash].js' : '[name].js',
  },

  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel',
        query:
          {
            presets: ['react', 'es2015'],
          },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
      },
    ],
  },

  plugins: [

    // must match config.webpack.manifest_filename
    new StatsPlugin('manifest.json', {
      // We only need assetsByChunkName
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true,
    }),
  ],
};

if (production) {
  config.plugins.push(
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: { warnings: false },
      sourceMap: true,
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify('production') },
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin()
  );
} else {
  config.devServer = {
    port: devServerPort,
    headers: { 'Access-Control-Allow-Origin': '*' },
  };
  config.output.publicPath = '//localhost:' + devServerPort + '/webpack/';
  // This source map config won't work for Busgnag but ok
  // because we only use this in local development
  config.devtool = '#cheap-module-eval-source-map';
}

module.exports = config;

[foxyblocks]

What happens if you remove the sourceMap option from the UglifyJs plugin and instead just have config.devtool = 'source-map'?

[samrispaud]

@wordofchristian using the 'source-map' fixes things if i am understanding you correctly but would like to use UglifyJs in production because of decreased build speed and size

[foxyblocks]

What I meant was that you should try keeping the uglify plugin but remove the source map option from it.

internally our production webpack config looks like this:

const dev = require('./development.config.js');

{
  devtool: 'source-map',
  // ...
  plugins: [
    ...dev.plugins,
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ],
}

[jmshal]

What I meant was that you should try keeping the uglify plugin but remove the source map option from it.

We specify the sourceMap option in our production build, not too sure whether removing it will make a difference (seeing as you're omitting it, and I'm not, and we both are seeing 👌 results). As long as devtool is set to source-map, @samrispaud should be good :+1:.

[samrispaud]

@jacobmarshall @wordofchristian @CodeHex confirming that this fixes things. thanks for your help! I removed the sourceMap option and made sure to include config.devtool = 'source-map'

My webpack.config.js now looks like this for reference for anyone else having this issue and Bugsnag errors look good:

if (production) {
  // This config is needed for Bugsnag to work properly with source maps
  config.devtool = 'source-map';
  config.plugins.push(
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: { warnings: false },
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify('production') },
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin()
  );
} else {
  config.devServer = {
    port: devServerPort,
    headers: { 'Access-Control-Allow-Origin': '*' },
  };
  config.output.publicPath = '//localhost:' + devServerPort + '/webpack/';
  // This source map config won't work for Busgnag but ok
  // because we only use this in local development
  config.devtool = 'cheap-module-eval-source-map';
}