Update BrowserTracing import for tree shaking

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

@@ -4,7 +4,7 @@ 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";
-import { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/tracing";
 import { AppModule } from "./app/app.module";
 
 Sentry.init({
@@ -13,7 +13,7 @@ Sentry.init({
     // Registers and configures the Tracing integration,
     // which automatically instruments your application to monitor its
     // performance, including custom Angular routing instrumentation
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       tracingOrigins: ["localhost", "https://yourserver.io/api"],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),

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

@@ -2,15 +2,15 @@ Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and
 
 ```javascript {tabTitle: ESM}
 import * as Sentry from "@sentry/browser";
-import { Integrations } from "@sentry/tracing";
+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 Integrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.

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

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

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

@@ -6,7 +6,7 @@ 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 { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/tracing";
 
 Vue.use(Router);
 
@@ -18,7 +18,7 @@ Sentry.init({
   Vue,
   dsn: "___PUBLIC_DSN___",
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
       tracingOrigins: ["localhost", "my-site-url.com", /^\//],
     }),
@@ -43,7 +43,7 @@ new Vue({
 import { createApp } from "vue";
 import { createRouter } from "vue-router";
 import * as Sentry from "@sentry/vue";
-import { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/tracing";
 
 const app = createApp({
   // ...
@@ -56,7 +56,7 @@ Sentry.init({
   app,
   dsn: "___PUBLIC_DSN___",
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
       tracingOrigins: ["localhost", "my-site-url.com", /^\//],
     }),

src/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 Integrations.BrowserTracing({
+    new BrowserTracing({
       beforeNavigate: context => {
         return {
           ...context,

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

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

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

@@ -4,7 +4,7 @@
 import * as Sentry from "@sentry/browser";
 
 // If taking advantage of automatic instrumentation (highly recommended)
-import { Integrations as TracingIntegrations } from "@sentry/tracing";
+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
@@ -14,7 +14,7 @@ Sentry.init({
 
   // This enables automatic instrumentation (highly recommended), but is not
   // necessary for purely manual usage
-  integrations: [new TracingIntegrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
 
   // To set a uniform sample rate
   tracesSampleRate: 0.2
@@ -30,7 +30,7 @@ Sentry.init({
 
   // This enables automatic instrumentation (highly recommended), but is not
   // necessary for purely manual usage
-  integrations: [new Sentry.Integrations.BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
 
   // To set a uniform sample rate
   tracesSampleRate: 0.2

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

@@ -2,7 +2,7 @@
 import * as Sentry from "@sentry/react";
 
 // If taking advantage of automatic instrumentation (highly recommended)
-import { Integrations as TracingIntegrations } from "@sentry/tracing";
+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
@@ -12,12 +12,12 @@ Sentry.init({
 
   // This enables automatic instrumentation (highly recommended), but is not
   // necessary for purely manual usage
-  integrations: [new TracingIntegrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
 
   // To set a uniform sample rate
   tracesSampleRate: 0.2
 
   // Alternatively, to control sampling dynamically
   tracesSampler: samplingContext => { ... }
 });
-```
+```

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

@@ -3,7 +3,7 @@ import Vue from "vue";
 import * as Sentry from "@sentry/vue";
 
 // If taking advantage of automatic instrumentation (highly recommended)
-import { Integrations } from "@sentry/tracing";
+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
@@ -15,7 +15,7 @@ Sentry.init({
 
   // This enables automatic instrumentation (highly recommended), but is not
   // necessary for purely manual usage
-  integrations: [new Integrations.BrowserTracing()],
+  integrations: [new BrowserTracing],
 
   // To set a uniform sample rate
   tracesSampleRate: 0.2
@@ -31,7 +31,7 @@ Sentry.init({
 
   // This enables automatic instrumentation (highly recommended), but is not
   // necessary for purely manual usage
-  integrations: [new Sentry.Integrations.BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
 
   // To set a uniform sample rate
   tracesSampleRate: 0.2

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

@@ -6,13 +6,13 @@ After configuration, you will see both `pageload` and `navigation` transactions
 // If you're using one of our integration packages, like `@sentry/angular`,
 // substitute its name for `@sentry/browser` here
 import * as Sentry from "@sentry/browser";
-import { Integrations as TracingIntegrations } from "@sentry/tracing"; // Must import second
+import { BrowserTracing } from "@sentry/tracing"; // Must import second
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   integrations: [
-    new TracingIntegrations.BrowserTracing({
+    new BrowserTracing({
       tracingOrigins: ["localhost", "my-site-url.com", /^\//],
       // ... other options
     }),
@@ -29,7 +29,7 @@ Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   integrations: [
-    new Sentry.Integrations.BrowserTracing({
+    new Sentry.BrowserTracing({
       tracingOrigins: ["localhost", "my-site-url.com", /^\//],
       // ... other options
     }),

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

@@ -7,15 +7,15 @@ import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 
 import * as Sentry from "@sentry/react";
-import { Integrations as TracingIntegrations } from "@sentry/tracing"; // Must import after @sentry/react
+import { BrowserTracing } from "@sentry/tracing"; // Must import after @sentry/react
 
 const history = createBrowserHistory();
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       tracingOrigins: ["localhost", "my-site-url.com", /^\//],
 
       // Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation

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

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

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

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

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

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

src/includes/performance/tracingOrigins-example/javascript.mdx

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

src/includes/performance/tracingOrigins-example/javascript.nextjs.mdx

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

src/platforms/javascript/common/configuration/integrations/custom.mdx

@@ -9,8 +9,8 @@ redirect_from:
 Add a custom integration to your JavaScript using the following format:
 
 ```javascript
-// All integration that come with an SDK can be found on Sentry.Integrations object
-// Custom integration must conform Integration interface: https://github.com/getsentry/sentry-javascript/blob/master/packages/types/src/integration.ts
+// All integrations that come with an SDK can be found on Sentry.Integrations object
+// Custom integration must conform to the Integration interface: https://github.com/getsentry/sentry-javascript/blob/master/packages/types/src/integration.ts
 
 Sentry.init({
   // ...

src/platforms/javascript/common/install/cdn.mdx

@@ -43,7 +43,7 @@ Sentry.init({
   dsn: "___PUBLIC_DSN___",
   // this assumes your build process sets "npm_package_version" in the env
   release: "my-project-name@" + process.env.npm_package_version,
-  integrations: [new Sentry.Integrations.BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control

src/platforms/javascript/common/performance/instrumentation/automatic-instrumentation.mdx

@@ -37,7 +37,7 @@ Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
   integrations: [
-    new Sentry.Integrations.BrowserTracing({
+    new Sentry.BrowserTracing({
       // custom options
     }),
   ],

src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx

@@ -26,13 +26,13 @@ import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 
 import * as Sentry from '@sentry/react';
-import { Integrations } from '@sentry/tracing';
+import { BrowserTracing } from '@sentry/tracing';
 
 const history = createBrowserHistory();
 
 Sentry.init({
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       // Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation
       routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
     }),
@@ -71,7 +71,7 @@ import { Route, Router, Switch, matchPath } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 
 import * as Sentry from '@sentry/react';
-import { Integrations } from '@sentry/tracing';
+import { BrowserTracing } from '@sentry/tracing';
 
 const history = createBrowserHistory();
 
@@ -81,7 +81,7 @@ const routes = [{ path: '/users/:userid' }, { path: '/users' }, { path: '/' }];
 
 Sentry.init({
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       routingInstrumentation: Sentry.reactRouterV5Instrumentation(history, routes, matchPath),
     }),
   ],
@@ -114,7 +114,7 @@ import {Route, Router, Switch } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 
 import * as Sentry from '@sentry/react';
-import { Integrations } from '@sentry/tracing';
+import { BrowserTracing } from '@sentry/tracing';
 
 // Create Custom Sentry Route component
 const SentryRoute = Sentry.withSentryRouting(Route);
@@ -123,7 +123,7 @@ const history = createBrowserHistory();
 
 Sentry.init({
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
     }),
   ],
@@ -154,7 +154,7 @@ To use the router integration, import and set a custom routing instrumentation a
 import * as Router from "react-router";
 
 import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/tracing";
 
 // Routes looks like this:
 const routes = (
@@ -168,7 +168,7 @@ const routes = (
 
 Sentry.init({
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       routingInstrumentation: Sentry.reactRouterV3Instrumentation(
         Router.browserHistory,
         // Must be Plain Routes.