Using the SvelteKit SDK breaks SSR functionality of TanStack Query

[kevinrenskers]

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.64.0

Framework Version

7.64.0

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

When using your SvelteKit SDK, and specifically your Vite plugin for SvelteKit, the preloading / SSR functionality of TanStack Query for Svelte seems broken.

1. Clone my https://github.com/kevinrenskers/sveltequery-sentry-sveltekit repo and npm install
2. npm run dev, open http://127.0.0.1:5173
3. Open the javascript console and then click on the "Articles" link in the top

You will see that the posts array is first undefined, and then it gets data:

Now edit vite.config.ts and remove sentrySvelteKit() from the plugins. Restart the dev server and do the same thing again: start on the homepage and then go to articles. Now the posts array is immediately defined:

It does have a real effect in my website, where articles pop in a fraction of a second later instead of already being there. Basically SSR seems broken.

Expected Result

I don't know if the problem lies with your sentrySvelteKit Vite plugin which modifies the fetch function, or if the problem lies with Query which can't deal with these changes. But I would expect that installing your SvelteKit SDK and Vite plugin to not change the behavior of my site when using Query.

Also reported in their repo: TanStack/query#5871

Actual Result

See repro steps above

[AbhiPrasad]

This should be fixed by #8802 - I’ll let @Lms24 confirm though

[Lms24]

Hi @kevinrenskers thanks for reporting and for the great reproduction! I cloned it and tried it out. Unfortunately, #8802 doesn't fix your issues because it turns out, it's not related to fetch. It's very similar to #8610 just that this time, it's not about the server-side load functions but about the client-side (+page.ts) universal load function.

The problem is that in our wrapLoadWithSentry wrapper, we access event.route.id. SvelteKit internally listens for accesses to route.id and later on checks if there was an access. With our wrapLoadWithSentry wrapper in place, there'll always be such an access, regardless of if you use event.route.id in your load function or not. As a result, your prefetch (I believe) is invalidated and you have to load again.

While we were able to work around this on the server-side (#8801), the way how Kit attaches its listener on the client side doesn't permit us to do the same thing again. In fact, I can't think of a way to still get the route id for our span description without triggering this invalidation logic.

I would like to get this fixed in SvelteKit itself but in our experience, this takes quite a while, so our other option is to remove the route id access from our wrappers. Not ideal but not a total deal breaker either.

In the meantime, you can work around this by disabeling the client-side auto-instrumentation in sentrySvelteKit:

import { sveltekit } from "@sveltejs/kit/vite";
import { sentrySvelteKit } from "@sentry/sveltekit";

export default {
  plugins: [
    sentrySvelteKit({
      autoInstrument: {
        load: false,
        serverLoad: true,
      },
      // OR disable auto-instrumentation entirely:
      // autoInstrument: false,
    }),
    sveltekit(),
  ],
  // ... rest of your Vite config
};

Sorry that there isn't a perfect fix. I'll keep you posted.