fix(v7): Ensure next & sveltekit correctly handle browserTracingIntegration (#11647)

Fixes #11627

Author: mydea

packages/nextjs/src/client/index.ts

@@ -10,8 +10,7 @@ import type { EventProcessor, Integration } from '@sentry/types';
 
 import { devErrorSymbolicationEventProcessor } from '../common/devErrorSymbolicationEventProcessor';
 import { getVercelEnv } from '../common/getVercelEnv';
-import { browserTracingIntegration } from './browserTracingIntegration';
-import { BrowserTracing } from './browserTracingIntegration';
+import { BrowserTracing, browserTracingIntegration } from './browserTracingIntegration';
 import { rewriteFramesIntegration } from './rewriteFramesIntegration';
 import { applyTunnelRouteOption } from './tunnelRoute';
 
@@ -107,7 +106,7 @@ function maybeUpdateBrowserTracingIntegration(integrations: Integration[]): Inte
   if (isNewBrowserTracingIntegration(browserTracing)) {
     const { options } = browserTracing;
     // eslint-disable-next-line deprecation/deprecation
-    integrations[integrations.indexOf(browserTracing)] = new BrowserTracing(options);
+    integrations[integrations.indexOf(browserTracing)] = browserTracingIntegration(options);
   }
 
   // If BrowserTracing was added, but it is not our forked version,

packages/nextjs/test/clientSdk.test.ts

@@ -1,4 +1,4 @@
-import { BaseClient } from '@sentry/core';
+import { BaseClient, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, getActiveSpan, spanToJSON } from '@sentry/core';
 import * as SentryReact from '@sentry/react';
 import type { BrowserClient } from '@sentry/react';
 import { browserTracingIntegration } from '@sentry/react';
@@ -149,16 +149,20 @@ describe('Client init()', () => {
 
       const client = getClient<BrowserClient>()!;
       // eslint-disable-next-line deprecation/deprecation
-      const integration = client.getIntegrationByName<BrowserTracing>('BrowserTracing');
+      const integration = client.getIntegrationByName<ReturnType<typeof browserTracingIntegration>>('BrowserTracing');
 
       expect(integration).toBeDefined();
-      expect(integration?.options).toEqual(
-        expect.objectContaining({
-          // eslint-disable-next-line deprecation/deprecation
-          routingInstrumentation: nextRouterInstrumentation,
-          // This proves it's still the user's copy
-          finalTimeout: 10,
-        }),
+
+      // It is a "new" browser tracing integration
+      expect(typeof integration?.afterAllSetup).toBe('function');
+
+      // This shows that the user-configured options are still here
+      expect(integration?.options?.finalTimeout).toEqual(10);
+
+      // it is the svelte kit variety
+      expect(getActiveSpan()).toBeDefined();
+      expect(spanToJSON(getActiveSpan()!).data?.[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]).toEqual(
+        'auto.pageload.nextjs.app_router_instrumentation',
       );
     });
 
@@ -176,6 +180,11 @@ describe('Client init()', () => {
       const browserTracingIntegration = client.getIntegrationByName<BrowserTracing>('BrowserTracing');
 
       expect(browserTracingIntegration).toBeDefined();
+
+      // It is a "old" browser tracing integration
+      // @ts-expect-error this does not exist
+      expect(typeof browserTracingIntegration!['afterAllSetup']).toBe('undefined');
+
       expect(browserTracingIntegration?.options).toEqual(
         expect.objectContaining({
           // eslint-disable-next-line deprecation/deprecation

packages/sveltekit/src/client/sdk.ts

@@ -82,7 +82,7 @@ function maybeUpdateBrowserTracingIntegration(integrations: Integration[]): Inte
   if (isNewBrowserTracingIntegration(browserTracing)) {
     const { options } = browserTracing;
     // eslint-disable-next-line deprecation/deprecation
-    integrations[integrations.indexOf(browserTracing)] = new BrowserTracing(options);
+    integrations[integrations.indexOf(browserTracing)] = svelteKitBrowserTracingIntegration(options);
   }
 
   // If BrowserTracing was added, but it is not our forked version,

packages/sveltekit/test/client/sdk.test.ts

@@ -1,4 +1,4 @@
-import { getClient, getCurrentScope } from '@sentry/core';
+import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, getActiveSpan, getClient, getCurrentScope, spanToJSON } from '@sentry/core';
 import type { BrowserClient } from '@sentry/svelte';
 import * as SentrySvelte from '@sentry/svelte';
 import { SDK_VERSION, WINDOW, browserTracingIntegration } from '@sentry/svelte';
@@ -109,6 +109,9 @@ describe('Sentry client SDK', () => {
 
         expect(browserTracing).toBeDefined();
 
+        // It is a "old" browser tracing integration
+        expect(typeof browserTracing['afterAllSetup']).toBe('undefined');
+
         // This shows that the user-configured options are still here
         expect(options.finalTimeout).toEqual(10);
 
@@ -124,18 +127,25 @@ describe('Sentry client SDK', () => {
           enableTracing: true,
         });
 
-        // eslint-disable-next-line deprecation/deprecation
-        const browserTracing = getClient<BrowserClient>()?.getIntegrationByName('BrowserTracing') as BrowserTracing;
-        const options = browserTracing.options;
+        const browserTracing =
+          getClient<BrowserClient>()?.getIntegrationByName<ReturnType<typeof browserTracingIntegration>>(
+            'BrowserTracing',
+          );
+        const options = browserTracing?.options;
 
         expect(browserTracing).toBeDefined();
 
+        // It is a "new" browser tracing integration
+        expect(typeof browserTracing?.afterAllSetup).toBe('function');
+
         // This shows that the user-configured options are still here
-        expect(options.finalTimeout).toEqual(10);
+        expect(options?.finalTimeout).toEqual(10);
 
-        // But we force the routing instrumentation to be ours
-        // eslint-disable-next-line deprecation/deprecation
-        expect(options.routingInstrumentation).toEqual(svelteKitRoutingInstrumentation);
+        // it is the svelte kit variety
+        expect(getActiveSpan()).toBeDefined();
+        expect(spanToJSON(getActiveSpan()!).data?.[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]).toEqual(
+          'auto.pageload.sveltekit',
+        );
       });
     });
   });