feat(browser): Deprecate BrowserTracing integration

There is a proper replacement for all of them now.

Author: mydea

MIGRATION.md

@@ -10,6 +10,122 @@ npx @sentry/migr8@latest
 This will let you select which updates to run, and automatically update your code. Make sure to still review all code
 changes!
 
+## Depreacted `BrowserTracing` integration
+
+The `BrowserTracing` integration, together with the custom routing instrumentations passed to it, are deprecated in v8.
+Instead, you should use `Sentry.browserTracingIntegration()`.
+
+Package-specific browser tracing integrations are available directly. In most cases, there is a single integration
+provided for each package, which will make sure to set up performance tracing correctly for the given SDK. For react, we
+provide multiple integrations to cover different router integrations:
+
+### `@sentry/browser`, `@sentry/svelte`, `@sentry/gatsby`
+
+```js
+import * as Sentry from '@sentry/browser';
+
+Sentry.init({
+  integrations: [Sentry.browserTracingIntegration()],
+});
+```
+
+### `@sentry/react`
+
+```js
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  integrations: [
+    // No react router
+    Sentry.browserTracingIntegration(),
+    // OR, if you are using react router, instead use one of the following:
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes,
+      stripBasename,
+    }),
+    Sentry.reactRouterV5BrowserTracingIntegration({
+      history,
+    }),
+    Sentry.reactRouterV4BrowserTracingIntegration({
+      history,
+    }),
+    Sentry.reactRouterV3BrowserTracingIntegration({
+      history,
+      routes,
+      match,
+    }),
+  ],
+});
+```
+
+### `@sentry/vue`
+
+```js
+import * as Sentry from '@sentry/vue';
+
+Sentry.init({
+  integrations: [
+    Sentry.browserTracingIntegration({
+      // pass router in, if applicable
+      router,
+    }),
+  ],
+});
+```
+
+### `@sentry/angular` & `@sentry/angular-ivy`
+
+```js
+import * as Sentry from '@sentry/angular';
+
+Sentry.init({
+  integrations: [Sentry.browserTracingIntegration()],
+});
+
+// You still need to add the Trace Service like before!
+```
+
+### `@sentry/remix`
+
+```js
+import * as Sentry from '@sentry/remix';
+
+Sentry.init({
+  integrations: [
+    Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches,
+    }),
+  ],
+});
+```
+
+### `@sentry/nextjs`, `@sentry/astro`, `@sentry/sveltekit`
+
+Browser tracing is automatically set up for you in these packages. If you need to customize the options, you can do it
+like this:
+
+```js
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  integrations: [
+    Sentry.browserTracingIntegration({
+      // add custom options here
+    }),
+  ],
+});
+```
+
+### `@sentry/ember`
+
+Browser tracing is automatically set up for you. You can configure it as before through configuration.
+
 ## Deprecated `transactionContext` passed to `tracesSampler`
 
 Instead of an `transactionContext` being passed to the `tracesSampler` callback, the callback will directly receive
@@ -43,6 +159,7 @@ The following list shows how integrations should be migrated:
 
 | Old                          | New                                 | Packages                                                                                                |
 | ---------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `new BrowserTracing()`       | `browserTracingIntegration()`       | `@sentry/browser`                                                                                       |
 | `new InboundFilters()`       | `inboundFiltersIntegration()`       | `@sentry/core`, `@sentry/browser`, `@sentry/node`, `@sentry/deno`, `@sentry/bun`, `@sentry/vercel-edge` |
 | `new FunctionToString()`     | `functionToStringIntegration()`     | `@sentry/core`, `@sentry/browser`, `@sentry/node`, `@sentry/deno`, `@sentry/bun`, `@sentry/vercel-edge` |
 | `new LinkedErrors()`         | `linkedErrorsIntegration()`         | `@sentry/core`, `@sentry/browser`, `@sentry/node`, `@sentry/deno`, `@sentry/bun`, `@sentry/vercel-edge` |

packages/browser/src/helpers.ts

