Javascript: Sourcemaps not being applied

1

I’m having unusual difficulty getting sourcemaps to work with my project. I’ve been reading through the docs and forum comments, but can’t quite figure out what (if anything) I’m doing differently here.

I’m developing locally, and using webpack-sentry-plugin to automatically upload my sourcemaps during a build:

config.devtool = 'source-map'
config.plugins = [
      ...,
      new SentryPlugin({
          organisation: process.env.SENTRY_ORGANIZATION,
          project: process.env.SENTRY_PROJECT_NAME,
          apiKey: process.env.SENTRY_API_KEY,
          release: function () {
              const version = require('../package.json').version;
              return version;
           },
           suppressErrors: true
       })

The source file includes the sourceMappingUrl comment, which is set as a relative reference to the map file:

//# sourceMappingURL=app.bundle.js.map

During build, both the map and source files are uploaded to the correct release, prefixed with the tilde (~) character to indicate a relative path:

However, all subsequent error events still contain references to the minified code. I’ve validated the sourcemaps both locally and via sourcemaps.io, so I’m a bit baffled at what’s potentially going wrong here.

I have yet to try uploading with sentry CLI, but I can’t seem to get it to authenticate probably (even on a token with full permissions granted). However, this seems like a separate topic.

I was able to get Sentry CLI to upload my sourcemaps (with the rewrite option), but unfortunately I get the same results

Is there something that I’m missing here?

2

Is there an error on the event that was processed? And if so, what was it?

Have you double checked that the release you are uploading the artifacts to is the same release associated with the event?

Side note: if you uploaded your artifacts after the event was processed we do not go back and apply source maps retroactively.

3

Thanks for the reply.

I’m explicitly throwing an error in my code to trigger an event, and they are definitely being tracked in Sentry:

throw new Error("foo")

.

My release is essentially hardcoded right now, so both the sourcemaps and the events are associated with the same release.

Currently my workflow is build my project (which uploads the sourcemaps), and then navigate to the page in my app where the error is thrown. For good measure, I have even started deleting the entire issue prior to creating a new event.

Unfortunately, none of this has seemed to work so far :frowning:

4

Just updating this for anyone who comes across the same issue.

It appears that the cache-busting hash which was appended to my assets was preventing the uploaded sourcemaps from matching.

So for example, if my source file is being loaded as app.js?123456 then it, unfortunately, will not match the sourcemap app.js.map.

It seems to me that the query string should be ignored when matching, and there is an open PR to that effect which hasn’t seen any movement for a couple of months now.

My solution was to make the cache-busting hash part of my filename (ie app.123456.js), so that when sentry-webpack-plugin picks up my sources the hash will be included as well.

1 Like