feat(sveltekit): Automatically add BrowserTracing integration

still missing testing for tree-shaking
kinda blocked on @sentry-internal/tracing

Author: Lms24

packages/nextjs/src/client/index.ts

@@ -4,11 +4,11 @@ import type { BrowserOptions } from '@sentry/react';
 import { configureScope, init as reactInit, Integrations } from '@sentry/react';
 import { BrowserTracing, defaultRequestInstrumentationOptions } from '@sentry/tracing';
 import type { EventProcessor } from '@sentry/types';
+import { addOrUpdateIntegration } from '@sentry/utils';
 
 import { devErrorSymbolicationEventProcessor } from '../common/devErrorSymbolicationEventProcessor';
 import { getVercelEnv } from '../common/getVercelEnv';
 import { buildMetadata } from '../common/metadata';
-import { addOrUpdateIntegration } from '../common/userIntegrations';
 import { nextRouterInstrumentation } from './performance';
 import { applyTunnelRouteOption } from './tunnelRoute';
 

packages/nextjs/src/server/index.ts

@@ -4,15 +4,14 @@ import { RewriteFrames } from '@sentry/integrations';
 import type { NodeOptions } from '@sentry/node';
 import { configureScope, getCurrentHub, init as nodeInit, Integrations } from '@sentry/node';
 import type { EventProcessor } from '@sentry/types';
-import { escapeStringForRegex, logger } from '@sentry/utils';
+import type { IntegrationWithExclusionOption } from '@sentry/utils';
+import { addOrUpdateIntegration, escapeStringForRegex, logger } from '@sentry/utils';
 import * as domainModule from 'domain';
 import * as path from 'path';
 
 import { devErrorSymbolicationEventProcessor } from '../common/devErrorSymbolicationEventProcessor';
 import { getVercelEnv } from '../common/getVercelEnv';
 import { buildMetadata } from '../common/metadata';
-import type { IntegrationWithExclusionOption } from '../common/userIntegrations';
-import { addOrUpdateIntegration } from '../common/userIntegrations';
 import { isBuild } from './utils/isBuild';
 
 export * from '@sentry/node';

packages/nextjs/test/clientSdk.test.ts

@@ -3,11 +3,11 @@ import * as SentryReact from '@sentry/react';
 import { WINDOW } from '@sentry/react';
 import { Integrations as TracingIntegrations } from '@sentry/tracing';
 import type { Integration } from '@sentry/types';
+import type { UserIntegrationsFunction } from '@sentry/utils';
 import { logger } from '@sentry/utils';
 import { JSDOM } from 'jsdom';
 
 import { init, Integrations, nextRouterInstrumentation } from '../src/client';
-import type { UserIntegrationsFunction } from '../src/common/userIntegrations';
 
 const { BrowserTracing } = TracingIntegrations;
 

packages/sveltekit/package.json

@@ -25,6 +25,7 @@
     "@sentry/svelte": "7.44.1",
     "@sentry/types": "7.44.1",
     "@sentry/utils": "7.44.1",
+    "@sentry-internal/tracing": "7.44.1",
     "magic-string": "^0.30.0"
   },
   "devDependencies": {

packages/sveltekit/src/client/sdk.ts

@@ -1,18 +1,49 @@
+import { defaultRequestInstrumentationOptions } from '@sentry-internal/tracing';
+import { hasTracingEnabled } from '@sentry/core';
 import type { BrowserOptions } from '@sentry/svelte';
-import { configureScope, init as initSvelteSdk } from '@sentry/svelte';
+import { BrowserTracing, configureScope, init as initSvelteSdk } from '@sentry/svelte';
+import { addOrUpdateIntegration } from '@sentry/utils';
 
 import { applySdkMetadata } from '../common/metadata';
 
+// Treeshakable guard to remove all code related to tracing
+declare const __SENTRY_TRACING__: boolean;
+
 /**
  *
  * @param options
  */
 export function init(options: BrowserOptions): void {
   applySdkMetadata(options, ['sveltekit', 'svelte']);
 
+  addClientIntegrations(options);
+
   initSvelteSdk(options);
 
   configureScope(scope => {
     scope.setTag('runtime', 'browser');
   });
 }
+
+function addClientIntegrations(options: BrowserOptions): void {
+  let integrations = options.integrations || [];
+
+  // This evaluates to true unless __SENTRY_TRACING__ is text-replaced with "false", in which case everything inside
+  // will get treeshaken away
+  if (typeof __SENTRY_TRACING__ === 'undefined' || __SENTRY_TRACING__) {
+    if (hasTracingEnabled(options)) {
+      const defaultBrowserTracingIntegration = new BrowserTracing({
+        tracePropagationTargets: [...defaultRequestInstrumentationOptions.tracePropagationTargets, /^(api\/)/],
+        // TODO: Add SvelteKit router instrumentations
+        // routingInstrumentation: sveltekitRoutingInstrumentation,
+      });
+
+      integrations = addOrUpdateIntegration(defaultBrowserTracingIntegration, integrations, {
+        // TODO: Add SvelteKit router instrumentations
+        // options.routingInstrumentation: sveltekitRoutingInstrumentation,
+      });
+    }
+  }
+
+  options.integrations = integrations;
+}

packages/utils/src/index.ts

@@ -27,3 +27,4 @@ export * from './clientreport';
 export * from './ratelimit';
 export * from './baggage';
 export * from './url';
+export * from './userIntegrations';

packages/nextjs/src/common/userIntegrations.ts renamed to packages/utils/src/userIntegrations.ts

@@ -2,11 +2,6 @@ import type { Integration } from '@sentry/types';
 
 export type UserIntegrationsFunction = (integrations: Integration[]) => Integration[];
 export type UserIntegrations = Integration[] | UserIntegrationsFunction;
-
-type ForcedIntegrationOptions = {
-  [keyPath: string]: unknown;
-};
-
 export type IntegrationWithExclusionOption = Integration & {
   /**
    * Allow the user to exclude this integration by not returning it from a function provided as the `integrations` option
@@ -16,6 +11,10 @@ export type IntegrationWithExclusionOption = Integration & {
   allowExclusionByUser?: boolean;
 };
 
+type ForcedIntegrationOptions = {
+  [keyPath: string]: unknown;
+};
+
 /**
  * Recursively traverses an object to update an existing nested key.
  * Note: The provided key path must include existing properties,

packages/nextjs/test/utils/userIntegrations.test.ts renamed to packages/utils/test/userIntegrations.test.ts

@@ -1,8 +1,5 @@
-import type {
-  IntegrationWithExclusionOption as Integration,
-  UserIntegrations,
-} from '../../src/common/userIntegrations';
-import { addOrUpdateIntegration } from '../../src/common/userIntegrations';
+import type { IntegrationWithExclusionOption as Integration, UserIntegrations } from '../src/userIntegrations';
+import { addOrUpdateIntegration } from '../src/userIntegrations';
 
 type MockIntegrationOptions = {
   name: string;