sentry-javascript-bundler-plugins: Using @sentry/electron with @sentry/webpack-plugin doesn't provide proper stack traces anymore (1.X worked fine)

Environment

"@sentry/webpack-plugin": "^2.1.0" "@sentry/electron": "^4.5.0" (which uses “@sentry/browser”: “7.50.0”, which should be compatible and have debug_id support)

Steps to Reproduce

I’m using electron and a dual build with separate configs for building main and the renderer.

In production code I use the following SDK in main:

import * as Sentry from '@sentry/electron/main'
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  release: APP_VERSION || 'unknown',
  environment: process.env.STAGE,
  integrations: [new Sentry.Integrations.ElectronMinidump()]
})

And the following in the renderer:

import * as Sentry from '@sentry/electron/renderer'
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  release: process.env.APP_VERSION || 'unknown',
  environment: process.env.STAGE,
  integrations: (defaultIntegrations) => {
    return [new CaptureConsoleIntegration(), ...defaultIntegrations]
  }
})

I’m using the following for the main webpack config:

import { sentryWebpackPlugin } from '@sentry/webpack-plugin'
sentryWebpackPlugin({
  authToken: process.env.SENTRY_AUTH_TOKEN,
  org: 'XXXXX',
  project: 'XXXXX-desktop',
  sourcemaps: {
    assets: [
      path.join(__dirname, '..', '..', '..', 'desktop-release', 'app', 'dist', 'main.js.map'),
      path.join(__dirname, '..', '..', '..', 'desktop-release', 'app', 'dist', 'main.js'),
      path.join(__dirname, '..', '..', '..', 'desktop-release', 'app', 'dist', 'pdfWorker.js.map'),
      path.join(__dirname, '..', '..', '..', 'desktop-release', 'app', 'dist', 'pdfWorker.js')
    ]
  }
})

and the following for the renderer webpack config:

import { sentryWebpackPlugin } from '@sentry/webpack-plugin'
sentryWebpackPlugin({
  authToken: process.env.SENTRY_AUTH_TOKEN,
  org: 'XXXXXX',
  project: 'XXXXX-desktop',
  sourcemaps: {
    assets: [path.join(__dirname, '..', '..', '..', 'desktop-release', 'app', 'dist', '**')],
    // those are handled by the main build
    ignore: ['main.js', 'main.js.map', 'pdfWorker.js', 'pdfWorker.js.map']
  }
})

The logs of the main build process:

Source Map Upload Report
  Minified Scripts
    ~/600a95d7-1ae2-4529-98c1-f9862b6de145-0.js (sourcemap at main.js.map, debug id 600a95d7-1ae2-4529-98c1-f9862b6de145)
    ~/e90f76c6-acb5-46ca-9791-6722a6566319-1.js (sourcemap at pdfWorker.js.map, debug id e90f76c6-acb5-46ca-9791-6722a6566319)
  Source Maps
    ~/600a95d7-1ae2-4529-98c1-f9862b6de145-0.js.map (debug id 600a95d7-1ae2-4529-98c1-f9862b6de145)
    ~/e90f76c6-acb5-46ca-9791-6722a6566319-1.js.map (debug id e90f76c6-acb5-46ca-9791-6722a6566319)

The logs of the renderer build process:

