Source Map for ReactJS app not working as expected.

[sarthakbaweja148]

Environment

SaaS (https://sentry.io/)

What are you trying to accomplish?

We have been using sentry to track issues in our ReactJS for quite some time now, but recently in the last few months, sentry is not able to parse the source maps as expected due to which stack trace is not readable.

We have also verified that releases and source maps are being uploaded to sentry.

We are using sentry webpack plugin to upload the source-maps.

@sentry/react: 7.21.1
@sentry/tracing: 7.21.1
@sentry/webpack-plugin: 1.20.0

sentry webpack plugin
SentryWebpackPlugin({ authToken: vaultData?.secrets?.sentry?.sourceMapConfig.authToken, org: configKeys.sentry?.sourceMapConfig.org, project: configKeys.sentry?.sourceMapConfig.project, release: releaseVersionForSentry, include: "./dist", urlPrefix:~/splashliv-fe-assets/, ignore: ["node_modules", "webpack.config.js"], })

sentry init

Sentry.init({ enabled: configKeys.sentry.enabled, dsn: configKeys.sentry.dsn, environment: configKeys.sentry.env, integrations: [ new Sentry.BrowserTracing(), new Sentry.Integrations.Breadcrumbs({ console: !configKeys.sentry.breadcrumbsDisabled }) ], sampleRate: configKeys.sentry.sampleRate, tracesSampleRate: configKeys.sentry.tracesSampleRate });

How are you getting stuck?

Not able to figure out how to get sentry parse the source maps correctly.

Where in the product are you?

Issues - Source Maps

Link

https://splashlearn-alternate.sentry.io/

DSN

https://edd5d7125eea06a49fc723dab9b75e38@o1149125.ingest.us.sentry.io/4506914637545472

Version

React: 7.21.1

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[AbhiPrasad]

@sarthakbaweja148 I recommend you upgrade @sentry/webpack-plugin to v2, which makes a lot of improvements toward sourcemaps uploading.

Could you link particular errors which are not getting sourcemapped properly?

[sarthakbaweja148]

@AbhiPrasad
I have tried moving to @sentry/webpack-plugin v2 version but to no avail. The issues were still the same.

I have a test error which I can share with you, which I had added in my app to test out this issue.

https://splashlearn-alternate.sentry.io/issues/5358061016/events/a621876400a8476b8ee63ec06590d1dd/

Let me know if you need more information, or more links.

[AbhiPrasad]

Looking at the error, the error is being sourcemapped properly, but I think your sourcemaps are being generated incorrectly. The sourcemap is causing Sentry to show the wrong frames for the error.

How are you generating sourcemaps? Is there a possibility that you are changing code after the sourcemaps gets generated? Therefore having the sourcemap point to the wrong location?