@@ -201,6 +201,7 @@ export function bundleBrowserTracingIntegration(
   options: Parameters<typeof browserTracingIntegration>[0] = {},
 ): Integration {
   // Migrate some options from the old integration to the new one
+  // eslint-disable-next-line deprecation/deprecation
   const opts: ConstructorParameters<typeof BrowserTracing>[0] = options;
 
   if (typeof options.markBackgroundSpan === 'boolean') {
@@ -215,5 +216,6 @@ export function bundleBrowserTracingIntegration(
     opts.startTransactionOnLocationChange = options.instrumentNavigation;
   }
 
+  // eslint-disable-next-line deprecation/deprecation
   return new BrowserTracing(opts);
 }

packages/browser/src/index.bundle.feedback.ts

@@ -14,10 +14,12 @@ import * as Sentry from './index.bundle.base';
 // eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.Replay = Replay;
 
+// eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 export * from './index.bundle.base';
 export {
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   browserTracingIntegration,
   addTracingExtensions,

packages/browser/src/index.bundle.replay.ts

@@ -14,10 +14,12 @@ import * as Sentry from './index.bundle.base';
 // eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.Replay = Replay;
 
+// eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 export * from './index.bundle.base';
 export {
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   browserTracingIntegration,
   addTracingExtensions,

packages/browser/src/index.bundle.tracing.replay.feedback.ts

@@ -11,6 +11,7 @@ import * as Sentry from './index.bundle.base';
 // eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.Replay = Replay;
 
+// eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 // We are patching the global object with our hub extension methods
@@ -23,6 +24,7 @@ export {
   Replay,
   feedbackIntegration,
   replayIntegration,
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   browserTracingIntegration,
   Span,

packages/browser/src/index.bundle.tracing.replay.ts

@@ -11,6 +11,7 @@ import * as Sentry from './index.bundle.base';
 // eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.Replay = Replay;
 
+// eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 // We are patching the global object with our hub extension methods
@@ -23,6 +24,7 @@ export {
   Replay,
   replayIntegration,
   feedbackIntegration,
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   browserTracingIntegration,
   Span,

packages/browser/src/index.bundle.tracing.ts

@@ -11,6 +11,7 @@ import * as Sentry from './index.bundle.base';
 // eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.Replay = Replay;
 
+// eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 // We are patching the global object with our hub extension methods
@@ -23,6 +24,7 @@ export {
   Replay,
   feedbackIntegration,
   replayIntegration,
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   browserTracingIntegration,
   Span,

packages/browser/src/index.bundle.ts

@@ -15,10 +15,12 @@ import * as Sentry from './index.bundle.base';
 // eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.Replay = Replay;
 
+// eslint-disable-next-line deprecation/deprecation
 Sentry.Integrations.BrowserTracing = BrowserTracing;
 
 export * from './index.bundle.base';
 export {
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   addTracingExtensions,
   // eslint-disable-next-line deprecation/deprecation

packages/browser/src/index.ts

@@ -54,6 +54,7 @@ export {
 } from '@sentry-internal/feedback';
 
 export {
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   defaultRequestInstrumentationOptions,
   instrumentOutgoingRequests,

packages/integration-shims/src/BrowserTracing.ts

@@ -5,6 +5,8 @@ import { consoleSandbox } from '@sentry/utils';
  * This is a shim for the BrowserTracing integration.
  * It is needed in order for the CDN bundles to continue working when users add/remove tracing
  * from it, without changing their config. This is necessary for the loader mechanism.
+ *
+ * @deprecated Use `browserTracingIntegration()` instead.
  */
 class BrowserTracingShim implements Integration {
   /**
@@ -19,6 +21,7 @@ class BrowserTracingShim implements Integration {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public constructor(_options: any) {
+    // eslint-disable-next-line deprecation/deprecation
     this.name = BrowserTracingShim.id;
 
     consoleSandbox(() => {
@@ -39,10 +42,15 @@ class BrowserTracingShim implements Integration {
  * from it, without changing their config. This is necessary for the loader mechanism.
  */
 function browserTracingIntegrationShim(_options: unknown): Integration {
+  // eslint-disable-next-line deprecation/deprecation
   return new BrowserTracingShim({});
 }
 
-export { BrowserTracingShim as BrowserTracing, browserTracingIntegrationShim as browserTracingIntegration };
+export {
+  // eslint-disable-next-line deprecation/deprecation
+  BrowserTracingShim as BrowserTracing,
+  browserTracingIntegrationShim as browserTracingIntegration,
+};
 
 /** Shim function */
 export function addTracingExtensions(): void {

packages/tracing-internal/src/browser/browsertracing.ts

@@ -156,6 +156,8 @@ const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {
  *
  * The integration can be configured with a variety of options, and can be extended to use
  * any routing library. This integration uses {@see IdleTransaction} to create transactions.
+ *
+ * @deprecated Use `browserTracingIntegration()` instead.
  */
 export class BrowserTracing implements Integration {
   // This class currently doesn't have a static `id` field like the other integration classes, because it prevented

packages/tracing-internal/src/browser/index.ts

@@ -2,7 +2,11 @@ export * from '../exports';
 
 export type { RequestInstrumentationOptions } from './request';
 
-export { BrowserTracing, BROWSER_TRACING_INTEGRATION_ID } from './browsertracing';
+export {
+  // eslint-disable-next-line deprecation/deprecation
+  BrowserTracing,
+  BROWSER_TRACING_INTEGRATION_ID,
+} from './browsertracing';
 export {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,

packages/tracing-internal/src/index.ts

@@ -13,6 +13,7 @@ export {
 export type { LazyLoadedIntegration } from './node';
 
 export {
+  // eslint-disable-next-line deprecation/deprecation
   BrowserTracing,
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,

packages/tracing/src/index.ts

@@ -38,6 +38,7 @@ import {
  * import { BrowserTracing } from '@sentry/browser';
  * new BrowserTracing()
  */
+// eslint-disable-next-line deprecation/deprecation
 export const BrowserTracing = BrowserTracingT;
 
 // BrowserTracing is already exported as part of `Integrations` below (and for the moment will remain so for
@@ -50,6 +51,7 @@ export const BrowserTracing = BrowserTracingT;
  * import { BrowserTracing } from '@sentry/browser';
  * new BrowserTracing()
  */
+// eslint-disable-next-line deprecation/deprecation
 export type BrowserTracing = BrowserTracingT;
 
 /**