webpack-bugsnag-plugins

webpack-bugsnag-plugins copied to clipboard

Hi team,

We are using Bugsnag in our React app built by webpack. In order to get more readable stacktrace, I'd like to upload source map when building it. However, it is deployed as a different file name from generated by webpack. (eg. app.js -> app.[digest].js)

Currently, minifiedUrl is automatically determined from publicUrl and file name, but I'd like to specify minifiedUrl directly with wildcards. For example:

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

module.exports = {
  entry: './app.js',
  devtool: 'source-map',
  output: {
    path: __dirname,
    filename: './bundle.js',
    publicPath: 'https://your-app.xyz/assets/'
  },
  plugins: [].concat(
    // 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
    isDistEnv
      ? new BugsnagSourceMapUploaderPlugin({
          apiKey: 'YOUR_API_KEY',
          appVersion: '1.2.3',
          minifiedUrl: 'https://your-app.xyz/assets/bundle.*.js'
        })
      : []
  )
}

WDYT?

Hey @wata727.

I think the use case you describe works when a webpack build results in a single output file. However, it is very common for webpack to output multiple "chunks". In which case a single minifiedUrl would not be sufficient.

This isn't the first time the flexibility of this logic has come up though – and I have a suggestion as to how we could make it better. Currently the minifiedUrl is determined using this logic:

https://github.com/bugsnag/webpack-bugsnag-plugins/blob/07ffe2a62b91dd96571d75ce16fae9475a4e3a27/source-map-uploader-plugin.js#L51-L58

If there was a configuration option for BugsnagSourceMapUploaderPlugin that took those components as input and returned the URL, would this enable you to fix your issue? e.g.

new BugsnagSourceMapUploaderPlugin({
  apiKey: 'YOUR_API_KEY',
  appVersion: '1.2.3',
  getMinifiedUrl: (publicPath, localPath) => {

    // the current/default behaviour
    return url.resolve(publicPath.replace(/[^/]$/, '$&/'), source).toString()

    // your use-case?
    return url.resolve(
      publicPath.replace(/[^/]$/, '$&/'),
      source.replace(/\.js$/, '.*.js')
    ).toString()

    // or more simply! (N.B. this won't scale if your
    // webpack build starts outputting multiple chunks)
    return 'https://your-app.xyz/assets/bundle.*.js'

  }
})

Thanks @bengourley

Yes, currently we have a single output file. Maybe the getMinifiedUrl would be helpful for us. However, I guess a [name] is better if it can work. For example:

new BugsnagSourceMapUploaderPlugin({
  apiKey: 'YOUR_API_KEY',
  appVersion: '1.2.3',
  minifiedUrl: 'https://your-app.xyz/assets/[name].*.js'
})

By the way, now we are using own ruby scripts to upload source map to Bugsnag. We'd love to switch this plugin If supports this feature and Webpack4 :)

Hi @wata727. I'm just picking this up again to see what we can do about it, and I'd like to understand how/why your assets on disk don't have the [hash] component but they do in the browser URL.

Can you share with me a basic example that illustrates the problem? Thanks.

Hi @bengourley. Thanks for your attention.

For historical reasons, we are giving a hash digest to assets in a way different from Webpack. In a Ruby on Rails project, because of helper methods, asset management by Sprockets is mainstream, and we are struggling to coexist with Webpack.

For the above reasons, in our project, Webpack builds code and Sprockets gives hash digests to assets.

We use rails and webpack and use the https://github.com/danethurber/webpack-manifest-plugin plugin to generate a json hash that rails then uses in the same way as it uses the sprockets asset manifest file.

There are also alternatives (https://github.com/rupurt/webpack-sprockets-rails-manifest-plugin) to solving this issue.

Thanks for your information. However, I thought that this option helps us before completing to migrate to these plugins... Since it is a workaround to the last, it is not a very important request for me now. Feel free to close this issue if necessary.

Hi @bengourley,

I really want the feature recently but this issue can be reopened?

I create a patch and try it on my company system but it works! Here is my patch:

https://github.com/ybiquitous/webpack-bugsnag-plugins/commit/3f793132a47f94016c654018c3afd8e360a7dab8

diff --git a/source-map-uploader-plugin.js b/source-map-uploader-plugin.js
index 6a70295..94ad1d6 100644
--- a/source-map-uploader-plugin.js
+++ b/source-map-uploader-plugin.js
@@ -20,6 +20,7 @@ class BugsnagSourceMapUploaderPlugin {
     this.overwrite = options.overwrite
     this.endpoint = options.endpoint
     this.ignoredBundleExtensions = options.ignoredBundleExtensions || [ '.css' ]
+    this.minifiedUrl = options.minifiedUrl
     this.validate()
   }
 
@@ -103,12 +104,16 @@ class BugsnagSourceMapUploaderPlugin {
     const opts = {
       apiKey: this.apiKey,
       appVersion: this.appVersion,
-      minifiedUrl: sm.url,
       minifiedFile: sm.source,
       sourceMap: sm.map
     }
     if (this.endpoint) opts.endpoint = this.endpoint
     if (this.overwrite) opts.overwrite = this.overwrite
+    if (typeof this.minifiedUrl === 'function') {
+      opts.minifiedUrl = this.minifiedUrl(sm.url)
+    } else {
+      opts.minifiedUrl = sm.url
+    }
     return opts
   }
 }

Of course, this patch is just a PoC and it seems that there must be a better way, but it works on my case at least.

I would be so happy if you could re-consider the issue. 🙏

Sorry, I missed the usage. It is as follow:

new BugsnagSourceMapUploaderPlugin({
  apiKey: process.env.BUGSNAG_API_KEY,
  appVersion: process.env.BUGSNAG_APP_VERSION,
  overwrite: true,
  minifiedUrl: (url) => `http*://*foo-cdn.net/${url.replace(/^\/+/, '')}`,
})

Hi @ybiquitous

Now re-opened and we plan to take a fresh look at this when priorities allow.

Thank you so much! I'm looking forward to good news 😊