Update BrowserTracing import for tree shaking

AbhiPrasad · lobsterkatie · commit b3a9291884cc · 2022-01-31T12:01:00.000-08:00
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.
diff --git a/src/includes/getting-started-config/javascript.angular.mdx b/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,
     }),
diff --git a/src/includes/getting-started-config/javascript.mdx b/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: "my-project-name@2.3.12",
-  integrations: [new Integrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
diff --git a/src/includes/getting-started-config/javascript.react.mdx b/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
diff --git a/src/includes/getting-started-config/javascript.vue.mdx b/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", /^\//],
     }),
diff --git a/src/includes/performance/beforeNavigate-example/javascript.mdx b/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,
diff --git a/src/includes/performance/beforeNavigate-example/javascript.nextjs.mdx b/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,
diff --git a/src/includes/performance/configure-sample-rate/javascript.mdx b/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
diff --git a/src/includes/performance/configure-sample-rate/javascript.react.mdx b/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 => { ... }
 });
-```
+```
diff --git a/src/includes/performance/configure-sample-rate/javascript.vue.mdx b/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
diff --git a/src/includes/performance/enable-automatic-instrumentation/javascript.mdx b/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
     }),
diff --git a/src/includes/performance/enable-automatic-instrumentation/javascript.react.mdx b/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
diff --git a/src/includes/performance/filter-span-example/javascript.mdx b/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\/?$/);
diff --git a/src/includes/performance/filter-span-example/javascript.nextjs.mdx b/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\/?$/);
diff --git a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx b/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.
diff --git a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx
@@ -8,28 +8,27 @@ redirect_from:
 The Vue Tracing Integration allows you to track rendering performance during an initial application load.
 
 Sentry uses mixins functionality to provide access to a Vue component during its life cycle stages.
-When Sentry encounters a component named `root`, which is a top-level Vue instance (as in `new Vue({})`), we use our BrowserTracing integration,
-and create a new span named `Vue Application Render`. Once the `Vue Application Render` span has been created, it will wait until all of its child components render before marking the span as finished.
+When Sentry encounters a component named `root`, which is a top-level Vue instance (as in `new Vue({})`), we use our `BrowserTracing` integration, and create a new span named `Vue Application Render`. Once the `Vue Application Render` span has been created, it will wait until all of its child components render before marking the span as finished.
 
 The described instrumentation functionality will give you very high-level information about the rendering performance of the Vue instance. However, the integration can also provide more fine-grained details about what actually happened during a specific activity.
 To do that, you need to specify which components to track and what hooks to listen to (you can find a list of all available hooks [here](https://vuejs.org/v2/api/#Options-Lifecycle-Hooks)). You can also turn on tracking for all the components. However, it may be rather noisy if your app consists of hundreds of components. We encourage being more specific. If you don't provide hooks, Sentry will track a component's `mount` and `update` hooks.
 
 Note that when specifying hooks we use the simple verb rather than `before` and `-ed` pairs. For example, `destroy` is correct. `beforeDestroy` and `destroyed` are incorrect.
 
-To set up the Vue Tracing Integration, you will first need to configure the BrowserTracing integration itself. For details on how to do this, check out our [Performance documentation](/platforms/javascript/guides/vue/performance/).
-Once you've configured the BrowserTracing integration, move on to configuring the Vue integration itself.
+To set up the Vue Tracing Integration, you will first need to configure the `BrowserTracing` integration itself. For details on how to do this, check out our [Performance documentation](/platforms/javascript/guides/vue/performance/).
+Once you've configured the `BrowserTracing` integration, move on to configuring the Vue integration itself.
 Sentry built the new tracing capabilities into the original Vue error handler integrations, so there is no need to add any new packages. You only need to provide an appropriate configuration.
 
 The most basic configuration for tracing your Vue app, which would track only the top-level component, looks like this:
 
 ```javascript
 import Vue from "vue";
 import * as Sentry from "@sentry/browser";
-import { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/tracing";
 
 Sentry.init({
   // ...
-  integrations: [new Integrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control
@@ -51,7 +50,7 @@ Or, you can choose more granularity:
 ```javascript
 Sentry.init({
   Vue,
-  integrations: [new Integrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
   trackComponents: [
     "App",
     "RwvHeader",
@@ -67,7 +66,7 @@ If you want to know if some components are, for example, removed during the init
 ```javascript
 Sentry.init({
   Vue,
-  integrations: [new Integrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
   trackComponents: [
     "App",
     "RwvHeader",
@@ -85,7 +84,7 @@ Every new rendering cycle is debouncing the timeout, and it starts counting from
 ```javascript
 Sentry.init({
   Vue,
-  integrations: [new Integrations.BrowserTracing()],
+  integrations: [new BrowserTracing()],
   trackComponents: true,
   timeout: 4000,
 });
@@ -152,7 +151,7 @@ Sentry.init({
   dsn: "___PUBLIC_DSN___",
   tracesSampleRate: 1.0,
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
     }),
   ],
diff --git a/src/wizard/javascript/angular.md b/src/wizard/javascript/angular.md
@@ -23,14 +23,14 @@ You should `init` the Sentry browser SDK as soon as possible during your applica
 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({
   dsn: "___PUBLIC_DSN___",
   integrations: [
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       tracingOrigins: ["localhost", "https://yourserver.io/api"],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),
diff --git a/src/wizard/javascript/angularjs.md b/src/wizard/javascript/angularjs.md
@@ -22,14 +22,14 @@ npm install --save @sentry/browser @sentry/integrations
 ```javascript
 import angular from "angular";
 import * as Sentry from "@sentry/browser";
-import { Integrations } from "@sentry/tracing";
+import { BrowserTracing } from "@sentry/tracing";
 import { Angular as AngularIntegration } from "@sentry/integrations";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
   integrations: [
     new AngularIntegration(),
-    new Integrations.BrowserTracing({
+    new BrowserTracing({
       tracingOrigins: ["localhost", "https://yourserver.io/api"],
     }),
   ],
diff --git a/src/wizard/javascript/backbone.md b/src/wizard/javascript/backbone.md
diff --git a/src/wizard/javascript/browser.md b/src/wizard/javascript/browser.md
diff --git a/src/wizard/javascript/index.md b/src/wizard/javascript/index.md
diff --git a/src/wizard/javascript/react.md b/src/wizard/javascript/react.md
diff --git a/src/wizard/javascript/vue.md b/src/wizard/javascript/vue.md
