ref(sveltekit): Use untrack to read route id without invalidation (#19272)

This patch refactors how we look up SvelteKit event properties. We now use
SvelteKit 2's `untrack` utility when available to read `event.route.id`
without triggering route invalidation in load wrappers. Previously, we
relied on a hack to read the route id via
`Object.getOwnPropertyDescriptor`, which didn't trigger the Proxy on the
route object set by SvelteKit.

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Lms24

packages/sveltekit/src/client/load.ts

@@ -9,7 +9,7 @@ import {
 import { captureException } from '@sentry/svelte';
 import type { LoadEvent } from '@sveltejs/kit';
 import type { SentryWrappedFlag } from '../common/utils';
-import { isHttpError, isRedirect } from '../common/utils';
+import { getRouteId, isHttpError, isRedirect } from '../common/utils';
 
 type PatchedLoadEvent = LoadEvent & Partial<SentryWrappedFlag>;
 
@@ -72,16 +72,7 @@ export function wrapLoadWithSentry<T extends (...args: any) => any>(origLoad: T)
 
       addNonEnumerableProperty(patchedEvent as unknown as Record<string, unknown>, '__sentry_wrapped__', true);
 
-      // Accessing any member of `event.route` causes SvelteKit to invalidate the
-      // client-side universal `load` function's data prefetched data, causing another reload on the actual navigation.
-      // To work around this, we use `Object.getOwnPropertyDescriptor` which doesn't invoke the proxy.
-      const routeIdDescriptor = event.route && Object.getOwnPropertyDescriptor(event.route, 'id');
-      // First, we try to access the route id from the property descriptor.
-      // This will only work for @sveltejs/kit >= 1.24.0
-      const routeIdFromDescriptor = routeIdDescriptor && (routeIdDescriptor.value as string | undefined);
-      // If routeIdFromDescriptor is undefined, we fall back to the old behavior of accessing
-      // `event.route.id` directly. This will still cause invalidations but we get a route name.
-      const routeId = routeIdFromDescriptor || event.route.id;
+      const routeId = getRouteId(event);
 
       return startSpan(
         {

packages/sveltekit/src/common/utils.ts

@@ -10,6 +10,38 @@ export type SentryWrappedFlag = {
   __sentry_wrapped__?: true;
 };
 
+interface EventLike {
+  route?: {
+    id?: string | null;
+  };
+  untrack<T>(fn: () => T): T;
+}
+
+/**
+ * Get route.id from a load event without triggering SvelteKit's route proxy
+ * (which would cause unwanted invalidations). Uses `untrack` when available (SvelteKit 2+),
+ * otherwise falls back to getOwnPropertyDescriptor for SvelteKit 1.x.
+ */
+export function getRouteId(event: EventLike): string | void {
+  if (typeof event.untrack === 'function') {
+    return event.untrack(() => event.route?.id ?? undefined);
+  }
+
+  const route = event.route;
+  if (!route) {
+    return;
+  }
+
+  const descriptor = Object.getOwnPropertyDescriptor(route, 'id');
+  const fromDescriptor = descriptor?.value as string | null | undefined;
+
+  if (fromDescriptor !== undefined && fromDescriptor !== null) {
+    return fromDescriptor;
+  }
+
+  return;
+}
+
 /**
  * Determines if a thrown "error" is a Redirect object which SvelteKit users can throw to redirect to another route
  * see: https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect

packages/sveltekit/src/server-common/load.ts

@@ -7,6 +7,7 @@ import {
 } from '@sentry/core';
 import type { LoadEvent, ServerLoadEvent } from '@sveltejs/kit';
 import type { SentryWrappedFlag } from '../common/utils';
+import { getRouteId } from '../common/utils';
 import { sendErrorToSentry } from './utils';
 
 type PatchedLoadEvent = LoadEvent & SentryWrappedFlag;
@@ -33,7 +34,7 @@ export function wrapLoadWithSentry<T extends (...args: any) => any>(origLoad: T)
 
       addNonEnumerableProperty(event as unknown as Record<string, unknown>, '__sentry_wrapped__', true);
 
-      const routeId = event.route?.id;
+      const routeId = getRouteId(event);
 
       try {
         // We need to await before returning, otherwise we won't catch any errors thrown by the load function
@@ -94,10 +95,9 @@ export function wrapServerLoadWithSentry<T extends (...args: any) => any>(origSe
       addNonEnumerableProperty(event as unknown as Record<string, unknown>, '__sentry_wrapped__', true);
 
       // Accessing any member of `event.route` causes SvelteKit to invalidate the
-      // server `load` function's data on every route change.
-      // To work around this, we use `Object.getOwnPropertyDescriptor` which doesn't invoke the proxy.
-      // https://github.com/sveltejs/kit/blob/e133aba479fa9ba0e7f9e71512f5f937f0247e2c/packages/kit/src/runtime/server/page/load_data.js#L111C3-L124
-      const routeId = event.route && (Object.getOwnPropertyDescriptor(event.route, 'id')?.value as string | undefined);
+      // server `load` function's data on every route change. We use `getRouteId` which uses
+      // SvelteKit 2's `untrack` when available, otherwise getOwnPropertyDescriptor for 1.x.
+      const routeId = getRouteId(event);
 
       try {
         // We need to await before returning, otherwise we won't catch any errors thrown by the load function

packages/sveltekit/test/client/load.test.ts

@@ -139,6 +139,35 @@ describe('wrapLoadWithSentry', () => {
         expect.any(Function),
       );
     });
+
+    it('uses untrack when present (SvelteKit 2+) to get route id without triggering invalidation', async () => {
+      const routeIdFromUntrack = '/users/[id]';
+      const untrack = vi.fn(<T>(fn: () => T) => fn());
+      const eventWithUntrack = {
+        params: MOCK_LOAD_ARGS.params,
+        route: { id: routeIdFromUntrack },
+        url: MOCK_LOAD_ARGS.url,
+        untrack,
+      };
+
+      async function load({ params }: Parameters<Load>[0]): Promise<ReturnType<Load>> {
+        return { post: params.id };
+      }
+
+      const wrappedLoad = wrapLoadWithSentry(load);
+      await wrappedLoad(eventWithUntrack);
+
+      expect(untrack).toHaveBeenCalledTimes(1);
+      expect(mockStartSpan).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: routeIdFromUntrack,
+          attributes: expect.objectContaining({
+            [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+          }),
+        }),
+        expect.any(Function),
+      );
+    });
   });
 
   it('adds an exception mechanism', async () => {

packages/sveltekit/test/common/utils.test.ts

@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
-import { isHttpError, isRedirect } from '../../src/common/utils';
+import { describe, expect, it, vi } from 'vitest';
+import { getRouteId, isHttpError, isRedirect } from '../../src/common/utils';
 
 describe('isRedirect', () => {
   it.each([
@@ -40,3 +40,65 @@ describe('isHttpError', () => {
     },
   );
 });
+
+describe('getRouteId', () => {
+  it('returns route.id when event has untrack (SvelteKit 2+)', () => {
+    const untrack = vi.fn(<T>(fn: () => T) => fn());
+    const event = {
+      route: { id: '/blog/[slug]' },
+      untrack,
+    };
+
+    // @ts-expect-error - only passing a partial load event here
+    expect(getRouteId(event)).toBe('/blog/[slug]');
+
+    expect(untrack).toHaveBeenCalledTimes(1);
+    expect(untrack).toHaveBeenCalledWith(expect.any(Function));
+  });
+
+  it('returns undefined when event has untrack but route.id is null', () => {
+    const untrack = vi.fn(<T>(fn: () => T) => fn());
+    const event = {
+      route: { id: null },
+      untrack,
+    };
+
+    // @ts-expect-error - only passing a partial load event here
+    expect(getRouteId(event)).toBeUndefined();
+
+    expect(untrack).toHaveBeenCalledTimes(1);
+    expect(untrack).toHaveBeenCalledWith(expect.any(Function));
+  });
+
+  it('falls back to getOwnPropertyDescriptor and avoids triggering the proxy', () => {
+    const routeId = '/users/[id]';
+
+    let routeIdAccessed = false;
+    const route = { id: routeId };
+
+    // taken from https://github.com/sveltejs/kit/blob/159aece0654db020f95bc414f6a21f25fbc5f22f/packages/kit/src/runtime/client/client.js#L783-L790
+    const proxiedRoute = new Proxy(route, {
+      get: (target, key) => {
+        routeIdAccessed = true;
+        // @ts-expect-error - this is fine for the test
+        return target[key];
+      },
+    });
+
+    const event = { route: proxiedRoute };
+    // @ts-expect-error - only passing a partial load event here
+    expect(getRouteId(event)).toBe(routeId);
+    expect(routeIdAccessed).toBe(false);
+
+    // sanity check that the proxying mechanism works
+    expect(event.route.id).toBe(routeId);
+    expect(routeIdAccessed).toBe(true);
+  });
+
+  it('returns undefined when event has no route', () => {
+    // @ts-expect-error - only passing a partial load event here
+    expect(getRouteId({})).toBeUndefined();
+    // @ts-expect-error - only passing a partial load event here
+    expect(getRouteId({ route: null })).toBeUndefined();
+  });
+});

packages/sveltekit/test/server-common/load.test.ts

@@ -304,4 +304,26 @@ describe('wrapServerLoadWithSentry calls `startSpan`', () => {
 
     expect(proxyFn).not.toHaveBeenCalled();
   });
+
+  it('uses untrack when present (SvelteKit 2+) to get route id without triggering invalidation', async () => {
+    const untrack = vi.fn(<T>(fn: () => T) => fn());
+    const eventWithUntrack = {
+      ...getServerOnlyArgs(),
+      untrack,
+    };
+
+    const wrappedLoad = wrapServerLoadWithSentry(serverLoad);
+    await wrappedLoad(eventWithUntrack);
+
+    expect(untrack).toHaveBeenCalledTimes(1);
+    expect(mockStartSpan).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: '/users/[id]',
+        attributes: expect.objectContaining({
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        }),
+      }),
+      expect.any(Function),
+    );
+  });
 });