Too many source-maps cause rate-limiting from the sentry API

[CodySchaaf]

Environment

What version are you running? Etc.

"webpack-sentry-plugin": "^2.0.3"

Steps to Reproduce

We have many small bundles for certain features that are only available to certain clients. Each of these bundles creates its source map. With more than 50 source-map files we end up getting rate-limited during our deployment.

Expected Result

1) Either the source maps are batch uploaded. 2) A recommended setup to avoid this issue

Actual Result

Build crashes as the source maps fail to upload.

[lforst]

Hi, webpack-sentry-plugin is not maintained by Sentry. If you have an issue with it, please open one over at their repo https://github.com/40thieves/webpack-sentry-plugin.

Or you can use the official Sentry webpack plugin: https://www.npmjs.com/package/@sentry/webpack-plugin

[CodySchaaf]

Hi, webpack-sentry-plugin is not maintained by Sentry. If you have an issue with it, please open one over at their repo https://github.com/40thieves/webpack-sentry-plugin.

Or you can use the official Sentry webpack plugin: https://www.npmjs.com/package/@sentry/webpack-plugin

Oh, embarrassing. Thank you, I will switch to the official.

[CodySchaaf]

@lforst Is this likely to be a nonissue with the official plugin?

[lforst]

the official plugin uploads batched

[CodySchaaf]

@lforst sorry, hopefully last question, and apologies if this is the wrong place for these questions. Trying to get the new plugin running, and a lot of the documentation around this specific issue seems to point to legacy implementations. Quick question about how to transform the old plugin usage from the following:

Original Implementation

      new SentryPlugin({
        organisation: 'org-name',
        project: process.env.SENTRY_PROJECT_NAME,
        apiKey: process.env.SENTRY_API_KEY,
        filenameTransform: (filename) => `~/assets/react/${filename}`,
        release: (hash) => process.env.SOURCE_VERSION || hash,
        suppressConflictError: true
      }),
    // Creates sourcemaps and customizes the directive
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map',
      append: '\n//# sourceMappingURL=/assets/react/[url]',
      exclude: /vendor_bundle|DateFnsLocale-es/
    })

My first attempt worked in test environments, but on prod (because we use a CDN) the asset didn't match.

The path for this stack frame is https://example.cloudfront.net/assets/react/client_bundle.e375ad82cbb523fbebc5.js and the release value for this event is *****.

Sentry was not able to find a file in the release's artifacts that matches one of the following paths:

https://example.cloudfront.net/assets/react/client_bundle.e375ad82cbb523fbebc5.js
~/assets/react/client_bundle.e375ad82cbb523fbebc5.js

While the artifact bundle has:

Sourcemap Reference: /assets/react/client_bundle.e375ad82cbb523fbebc5.js.map

Failed Implementation

sentryWebpackPlugin({
        org: 'org-name',
        project: process.env.SENTRY_PROJECT_NAME,
        authToken: process.env.SENTRY_AUTH_TOKEN,
        release: { name: process.env.SOURCE_VERSION }
      }),
    // Creates sourcemaps and customizes the directive
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map',
      append: '\n//# sourceMappingURL=/assets/react/[url]',
      exclude: /vendor_bundle|DateFnsLocale-es/
    })

Note the append: '\n//# sourceMappingURL=/assets/react/[url]', in the second plugin.

For my next try, I updated that to append: '\n//# sourceMappingURL=~/assets/react/[url]', with a ~/. Is this the recommended way to handle this? Which I have not deployed yet.

I noticed that a lot of the issues around this issue talked about urlPrefix but that appears to be in the legacy version.

There are also sourcemaps.rewriteSources and rewriteFramesIntegration but I was a little unclear on whether those were meant to address this issue, or if my update above was enough...before I break Prod again.

[lforst]

/assets/react/client_bundle.e375ad82cbb523fbebc5.js.map is technically incorrect because it is an absolute path. I assume you don't actually have your assets live under this absolute path.

If you change the sourceMappingUrl to a relative path pointing to the source map from the source file, everything should work.

[CodySchaaf]

Our assets are stored in a flat structure in an s3 bucket named assets/react so on prod all the built code can be found at https://example.cloudfront.net/assets/react/ so for example https://example.cloudfront.net/assets/react/client_bundle.205ea7def2e26d2f79f8.js and https://example.cloudfront.net/assets/react/vendor_bundle.a7c14cf7e074571d2905.js regardless of current page path. Is that what you mean?

[CodySchaaf]

I might have solved it by investigating your suggestion or using a relative path. Just deleted the append option and let the plugins do their thing. Still need to verify in prod. Thanks for your help.