rhand's avatar
Level 6

Source Maps in Laravel Mix for Bugsnag only

For better debugging we decided to use a Webpack Bugsnag package . It helps automating source map uploads on npm run prod. For sending source files/ maps to Bugsnag we are now using the following in webpack.mix.js:

const mix = require('laravel-mix')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins')
...
if (mix.inProduction()) {
  mix.webpackConfig({
    devtool: 'source-map', 
    plugins: [
      new CleanWebpackPlugin({
        cleanStaleWebpackAssets: false,
        protectWebpackAssets: true,
        cleanOnceBeforeBuildPatterns: ['js/components/*'],
      }),
      new BugsnagSourceMapUploaderPlugin({
        apiKey: process.env.BUGSNAG_API_KEY,
        appVersion: process.env.BUGSNAG_APP_VERSION,
        publicPath: '*/js'
      })
    ],

    output: {
      chunkFilename: 'js/components/[name].js?id=[contenthash]',
    },
  })
} else {
  mix.webpackConfig({
    output: {
      chunkFilename: 'js/components/[name].js',
    },
  });
}
...

The issue is that this way the production sites now also load requests for source files. We do however not put source maps on the production servers. We only intend to upload them to Bugsnag.

I opened up a ticket with https://github.com/bugsnag/webpack-bugsnag-plugins/issues/69 on this, but as this is Laravel / Vue and Laravel Mix specific I was hoping to get some pointers here.

Exclude Source Maps on Production

What should I do to keep Bugsnag in the loop and send source files using their Webpack Bugsnag Plugins without added source file requests in production code?

Possible Solutions?

Was thinking I could do a second block and avoid the output. Other option is using https://github.com/yansern/laravel-mix-environments and only sending using mix.inTest() or mix.inDevelopment() so build when NODE_ENV is set for these environments.

But I must not be the only one doing this out here, right? Anyone care to share a setup?

0 likes
1 reply
rhand's avatar
rhand
OP
Best Answer
Level 6

Think I found a possible solution https://webpack.js.org/configuration/devtool/#production

hidden-source-map - Same as source-map, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.

Warning You should not deploy the Source Map file to the webserver. Instead only use it for error report tooling.

Please or to participate in this conversation.