Source Map Upload Report
  Minified Scripts
    ~/1e674106-c4ca-473f-8846-4ba4c32fd4c2-1.js (sourcemap at windowAuth.js.map, debug id 1e674106-c4ca-473f-8846-4ba4c32fd4c2)
    ~/4e803fcc-3af8-4e1a-a133-7d0d2437cda1-2.js (sourcemap at runtime.js.map, debug id 4e803fcc-3af8-4e1a-a133-7d0d2437cda1)
    ~/600a95d7-1ae2-4529-98c1-f9862b6de145-6.js (sourcemap at main.js.map, debug id 600a95d7-1ae2-4529-98c1-f9862b6de145)
    ~/693adea4-6c20-43ae-87d6-1e65ceb6ce16-9.js (no sourcemap ref, debug id 693adea4-6c20-43ae-87d6-1e65ceb6ce16)
      - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/693adea4-6c20-43ae-87d6-1e65ceb6ce16-9.js)
    ~/8ba42dbb-5a24-4dc0-a266-455ba38368ae-0.js (sourcemap at windowMain.js.map, debug id 8ba42dbb-5a24-4dc0-a266-455ba38368ae)
    ~/91348eeb-3570-44cb-a750-ceb848961393-8.js (no sourcemap ref, debug id 91348eeb-3570-44cb-a750-ceb848961393)
      - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/91348eeb-3570-44cb-a750-ceb848961393-8.js)
    ~/c488e720-7582-4c36-9795-65d3164cf26a-10.js (no sourcemap ref, debug id c488e720-7582-4c36-9795-65d3164cf26a)
      - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/c488e720-7582-4c36-9795-65d3164cf26a-10.js)
    ~/e28603d3-7806-4eb9-b165-6e4f47976d07-7.js (sourcemap at loader.js.map, debug id e28603d3-7806-4eb9-b165-6e4f47976d07)
    ~/e90f76c6-acb5-46ca-9791-6722a6566319-4.js (sourcemap at pdfWorker.js.map, debug id e90f76c6-acb5-46ca-9791-6722a6566319)
  Source Maps
    ~/1e674106-c4ca-473f-8846-4ba4c32fd4c2-1.js.map (debug id 1e674106-c4ca-473f-8846-4ba4c32fd4c2)
    ~/4e803fcc-3af8-4e1a-a133-7d0d2437cda1-2.js.map (debug id 4e803fcc-3af8-4e1a-a133-7d0d2437cda1)
    ~/600a95d7-1ae2-4529-98c1-f9862b6de145-6.js.map (debug id 600a95d7-1ae2-4529-98c1-f9862b6de145)
    ~/8ba42dbb-5a24-4dc0-a266-455ba38368ae-0.js.map (debug id 8ba42dbb-5a24-4dc0-a266-455ba38368ae)
    ~/e28603d3-7806-4eb9-b165-6e4f47976d07-7.js.map (debug id e28603d3-7806-4eb9-b165-6e4f47976d07)
    ~/e90f76c6-acb5-46ca-9791-6722a6566319-4.js.map (debug id e90f76c6-acb5-46ca-9791-6722a6566319)

Then in main.ts I capture an Exception:

import * as Sentry from '@sentry/electron/main'
Sentry.captureException(new Error('main test error'))

And in the renderer I throw:

throw new Error('renderer test error')

Main Result (eventId: 1803622f265e4d8e82afc5c621c8d736):

Renderer Result (eventId: 452429489c4849db8a73c8c8745a90e6):

What I expect

I expect the stacktraces to point me exactly where in the code the Error was thrown. As it was before when using 1.x.

Things I tried out

I tried adding

release: {
  name: APP_VERSION || 'unknown'
}

to the config and also tried without it. It doesn’t really have an effect other than me knowing which artifacts belong to which release, if I understood correctly.

I am sure that artifacts are uploaded correctly, as I can see them under Project > Source Maps > Artifact Bundles.

If I download a file from an artifact bundle I can see both sourceMappingURL=XXX and debugId=YYY being present.

Neither am I using a dist value in SDK, nor in sentryWebpackPlugin.

As a reference: This used to be my previous 1.x renderer config that worked flawlessly:

new SentryWebpackPlugin({
  authToken: process.env.SENTRY_AUTH_TOKEN,
  org: 'XXX',
  project: 'XXX',
  include: {
    urlPrefix: 'app:///dist/',
    stripCommonPrefix: true,
    paths: [path.join(__dirname, '..', '..', '..', 'desktop-release', 'app', 'dist')]
  },
  // those are handled by the main build
  ignore: ['main.js', 'main.js.map', 'pdfWorker.js', 'pdfWorker.js.map'],
  release: APP_VERSION || 'unknown'
}),

Note that I had to use the urlPrefix app:///dist. With the new artifact system this should not be necessary anymore, right?

Due to running out of ideas I tried adding rewriteSources: (source) => `app:///dist/${source}` , but that had no effect as far as I could tell.

If I look at the json of the two events, I CANNOT see a bundle_id anywhere, so I’m assuming this is the culprit?

---

PS: this page is out of date: https://docs.sentry.io/platforms/javascript/sourcemaps/best-practices/