How does the URL in the stack trace get decided and where does it come from?

[GigEth]

Environment

SaaS (https://sentry.io/)

What are you trying to accomplish?

Ever since upgrading to Webpack 5 and the newest version of the Sentry Webpack plugin, the stack trace has started to show a URL as the file name:

If I click this, the URL goes to a location underneath my assets folder but since the assets are minified, this location doesn't exist.

On the older version of the Sentry Webpack plugin and with Webpack 4 (on another project I have which hasn't been upgraded), it looks like this:

How are you getting stuck?

What exactly is this URL? Where does it come from? How can I change Sentry so that the URL either points to an accessible location or doesn't show up at all as was the behaviour before I upgraded Sentry and Webpack?

The URL I am taken to is like: https://assets.my-project.com/my-app/1.0.0/project-name/src/Utilities/formatNumberAsCurrency.ts. This doesn't exist. What does exist is a URL like: https://assets.my-project.com/my-app/1.0.0/main.js. So can I get this URL to point there instead? Would I want it to point there?

Where in the product are you?

Issues

Link

No response

DSN

No response

Version

No response

[getsantry[bot]]

Assigning to @getsentry/support for routing ⏲️

[lforst]

If your error is properly source-mapped, the URL comes from the sources field inside your source maps. There might be some slight normalization that we do to it.

If your error is not source-mapped, the URL is just the location of the stack frame as it was in your error.

[GigEth]

Hi @lforst thank you for coming back to me.

This makes sense to me but what doesn't make sense is why this has suddenly changed.

I compared the source maps generated by V4 of Webpack and an older version of the Sentry Webpack plugin and the new version and I could not see any differences in them.

Old main.js.map (from Webpack 4):

webpack://my-app/./src/Utilities/formatNumberAsCurrency.ts

New main.js.map (from Webpack 5):

webpack://my-app/./src/Utilities/formatNumberAsCurrency.ts

So it makes sense to me where the stack trace name (shown at the top of the stack trace) is coming from but it doesn't explain why it differs now? And it does not also explain why in the older version the URL was not there and now it is?

Please can you help me understand?

[lforst]

There was a slight change in how we pre-process the sources field. You can control the way the sources field is processed with the sourcemaps.rewriteSources option: https://www.npmjs.com/package/@sentry/webpack-plugin#sourcemapsrewritesources

[GigEth]

Thank you @lforst, with rewriteSources I am able to restore the original behaviour. Nice!

For anyone else, I simply added

rewriteSources: (source) => source

when creating the Sentry Webpack plugin in Webpack, for example:

sentryWebpackPlugin({
  rewriteSources: (source) => source
})

But I would still be interested to know what determines if the URL is shown or not. It would appear that if the source map URL starts "webpack://" the URL is automatically not shown but if it is starting with anything else, Sentry attempts to make an actual URL.

As I mentioned above, without making a change to the rewriteSources, Sentry seems to think the code is available at https://assets.my-project.com/my-app/1.0.0/project-name/src/Utilities/formatNumberAsCurrency.ts even though only the minified code is available. This seems like a bug to me but can you explain how this URL is determined as it is nowhere to be seen within the source maps. There only webpack://my-app/./src/Utilities/formatNumberAsCurrency.ts is present so it must be something on the Sentry end that is combining that and the URL where the minified code is?

[lforst]

Hm, we probably need to rethink our default rewriting logic here. Putting on backlog.