Injecting debug IDs into angular source maps breaks original map

[InterstellarStella]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/angular-ivy

SDK Version

7.61.0

Framework Version

Angular 15.1.0

Link to Sentry event

https://dragonfruit-dev.sentry.io/issues/4364427077/?query=is%3Aunresolved&referrer=issue-stream&stream_index=0

SDK Setup

Sentry.init({
  dsn: "DSN_HERE",
  integrations: [
    new Sentry.BrowserTracing({
      tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
    new Sentry.Replay(),
  ],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  release: "angular@1.5.2",
});

Steps to Reproduce

1. sentry-cli version is 2.20.3
2. ng build
3. sentry-cli sourcemaps inject ./dist
4. sentry-cli sourcemaps upload --release=angular@1.5.2 ./dist/angular-tour-of-heroes --org dragonfruit-dev -p javascript-angular

Expected Result

The source maps are uploaded to Sentry and correctly matched to new events.

Actual Result

After running the inject command, I noticed that there is a ; being added into the "mappings" part of the .map files.

This breaks the source map in the browser, as an error's position seems to be wrong

Additionally, in the stack trace section in the resulting error in Sentry, we see repeating positions and we don't get readable code:
https://dragonfruit-dev.sentry.io/issues/4364427077/?query=is%3Aunresolved&referrer=issue-stream&stream_index=0

A temporary fix is to manually remove the ; from all the .map files and after injecting the debug IDs and before uploading the source maps to Sentry. I found that this gave me the correct stack traces:
https://dragonfruit-dev.sentry.io/issues/4364645800/?query=is%3Aunresolved&referrer=issue-stream&stream_index=0

[Lms24]

@stellaatsentry thanks for the great information and reproduction steps! I see a few referemces to the default Angular tour of heroes scaffold app. Any chance that the customer already created a minimal reproduction app we could use?

I'm not entirely sure but this looks like an issue in sentry-cli.

cc @loewenheim, any chance that this is caused by one of the known issues around debugIds injection in the CLI?

[Lms24]

Side note: I'm wondering why the frames are all set to in_app: false when some are clearly in-app (not all though). We already had this problem once in Angular and I thought we fixed it in the CLI with getsentry/rust-sourcemap#61 which we included in v2 and v1 (backported) of the CLI. Not sure though if this is related or something else is going on.

[loewenheim]

cc @loewenheim, any chance that this is caused by one of the known issues around debugIds injection in the CLI?

Yes, very probably. Fortunately, this should be fixed shortly.

[loewenheim]

As of sentry-cli 2.20.4, this should be fixed.