Sourcemaps Not Injected with a Debug ID and Ignore List Not Working

[ajai-am]

Hi Team,

I'm facing an issue where sourcemaps are not being injected with a debug ID, and my ignore list is not being considered, although the uploading of sourcemaps seems to be working correctly.

Installed Packages

"@sentry/react": "^8.36.0",
"@sentry/webpack-plugin": "^2.22.6",
"@nx/webpack": "19.8.6",

Project Structure

I have a monorepo React application built using Nx with Webpack.

Steps Followed

I followed the steps mentioned in the Sentry documentation for uploading sourcemaps with Webpack:
Uploading Sourcemaps with Webpack

I used the following command for the setup:

npx @sentry/wizard@latest -i sourcemaps

Webpack Configuration

Here is the relevant part of my webpack.config.js:

sentryWebpackPlugin({
  authToken: process.env.SENTRY_AUTH_TOKEN,
  org: 'orgName',
  project: 'projectName',
  debug: true,
  assets: './dist/**/*',
  ignore: [
    'mockServiceWorker.js',
    '**/styles.*.js',
  ],
})

Terminal Output

When running the build command:

nx run projectName:build:production

I see the following debug output:

[sentry-webpack-plugin] Debug: No `sourcemaps.assets` option provided, falling back to uploading detected build artifacts.
[sentry-webpack-plugin] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: /*/mockServiceWorker.js
[sentry-webpack-plugin] Debug: Could not determine source map path for bundle: /*/styles.44cd59f2baeb4652.js - Did you turn on source map generation in your bundler?

Issue 1

the output from one of the js file:

config.3848a5bcd19d60a566b0.js

(_._sentryDebugIds=_._sentryDebugIds||{},_._sentryDebugIds[e]="4a63fb18-e873-48d1-a3b4-5d76a45cc553",_._sentryDebugIdIdentifier="sentry-dbid-4a63fb18-e873-48d1-a3b4-5d76a45cc553")}catch(_){}}();

has the following line added but in

config.3848a5bcd19d60a566b0.js.map

{
    "version": 3,
    "file": "config.3848a5bcd19d60a566b0.js",
    "mappings": "qhBAAO,MAAMA,UAAY,CAEvBC,oBACE,+qBAUFC,eAAgB,yDAChBC,4BACE,iEAiBFC,gBAAiB,cACjBC,gBAAiB,SAEjBC,eAAgB,OAChBC,WACE,kGACFC,mBAAoB,MACpBC,eAAgB,KAEhBC,iCAA6BC",
    "sources": [
      "webpack:///config/dev.ts"
    ],
    "sourcesContent": [
      // contents goes here
    ],
    "names": [
        // name goes here
    ],
    "sourceRoot": ""
  }

the sentry debug id is missing

Issue 2

Contents of styles.44cd59f2baeb4652.js

Some how this file is created without a *.js.map file, when investigated it had only the code related to sentry.

Note: I have a files with the pattern of styles.xxx.css & styles.xxx.css.map

!(function () {
  try {
    var e = "undefined" != typeof window
      ? window
      : "undefined" != typeof global
      ? global
      : "undefined" != typeof self
      ? self
      : {},
      d = new e.Error().stack;
    d &&
      ((e._sentryDebugIds = e._sentryDebugIds || {}),
      (e._sentryDebugIds[d] = "09fb3110-e98d-411a-8aff-1397084be5ca"),
      (e._sentryDebugIdIdentifier =
        "sentry-dbid-09fb3110-e98d-411a-8aff-1397084be5ca"));
  } catch (e) {}
})();
var _global = "undefined" != typeof window
  ? window
  : "undefined" != typeof global
  ? global
  : "undefined" != typeof self
  ? self
  : {};
(_global.SENTRY_RELEASE = { id: "xxxx" }),
  (self.webpackChunk = self.webpackChunk || []).push([
    [869],
    { 47757: () => {} },
    (e) => {
      var d;
      (d = 47757), e((e.s = d));
    },
  ]);

Additional Notes

• Ensured that the output folder is cleaned before installing the Sentry plugin.
• Confirmed that source map generation is enabled in the bundler.

I would appreciate any guidance or solutions to these issues. Thank you!

[lforst]

Issue 1

Don't worry about this. We are not writing debugId fields to your source maps so I wouldn't go looking for them.

Issue 2

If some of your .js files are created without a corresponding .js.map file that is in 99.999% of the cases a configuration on your end. You likely have some sort of build tooling that doesn't emit source maps.

ignore list is not being considered

Can I ask where you got the ignore option from? It is not part of the API: https://www.npmjs.com/package/@sentry/webpack-plugin#options

[ajai-am]

hi @lforst thank you for the swift response, appreciate it.

Issue 1

Okey, I was going through the issues list here, to see if someone else if facing the same issue as mine and I came across one of the issue raised talking about the debug ID should be in .js.map. Hence I assumed its the same for me.

The actual reason for raising this issue is, In my sentry error log, I see source code is in unminified version, like below

on clicking the btn I got this popup

But as said earlier, I can see the sourcemap are getting uploaded

any idea what I could be doing wrong here?

Issue 2

Yes, I totally agree that those files are created from my side, unfortunately I could not find the solution to fix for that yet, hence I tried to ignore them from the sourcemap upload.

as for the ignore list, I was using the sourcemaps.ignore option, looks like when I was trying diff methods to get it fixed, I posted the wrong code above.

[lforst]

I think we need some sort of reproduction to debug this effectively. Maybe can you (in addition to providing repro) also share a link to an event that can't be unminified? Thanks!

[ajai-am]

I need to check with my manager on the company policy, with regards to providing the access to the codebase.

P.S our company has a paid plan with sentry, is there a different or private support system we can use where we can further discuss on this issue?

[lforst]

You can reach out to support here: https://sentry.zendesk.com/hc/en-us