sentry-vite + CDN sourcemaps not working

[siosio34]

Environment

@sentry/react 7.105.0 @sentry/vite-plugin: 2.14.2 vite 5.1

In previous versions of Sentry, even when uploading to CDN, the sourcemap was automatically mapped when ~/{projectName} was used through urlPrefix.

However, in the latest version, the method of specifying urlPrefix has been updated, so I applied it as it is in the official document, but the sourcemap was not mapped.

There was uploadLegacySourcemaps in the sentry-vite plugin, so I used that field, but when I browsed the sourcemap in sentry, urlPrefix did not work.

Are there any examples where the source map works properly when using sentry + vite + cdn?

I'm also sharing my sentry vite settings in case it helps.

Expected Result

When the source map is uploaded and an error occurs, the error code location must be well mapped, just like before.

Actual Result

[lforst]

Hi, we need more information!

• You mention a previous version of the plugin. Which one? What did your previous setup look like?
• What exactly does not work? Can you share a Sentry event?
• What do you mean by CDN? What is hosted on a CDN?

You are probably better off just using sourcemaps.assets: './dist/assets/**' instead of using uploadLegacySourcemaps.

[siosio34]

1. we before use @sentry/webpack-plugin": "^1.20.0, @sentry/react": "7.44.2" but current use @sentry/vite-plugin": "^2.14.2, @sentry/react
2. sry we are use self hosted sentry environment 3.We are distributing our React project using CDN.

@lforst

[lforst]

Please try using sourcemaps.assets: './dist/assets/**' and updating your self hosted instance. Thank you!

Also, would you mind answering the rest of my questions? Thanks.

What did your previous setup look like? What exactly does not work?

[siosio34]

Please try using sourcemaps.assets: './dist/assets/**' and updating your self hosted instance. Thank you!

The methods are not the same either.

What did your previous setup look like?

I used sentry Webpack plugin

What exactly does not work? Source map upload is possible. However, when catching an error, it does not capture the location of the error source. like below

@lforst

[siosio34]

Is there a way to specify the urlPrefix using only the uploadLegacySourcemaps field without using the debug id?

If it is possible to do so, even if it means lowering the version, I would like to do so.

Uploading a self-hosted version of Sentry is a bit burdensome for our company, so we would like to avoid it as much as possible

[lforst]

Is there a way to specify the urlPrefix using only the uploadLegacySourcemaps field without using the debug id?

Yes. Set sourcemaps.assets to [].

To me, it looks like you are not using the same options as before. You should literally be able to dump your previous webpack plugin options into uploadLegacySourcemaps and it should work. You need to also set realease names. Please follow this troubleshooting guide https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/legacy-uploading-methods/

Also, if you're not upgrading your self-hosted instance this is incredibly difficult to debug. Newer self-hosted versions will help you debug source maps issues from within the interface.

[siosio34]

Currently I am using sentryVitePlugin in webpack. Are these also the same?

@lforst

[lforst]

Why are you using the sentryVitePlugin with Webpack? You should use @sentry/webpack-plugin when you use webpack.

[siosio34]

I'm sorry for causing you to misunderstand. Previously, I used webpack, but as I switched to Vite, I was changing the sentry settings and I am talking about the issues that arise as a result.

I want to check if I understand Sentry well. If you are receiving js from a path like CDN address/project name/assets as above, isn't it correct to set the uploadLegacySourcemaps setting during sentryvite settings as shown in the code below?

@lforst

[lforst]

From your screenshot it looks like you had it configured as

{
  include: 'dist',
  urlPrefix: '~/upbit-nft'
}

why don't you try?

sentryVitePlugin({
  debug: true,
  // your other options here! ...
  release: {
    uploadLegacySourcemaps: {
      paths: ['dist'],
      urlPrefix: '~/upbit-nft'
    }
  }
})

[siosio34]

The reason is that when building with webpack, there were js files directly in the dist folder, but after building with vite, js files were created in the dist/assets folder. and even if you do what you said, it still doesn't work as shown in the picture below.

[siosio34]

Are there any examples using the CDN + vite + sentry-vite plugin? I think many vite users are probably experiencing the same issue as me. Our front team tried to solve the issue, but we couldn't solve it, so we want to check if this works.

[siosio34]

Do I have to set the release version unconditionally? I'm asking because in the previous webpack plugin, it worked fine without specifying a release version name.

[lforst]

I have a very hard time debugging this with you because I lack a ton of information about your setup, what you upload to Sentry and how your events look. Please understand that I won't be magically able to solve this issue for you.

I personally do not think many people run into this particular issue, rather it is a config issue on your end. Please go through the troubleshooting guide: docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/legacy-uploading-methods because I have a feeling you haven't done that.

[siosio34]

It would be nice to have at least one example. There seems to be an issue with many developers on the team going through so much trial and error after seeing the official link and ultimately failing to link it. When you have time, it would be nice to have an example using vite + sentryVite + cdn. However, our project settings probably won't work because we don't do much different from the default settings.

@lforst

[siosio34]

If you need more information, we will do our best to get it.

[lforst]

If you need more information

Yes please, like I asked before, please provide:

• What you upload to your Sentry instance.
• A Sentry event that isn't source mapped. Ideally the payload.
• Everything in your build config.

Best case, you provide a reproduction repository.

Additionally, please share build logs when setting debug: true.

[siosio34]

What you upload to your Sentry instance. A Sentry event that isn't source mapped. Ideally the payload.

I think a detailed explanation of these two items is needed.

[siosio34]

Oh wait, I think I figured out the cause. Let's test it out for a moment.

[lforst]

What you upload to your Sentry instance. A Sentry event that isn't source mapped. Ideally the payload.

I think a detailed explanation of these two items is needed.

We outline all of these very detailed here https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/legacy-uploading-methods/

[siosio34]

@lforst I found out. It does not work if you use the chunk function of rollup. After deleting the option shown in the picture below, the source is captured. However, chunk seems to be essential to reduce the size of the entire file. Is there a way to ensure that the source can be found accurately even when applying the chunk option?

[lforst]

Is there a way to ensure that the source can be found accurately even when applying the chunk option?

I don't understand what you mean by that. You are responsible yourself for specifying the correct files with the paths option and for matching the stack frames with the uploaded artifacts.

[siosio34]

The problem was the manualChunks option for creating chunk files in the rollupOptions item in the vite.config.ts configuration file. If you remove that option, the sourcemap will load normally.

However, the process of creating a chunk file seems essential for fast loading. Is it possible to make sourcemap work well even if there is a chunk file in sentry?

[lforst]

You need to include the chunks in your uploaded files

[siosio34]

we are already includes chunk files...

[siosio34]

Sorry to keep asking, but are there any guidelines for operation when using manualChunks for optimization among rollupOptions in Vite? We need that functionality to use sentry even in the changed vite environment. I also used chunk when using webpack, and there was no issue like this at that time.

[lforst]

You successfully uploaded the chunks to Sentry. Now you need to match stack frames to the file names with the rewriteFramesIntegration!

[siosio34]

@lforst

I read the documentation for rewriteFramesIntegration, but I didn't really understand how to use it. I think it would be good to be more detailed.

As I understand it, if urlPrefix is ​​~/{path1}/${path2}

rewriteFrames({ prefix: ~/${path1}/${path2} })

Can I do it like this?

[siosio34]

I tried both methods below, but they don't work.

rewriteFrames({
prefix: ~/${path1}/${path2}
})

rewriteFrames({
root: ~/${path1}/${path2}
})

[siosio34]

I changed it to using sentry cli directly and it seems to work well. This issue is closed. Thank you for responding to the issue together.