Problem with Server Sourcemaps in SvelteKit

[danieldiekmeier]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/sveltekit

SDK Version

7.53.1

Framework Version

1.18.0

Link to Sentry event

https://eintrittskartenio.sentry.io/issues/4208536907/?environment=development&project=1422627&query=is%3Aunresolved&referrer=issue-stream&stream_index=0

SDK Setup

Sentry.init({
  dsn: config.SENTRY,
  tracesSampleRate: 0.05,
  environment: 'development',
  release: 'c52cb50081964beca7ba61bcd8c113d7',
})

Steps to Reproduce

1. I ran npx @sentry/wizard@latest -i sveltekit to automatically add Sentry to my SvelteKit Application
2. I manually put build: { sourcemaps: true } in my vite.config.js, because I want sourcemaps for the server
3. I built my app (vite build), started it (node ./build) and triggered an error locally
4. I noticed that Sentry stopped showing any code at all in the traces:

5. I dug as deep as I could and noticed that the relative paths in the sourcemaps are slightly wrong. They go one level too far up. For example, it would show ../../../../src/routes/+page.svelte, but relative to build/server/chunks, this is outside of my project folder. So I checked where these paths get set, and ended up creating this bug report in the SvelteKit repo: adapter-node breaks paths to sourcemap sources by copying files during build sveltejs/kit#10040
6. I worked around the bug locally, but I also noticed that the directories of the files are now omitted (instead it prepends app://), showing only the filename. In a typical SvelteKit app, many many files are called +page or +layout, so this is less than ideal. :D

Expected Result

The full path to the file should be shown.

Actual Result

Previously, when I didn't use sourcemaps, it showed the whole filepath:

[Lms24]

Hi @danieldiekmeier thanks for writing in!

I manually put build: { sourcemaps: true } in my vite.config.js

As long as you didn't deactivate autoUploadSourceMaps in sentrySvelteKit, this shouldn't be necessary

I dug as deep as I could and noticed that the relative paths in the sourcemaps are slightly wrong

Yes, we're aware of this. We already raised this with the SvelteKit maintainers but never got a response. Thanks for creating this issue - maybe this helps move things forward.

However, I'm not sure yet if the path here is indeed the problem because we had the same issue for example in universal or server load functions and got server source maps working for those.

To confirm, the error you're showing here comes from being thrown directly in the <script> section of a +page.svelte file, correct? Chances are we only tested these on the client by triggering an error on button click. I'll try to reproduce this today.

Meanwhile, can you check if server errors thrown in load functions on the server are source mapped for you?

[Lms24]

@danieldiekmeier, I tried to reproduce this in this minimal reproduction app and for me source maps seem to work. Would you mind taking a look at it and tell me what we need to do to reproduce this error? Feel free to fork the repo.

[danieldiekmeier]

Thank you for the quick reply! I used your reproduction to send an error into my project, and you're right, the sourcemaps work. (So I guess that even though they are slightly broken, they still basically work in Sentry? That's nice!)

I then copied your /about page to my app, triggered the same error again … and the paths are getting cut off again. I noticed that they are also getting cut off when I don't supply sourcemaps:

So maybe the whole sourcemap thing is unrelated?

I tried to make my app more and more similar to your reproduction example, but even after removing all my routes, matching all the versions (including Node.js) and using exactly your hooks.server.js, the problem still persists. I don't know what else to try. I really wish I'd have been able to reproduce this.

At this point, I have spent over two days trying to get source maps to work, and I think I'm going to have to stop now. I'm sorry!

[danieldiekmeier]

Okay, I looked into it a little more, and I tried just submitting and error manually with Sentry.captureException – The directories were still missing.

But then I changed the removed the SvelteKit-specific stuff and tried @sentry/node again … and it works! It even seems to pick up the sourcemaps that I uploaded earlier:

(The relative paths are still wrong, but … it's something.)

As the author, you know more about the internals of @sentry/sveltekit – is there anything that pops out to you which might be responsible for this, that I should have a look at?

[Lms24]

@danieldiekmeier we modify the file paths of the stack frames in the SvelteKit SDK, similarly to what the RewriteFrames integration would do in the Node SDK. Source map symbolication doesn't work with absolute paths as shown in your screenshot above which is why we have to strip the common file path.

Right now, we basically strip it to just the file name (i.e. app:///somejsfile.js) but this seems to cause errors in some cases. I wasn't aware that this doesn't work for the Node adapter (as for me it always did, see my repro).

However, I'm working on a change here to add support for SvelteKit apps on Vercel. With this change, we'll strip the absolute path until we reach the server subdir of the SvelteKit output directory (.svelte-kit in most cases; build or a custom dir in the Node adapter case). This might just fix your problem.