How to correctly enable source-maps with the vite plugin when using a CDN?

[Calvein]

Hi everybody, I'm currently trying to enable sourcemaps for my project and I feel like I tried everything but it still doesn't work 😔

Some context:

• I have an SPA served by the backend
• I'm using vite as a bundler with @sentry/vite-plugin
• I'm have my project, org & auth token as environment variables

The plugin is configure as is:

sentryVitePlugin({
  include: './dist/assets',
})

and in my app sentry is initialize like this:

Sentry.init({
  dsn: config.sentry.dsn,
  environment: 'staging'
})

I do get alerts & errors without any problem.

My project is hosted on https://project.staging.example.com but my assets are on https://cdn.example.com/project/assets/, I'm not uploading the sourcemaps on build with the sourcemap: 'hidden' build option of vite.

Here's my test error:

And here's the artefact referencing this file:

I tried to add the urlPrefix option with many, many examples:

• /project/assets so an error on /project/assets/index.hash.js would match exactly the artefact of the release:
  

• https://cdn.example.com/project/assets to match the actual file in the artefact:
  

• ~/project/assets which seems the be the correct one since ~ is supposed to not care about the base url
  

---

None of these worked and I'm a bit lost about what I'm doing wrong.

[lforst]

Hi, you were on the right path with the urlPrefix option!

Let's assume you're hosting your file on https://cdn.example.com/project/assets/some-folder/some-file.js.

In order for Sentry to pick up that file, the artifact should be uploaded as ~/projects/assets/some-folder/some-file.js.

~ is just a wildcard for protocol + hostname which makes it possible to match across multiple environments/servers.

I don't know what your folder structure looks like but further playing around with the urlPrefix option should get you there!

[Calvein]

My issue was with the release version that I didn't set because I thought it would have worked automatically 🙈