Trace does not include server load spans in dev environment

joemmalatesta commented 4 months ago

Is there an existing issue for this?

[X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[X] I have reviewed the documentation https://docs.sentry.io/
[x] 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

8.11.0

Framework Version

SvelteKit 2.0.0

Link to Sentry event

No response

SDK Setup/Reproduction Example

// src/hooks.client.ts
import { handleErrorWithSentry, replayIntegration } from '@sentry/sveltekit';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
    dsn: {DSN}
    tracesSampleRate: 1.0,

    // This sets the sample rate to be 10%. You may want this to be 100% while
    // in development and sample at a lower rate in production
    replaysSessionSampleRate: 0.1,

    // If the entire session is not sampled, use the below sample rate to sample
    // sessions when an error occurs.
    replaysOnErrorSampleRate: 1.0,

    // If you don't want to use Session Replay, just remove the line below:
    integrations: [
        replayIntegration(),
        Sentry.feedbackIntegration({
            // Additional SDK configuration goes in here, for example:
            colorScheme: 'light'
        }),
    ],
});

// If you have a custom error handler, pass it to `handleErrorWithSentry`
export const handleError = handleErrorWithSentry();

// src/hooks.client.ts
import { sequence } from "@sveltejs/kit/hooks";
import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
  dsn: {DSN}
  tracesSampleRate: 1.0,

  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
  // spotlight: import.meta.env.DEV,  
});

// If you have custom handlers, make sure to place them after `sentryHandle()` in the `sequence` function.
export const handle = sequence(sentryHandle());

// If you have a custom error handler, pass it to `handleErrorWithSentry`
export const handleError = handleErrorWithSentry();

Steps to Reproduce

repo available at https://github.com/joemmalatesta/osumon.

When running in a development environment using npm run dev, the spans for requests made in load functions for routes like src/routes/v1/[username]/+page.server/ts are not included unless manually instrumented using Sentry.startSpan() This image shows the trace for a load function in a development environment.

However, this is not the case in production or running a prod environment locally using npm run build and npm run preview. In this case, the spans will be sent as expected (as seen in expected result)

Expected Result

Actual Result

mydea commented 4 months ago

Thank you for reporting this! @Lms24 (our resident Sveltekit expert) is back soon and can take a look at this 🙏

Lms24 commented 4 months ago

Hey @joemmalatesta thx for writing in and for the great issue writeup! Your setup Sentry SDK setup looks good to me and I don't see an apparent reason as to why we wouldn't record a server load span. So I'd like to debug this further but for that I need the environment variables and a valid username so that I can get to the page you referenced in your issue description (already reached out on Slack for that :) )

Lms24 commented 4 months ago

So this is really weird. I tried to track this down and currently think that SvelteKit's vite plugins do something funky with load hooks that bypass our auto-wrapped version of the +page.server.ts file. Some observations:

manually adding Sentry.wrapServerLoadWithSentry around the load function starts function.sveltekit.server.load in dev mode
Our sentrySvelteKit auto instrumentation plugin applies our proxy correctly when loading the server load file. The function creating the wrapped load function is invoked. All of that happens before the load function invocation. However, the wrapper code is not invoked.
This makes me suspect that: SvelteKit loads the original +page.server.ts file later again and somehow bypasses our plugin's load hook that applies the wrapper.
All of that only seems problematic in dev mode. Prod/preview mode works fine.

Finding a fix doesn't seem trivial at this point and it's "only" dev mode. I'm gonna keep digging a bit more but not sure what we can do about it.

This could also be related to HMR and Vite's dev server.

Lms24 commented 4 months ago

I couldn't reproduce the missing http.client spans though. For me they show up in dev mode:

(added spotlight to the app to debug locally w/o checking sentry.io)

Lms24 commented 4 months ago

Bit more digging:

It could be related to how SvelteKit sets up the dev server for SSR (https://github.com/sveltejs/kit/blob/main/packages/kit/src/exports/vite/dev/index.js)

My hunch is that the original file is loaded and for some reason, our plugin's load hook is not invoked. Maybe switching to transform would work but I'm not sure yet.

getsentry / sentry-javascript