feat(js): Import BrowserTracing directly from a browser SDK

src/platform-includes/getting-started-config/javascript.angular.mdx

@@ -4,7 +4,6 @@ Once this is done, Sentry's Angular SDK captures all unhandled exceptions and tr
 import { enableProdMode } from "@angular/core";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import * as Sentry from "@sentry/angular-ivy";
-import { BrowserTracing } from "@sentry/tracing";
 import { AppModule } from "./app/app.module";
 
 Sentry.init({
@@ -13,7 +12,7 @@ Sentry.init({
     // Registers and configures the Tracing integration,
     // which automatically instruments your application to monitor its
     // performance, including custom Angular routing instrumentation
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),
@@ -35,7 +34,6 @@ platformBrowserDynamic()
 import { enableProdMode } from "@angular/core";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import * as Sentry from "@sentry/angular";
-import { BrowserTracing } from "@sentry/tracing";
 import { AppModule } from "./app/app.module";
 
 Sentry.init({
@@ -44,7 +42,7 @@ Sentry.init({
     // Registers and configures the Tracing integration,
     // which automatically instruments your application to monitor its
     // performance, including custom Angular routing instrumentation
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),

src/platform-includes/getting-started-config/javascript.mdx

@@ -2,15 +2,14 @@ Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and
 
 ```javascript {tabTitle: ESM}
 import * as Sentry from "@sentry/browser";
-import { BrowserTracing } from "@sentry/tracing";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   // Alternatively, use `process.env.npm_package_version` for a dynamic release version
   // if your build tool supports it.
   release: "[email protected]",
-  integrations: [new BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.

src/platform-includes/getting-started-config/javascript.react.mdx

@@ -2,12 +2,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing";
 import App from "./App";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control

src/platform-includes/getting-started-config/javascript.svelte.mdx

@@ -5,12 +5,11 @@ import "./app.css";
 import App from "./App.svelte";
 
 import * as Sentry from "@sentry/svelte";
-import { BrowserTracing } from "@sentry/tracing";
 
 // Initialize the Sentry SDK here
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
@@ -30,12 +29,11 @@ import "./app.css";
 import App from "./App.svelte";
 
 import * as Sentry from "@sentry/svelte";
-import { BrowserTracing } from "@sentry/tracing";
 
 // Initialize the Sentry SDK here
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.

src/platform-includes/getting-started-config/javascript.vue.mdx

@@ -6,7 +6,6 @@ To initialize Sentry in your Vue application, add this to your `app.js`:
 import Vue from "vue";
 import Router from "vue-router";
 import * as Sentry from "@sentry/vue";
-import { BrowserTracing } from "@sentry/tracing";
 
 Vue.use(Router);
 
@@ -18,7 +17,7 @@ Sentry.init({
   Vue,
   dsn: "___PUBLIC_DSN___",
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
       tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
     }),
@@ -43,7 +42,6 @@ new Vue({
 import { createApp } from "vue";
 import { createRouter } from "vue-router";
 import * as Sentry from "@sentry/vue";
-import { BrowserTracing } from "@sentry/tracing";
 
 const app = createApp({
   // ...
@@ -56,7 +54,7 @@ Sentry.init({
   app,
   dsn: "___PUBLIC_DSN___",
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
       tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
     }),

src/platform-includes/getting-started-install/javascript.angular.mdx

@@ -1,17 +1,17 @@
 ```bash {tabTitle:npm}
 # Angular 12 and newer:
-npm install --save @sentry/angular-ivy @sentry/tracing
+npm install --save @sentry/angular-ivy
 
 # Angular 10 and 11:
-npm install --save @sentry/angular @sentry/tracing
+npm install --save @sentry/angular
 ```
 
 ```bash {tabTitle:Yarn}
 # Angular 12 and newer:
-yarn add @sentry/angular-ivy @sentry/tracing
+yarn add @sentry/angular-ivy
 
 # Angular 10 and 11:
-yarn add @sentry/angular @sentry/tracing
+yarn add @sentry/angular
 ```
 
 ### Angular Version Compatibility

src/platform-includes/getting-started-install/javascript.mdx

@@ -1,9 +1,9 @@
 ```bash {tabTitle: yarn}
-yarn add @sentry/browser @sentry/tracing
+yarn add @sentry/browser
 ```
 
 ```bash {tabTitle: npm}
-npm install --save @sentry/browser @sentry/tracing
+npm install --save @sentry/browser
 ```
 
 <Note>

src/platform-includes/getting-started-install/javascript.react.mdx

@@ -1,7 +1,7 @@
 ```bash {tabTitle: ESM}
 # Using npm
-npm install --save @sentry/react @sentry/tracing
+npm install --save @sentry/react
 
 # Using yarn
-yarn add @sentry/react @sentry/tracing
+yarn add @sentry/react
 ```

src/platform-includes/getting-started-install/javascript.svelte.mdx

@@ -1,7 +1,7 @@
 ```bash {tabTitle:npm}
-npm install --save @sentry/svelte @sentry/tracing
+npm install --save @sentry/svelte
 ```
 
 ```bash {tabTitle:yarn}
-yarn add @sentry/svelte @sentry/tracing
+yarn add @sentry/svelte
 ```

src/platform-includes/getting-started-install/javascript.vue.mdx

@@ -1,7 +1,7 @@
 ```bash {tabTitle:npm}
-npm install --save @sentry/vue @sentry/tracing
+npm install --save @sentry/vue
 ```
 
 ```bash {tabTitle:Yarn}
-yarn add @sentry/vue @sentry/tracing
+yarn add @sentry/vue
 ```

src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx

@@ -1 +1 @@
-The `@sentry/tracing` package provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications.
+The Sentry SDK provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications.

src/platform-includes/performance/beforeNavigate-example/javascript.mdx

@@ -4,7 +4,7 @@ One common use case is parameterizing transaction names. For both `pageload` and
 Sentry.init({
   // ...
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       beforeNavigate: context => {
         return {
           ...context,

src/platform-includes/performance/beforeNavigate-example/javascript.nextjs.mdx

@@ -2,7 +2,7 @@
 Sentry.init({
   // ...
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       beforeNavigate: context => {
         return {
           ...context,

src/platform-includes/performance/configure-sample-rate/javascript.mdx

@@ -3,18 +3,14 @@
 // substitute its name for `@sentry/browser` here
 import * as Sentry from "@sentry/browser";
 
-// If taking advantage of automatic instrumentation (highly recommended)
-import { BrowserTracing } from "@sentry/tracing";
-// Or, if only manually tracing
-// import * as _ from "@sentry/tracing"
-// Note: You MUST import the package in some way for tracing to work
-
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   // This enables automatic instrumentation (highly recommended), but is not
-  // necessary for purely manual usage
-  integrations: [new BrowserTracing()],
+  // necessary for purely manual usage.
+  // If you only want to use manual instrumentation, remove the BrowserTracing integration and add
+  // Sentry.addTracingExtensions() above your Sentry.init() call.
+  integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control

src/platform-includes/performance/configure-sample-rate/javascript.react.mdx

@@ -1,18 +1,14 @@
 ```javascript
 import * as Sentry from "@sentry/react";
 
-// If taking advantage of automatic instrumentation (highly recommended)
-import { BrowserTracing } from "@sentry/tracing";
-// Or, if only manually tracing
-// import * as _ from "@sentry/tracing"
-// Note: You MUST import the package in some way for tracing to work
-
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   // This enables automatic instrumentation (highly recommended), but is not
-  // necessary for purely manual usage
-  integrations: [new BrowserTracing()],
+  // necessary for purely manual usage.
+  // If you only want to use manually, remove the BrowserTracing integration and add
+  // Sentry.addTracingExtensions() above your Sentry.init() call.
+  integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control

src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx

@@ -2,20 +2,16 @@
 import Vue from "vue";
 import * as Sentry from "@sentry/vue";
 
-// If taking advantage of automatic instrumentation (highly recommended)
-import { BrowserTracing } from "@sentry/tracing";
-// Or, if only manually tracing
-// import * as _ from "@sentry/tracing"
-// Note: You MUST import the package in some way for tracing to work
-
 Sentry.init({
   // Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present.
   Vue: Vue,
   dsn: "___PUBLIC_DSN___",
 
   // This enables automatic instrumentation (highly recommended), but is not
   // necessary for purely manual usage
-  integrations: [new BrowserTracing()],
+  // If you only want to use manually, remove the BrowserTracing integration and add
+  // Sentry.addTracingExtensions() above your Sentry.init() call.
+  integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control

src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx

@@ -1,18 +1,17 @@
-To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. (Note that when using ESM modules, the main `@sentry/*` import must come before the `@sentry/tracing` import.)
+To enable tracing, include the `BrowserTracing` integration in your SDK configuration options.
 
 After configuration, you will see both `pageload` and `navigation` transactions in the Sentry UI.
 
 ```javascript {tabTitle: ESM}
 // If you're using one of our framework SDK packages, like `@sentry/angular`,
 // substitute its name for `@sentry/browser` here
 import * as Sentry from "@sentry/browser";
-import { BrowserTracing } from "@sentry/tracing"; // Must import second
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
       // ... other options
     }),

src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx

@@ -1,21 +1,20 @@
-To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. (Note that when using ESM modules, the main `@sentry/react` import must come before the `@sentry/tracing` import.)
+To enable tracing, include the `BrowserTracing` integration in your SDK configuration options.
 
 To use `react-router` integration, import and set a custom routing instrumentation using a custom history. Make sure you use a `Router` component combined with `createBrowserHistory` (or equivalent).
 
 ```javascript
-import { Router } from 'react-router-dom';
-import { createBrowserHistory } from 'history';
+import { Router } from "react-router-dom";
+import { createBrowserHistory } from "history";
 
 import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing"; // Must import after @sentry/react
 
 const history = createBrowserHistory();
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
 
       // Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation

src/platform-includes/performance/enable-tracing/javascript.mdx

@@ -1,22 +1,3 @@
-Install the tracing package:
+Tracing is included by default in the Sentry JavaScript npm packages.
 
-```bash {tabTitle: ESM}
-# Using yarn
-yarn add @sentry/tracing
-
-# Using npm
-npm install --save @sentry/tracing
-```
-
-```html {tabTitle: CDN}
-<script
-  <!--
-    Note that `bundle.tracing.min.js` contains both `@sentry/browser` AND
-    `@sentry/tracing`, and should therefore be used in place of
-    `@sentry/browser`'s bundle rather than in addition to it.
-  -->
-  src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
-  integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
-  crossorigin="anonymous"
-></script>
-```
+If you are using the CDN, make sure you are using a [CDN bundle that has performance monitoring enabled](/platforms/javascript/install/cdn/#default-bundle).

src/platform-includes/performance/filter-span-example/javascript.mdx

@@ -2,7 +2,7 @@
 Sentry.init({
   // ...
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       shouldCreateSpanForRequest: url => {
         // Do not create spans for outgoing requests to a `/health/` endpoint
         return !url.match(/\/health\/?$/);

src/platform-includes/performance/filter-span-example/javascript.nextjs.mdx

@@ -2,7 +2,7 @@
 Sentry.init({
   // ...
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       shouldCreateSpanForRequest: url => {
         // Do not create spans for outgoing requests to a `/health/` endpoint
         return !url.match(/\/health\/?$/);

src/platform-includes/performance/group-transaction-example/javascript.mdx

@@ -15,12 +15,11 @@ For browser JavaScript applications using the `BrowserTracing` integration, the
 
 ```javascript
 import * as Sentry from "@sentry/browser";
-import { BrowserTracing } from "@sentry/tracing";
 
 Sentry.init({
   // ...
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       beforeNavigate: context => {
         return {
           ...context,

src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx

@@ -10,7 +10,7 @@ For example:
 Sentry.init({
   // ...
   integrations: [
-    new BrowserTracing({
+    new Sentry.BrowserTracing({
       tracePropagationTargets: ["api.example.com"],
     }),
   ],