Update BrowserTracing import for tree shaking (#4474)

In getsentry/sentry-javascript#4204 we updated the `BrowserTracing` import in the JS SDK to be exported individually. We want users to use this individual import so that the other integrations are treeshaken. This patch updates our documentation to import `BrowserTracing` directly from `@sentry/tracing` instead of through the `Integrations` object, which hopefully should lead to a bundle size reduction for people.

Author: AbhiPrasad

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.