Sentry SVELTEKIT_DEV is not defined error

[MisterChaneb]

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

Framework Version

sveltekit 1.25

Link to Sentry event

No response

SDK Setup

import { handleErrorWithSentry, Replay } from "@sentry/sveltekit";
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
  dsn: 'https://3c0a82d0a6fb34aa51085ba824e98e86@o4506019657154560.ingest.sentry.io/4506050175434752',
  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: [new Replay()],
});

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

Steps to Reproduce

1. create a base project of sveltekit
2. install sentry!
3. refresh the page multiple times until you get the error
4. Huray reproduced!

Expected Result

No error!

Actual Result

the error! this is local.

stores.js?v=ffd779d4:35 Uncaught (in promise) ReferenceError: SVELTEKIT_DEV is not defined
at Object.subscribe (stores.js?v=ffd779d4:35:17)
at instrumentPageload (router.ts:51:1)
at svelteKitRoutingInstrumentation (router.ts:27:1)
at BrowserTracing.setupOnce (browsertracing.ts:259:1)
at setupIntegration (integration.ts:105:1)
at integration.ts:93:1
at Array.forEach ()
at setupIntegrations (integration.ts:90:1)
at BrowserClient.setupIntegrations (baseclient.ts:297:1)
at Hub.bindClient (hub.ts:134:1)
at initAndBind (sdk.ts:34:1)
at init (sdk.ts:122:1)
at init2 (sdk.ts:24:1)
at Module.init3 (sdk.ts:30:1)
at hooks.client.js:4:8

[Lms24]

Hi @MisterChaneb thanks for writing in! According to your stacktrace, this seems to be coming from within the page store in SvelteKit. I've never seen this error before but my gut feeling is that this is some sort of timing issue between page hydration and our BrowserTracing initialization. Not exactly sure though when this happens.

As it happens, I just created another SvelteKit default app (Sverdle) and added our SDKs. Still not able to reproduce this.

• Did you come across this bug in dev mode or in a prod build?
• What svelte and @sveltejs/kit version are you on? Please lmk the exact version. You can obtain it easily by running yarn why @sveltejs/kit.

Can you share a minimal reproducible example (e.g. GH repo) that reproduces this bug?

[iandoesallthethings]

I think I found a potential loose end for this issue in case anyone else is stuck!

My app has one particularly slow Vite plugin that wraps up our legacy express server as middleware. Removing that plugin in vite.config stops this error. Adding a 10ms wait before calling Sentry.init() also does the job.

It's a little odd that a slow server-side plugin is causing a clientside race condition, but my best guess is that __SVELTEKIT_DEV__ is instantiated by a module that gets sent to the browser separately and the tossup is between that module and hooks.client.ts.

So for anyone else who's runnning into this, check your plugins. There's probably something gumming up Vite's initialization clientside.

[kfajdsl]

I think I found a potential loose end for this issue in case anyone else is stuck!

My app has one particularly slow Vite plugin that wraps up our legacy express server as middleware. Removing that plugin in vite.config stops this error. Adding a 10ms wait before calling Sentry.init() also does the job.

It's a little odd that a slow server-side plugin is causing a clientside race condition, but my best guess is that __SVELTEKIT_DEV__ is instantiated by a module that gets sent to the browser separately and the tossup is between that module and hooks.client.ts.

So for anyone else who's runnning into this, check your plugins. There's probably something gumming up Vite's initialization clientside.

I don't have any server-side vite plugins other than the sveltekit and sentry plugins, but the delay still fixed the issue for me. It seemed to only happen once in every 10 refreshes for me prior, haven't seen it since adding the delay.

[prsidhu]

@kfajdsl Did you use a setTimeout to call Sentry.init()?

[iandoesallthethings]

@kfajdsl Did you use a setTimeout to call Sentry.init()?

That's pretty close to what I did. Since it only affects dev, I have a little promisified wait(ms) helper so mine looks like this:

export async function initSentry() {
  if (dev) await wait(1) 

  Sentry.init({ ... })

  /* etc etc... */
}

And call that at the top of hooks.client.