sentry-vite + CDN sourcemaps not working about sentry-javascript-bundler-plugins HOT 30 CLOSED

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.

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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?

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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

@lforst

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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'
    }
  }
})

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

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/

from sentry-javascript-bundler-plugins.

@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?

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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?

from sentry-javascript-bundler-plugins.

You need to include the chunks in your uploaded files

from sentry-javascript-bundler-plugins.

we are already includes chunk files...

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.

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

from sentry-javascript-bundler-plugins.

@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?

from sentry-javascript-bundler-plugins.

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

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


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

from sentry-javascript-bundler-plugins.

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.

from sentry-javascript-bundler-plugins.