From b3a9291884ccdcf4f94734702fca2710d1567a34 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 8 Dec 2021 09:08:21 -0500 Subject: [PATCH 1/2] Update BrowserTracing import for tree shaking In https://github.com/getsentry/sentry-javascript/pull/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. --- .../javascript.angular.mdx | 4 ++-- .../getting-started-config/javascript.mdx | 4 ++-- .../javascript.react.mdx | 4 ++-- .../getting-started-config/javascript.vue.mdx | 8 ++++---- .../beforeNavigate-example/javascript.mdx | 2 +- .../javascript.nextjs.mdx | 2 +- .../configure-sample-rate/javascript.mdx | 4 ++-- .../javascript.react.mdx | 6 +++--- .../configure-sample-rate/javascript.vue.mdx | 4 ++-- .../javascript.mdx | 4 ++-- .../javascript.react.mdx | 4 ++-- .../filter-span-example/javascript.mdx | 2 +- .../filter-span-example/javascript.nextjs.mdx | 2 +- .../integrations/react-router.mdx | 16 ++++++++-------- .../configuration/integrations/vue-router.mdx | 19 +++++++++---------- src/wizard/javascript/angular.md | 4 ++-- src/wizard/javascript/angularjs.md | 4 ++-- src/wizard/javascript/backbone.md | 4 ++-- src/wizard/javascript/browser.md | 4 ++-- src/wizard/javascript/index.md | 4 ++-- src/wizard/javascript/react.md | 4 ++-- src/wizard/javascript/vue.md | 8 ++++---- 22 files changed, 58 insertions(+), 59 deletions(-) diff --git a/src/includes/getting-started-config/javascript.angular.mdx b/src/includes/getting-started-config/javascript.angular.mdx index 8d1ad29c958dc4..0a3c1df24749a4 100644 --- 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 index 92c212541f7cb9..347d595efd8ac5 100644 --- a/src/includes/getting-started-config/javascript.mdx +++ b/src/includes/getting-started-config/javascript.mdx @@ -2,7 +2,7 @@ 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___", @@ -10,7 +10,7 @@ Sentry.init({ // 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 index 75dd11ab2edce9..97db41cdff325d 100644 --- 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 index 7cba5f469d73cd..b6409e9de9a451 100644 --- 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 index d0caa192a81142..06d0fbccc61498 100644 --- 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 index 46a829d6572ad1..fd406e5d905ac7 100644 --- 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 index 90af047204f60d..6f36a9b1ce309c 100644 --- 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 index d225305c5c31fb..d455117d7fe00e 100644 --- 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,7 +12,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 @@ -20,4 +20,4 @@ Sentry.init({ // Alternatively, to control sampling dynamically tracesSampler: samplingContext => { ... } }); -``` \ No newline at end of file +``` diff --git a/src/includes/performance/configure-sample-rate/javascript.vue.mdx b/src/includes/performance/configure-sample-rate/javascript.vue.mdx index 144d62fd276a75..5e2d9390c88c98 100644 --- 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 index 96475b80efedaf..56814814cd69d2 100644 --- 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 index 3dae235f050120..fa601401a54dc0 100644 --- a/src/includes/performance/enable-automatic-instrumentation/javascript.react.mdx +++ b/src/includes/performance/enable-automatic-instrumentation/javascript.react.mdx @@ -7,7 +7,7 @@ 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(); @@ -15,7 +15,7 @@ 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 index d6eab01f5bf0c7..d421c424638ad9 100644 --- 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 index d798eefc3741ef..d421c424638ad9 100644 --- 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 index 87149a34b57fa2..f129e7f538bbf9 100644 --- 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 index ca8bb83e1a40dd..728b1548fbc51a 100644 --- a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx +++ b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx @@ -8,16 +8,15 @@ 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: @@ -25,11 +24,11 @@ The most basic configuration for tracing your Vue app, which would track only th ```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 index d4345356b6bb9c..de75051658021e 100644 --- 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 index 33e5e487f8d4bd..25a2c5cf4dde92 100644 --- 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 index 19b28bc7201127..f88f87b2c973e1 100644 --- a/src/wizard/javascript/backbone.md +++ b/src/wizard/javascript/backbone.md @@ -20,11 +20,11 @@ We also support alternate [installation methods](/platforms/javascript/install/) ```javascript import * as Sentry from "@sentry/browser"; -import { Integrations } from "@sentry/tracing"; +import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new Integrations.BrowserTracing()], + integrations: [new BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/browser.md b/src/wizard/javascript/browser.md index adbdf3d1b76a0e..0ba39d5180b59e 100644 --- a/src/wizard/javascript/browser.md +++ b/src/wizard/javascript/browser.md @@ -20,11 +20,11 @@ We also support alternate [installation methods](/platforms/javascript/install/) ```javascript import * as Sentry from "@sentry/browser"; -import { Integrations } from "@sentry/tracing"; +import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new Integrations.BrowserTracing()], + integrations: [new BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/index.md b/src/wizard/javascript/index.md index b69ea8eafaf3c3..7b703cf52d72e2 100644 --- a/src/wizard/javascript/index.md +++ b/src/wizard/javascript/index.md @@ -20,11 +20,11 @@ We also support alternate [installation methods](/platforms/javascript/install/) ```javascript import * as Sentry from "@sentry/browser"; -import { Integrations } from "@sentry/tracing"; +import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new Integrations.BrowserTracing()], + integrations: [new BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/react.md b/src/wizard/javascript/react.md index 806fd680d46ef8..16359002e67e3e 100644 --- a/src/wizard/javascript/react.md +++ b/src/wizard/javascript/react.md @@ -21,12 +21,12 @@ Next, import and initialize the Sentry module as early as possible, before initi 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()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/vue.md b/src/wizard/javascript/vue.md index 449f3cac1dd9fd..32f370d1c9af1e 100644 --- a/src/wizard/javascript/vue.md +++ b/src/wizard/javascript/vue.md @@ -34,7 +34,7 @@ Next, initialize Sentry in your app entry point before you initialize your root 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); @@ -46,7 +46,7 @@ Sentry.init({ Vue, dsn: "___PUBLIC_DSN___", integrations: [ - new Integrations.BrowserTracing({ + new BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^\//], }), @@ -71,7 +71,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({ // ... @@ -84,7 +84,7 @@ Sentry.init({ app, dsn: "___PUBLIC_DSN___", integrations: [ - new Integrations.BrowserTracing({ + new BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^\//], }), From 8e22845c0b5b893079aa86ef56332de92a627e71 Mon Sep 17 00:00:00 2001 From: Katie Byers Date: Mon, 31 Jan 2022 12:00:31 -0800 Subject: [PATCH 2/2] convert missing examples --- .../performance/configure-sample-rate/javascript.mdx | 2 +- .../performance/configure-sample-rate/javascript.vue.mdx | 2 +- .../enable-automatic-instrumentation/javascript.mdx | 2 +- .../performance/group-transaction-example/javascript.mdx | 4 ++-- .../performance/tracingOrigins-example/javascript.mdx | 2 +- .../tracingOrigins-example/javascript.nextjs.mdx | 2 +- .../javascript/common/configuration/integrations/custom.mdx | 4 ++-- src/platforms/javascript/common/install/cdn.mdx | 2 +- .../instrumentation/automatic-instrumentation.mdx | 2 +- .../guides/vue/configuration/integrations/vue-router.mdx | 2 +- .../node/common/configuration/integrations/index.mdx | 2 +- src/wizard/capacitor/index.md | 6 +++--- 12 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/includes/performance/configure-sample-rate/javascript.mdx b/src/includes/performance/configure-sample-rate/javascript.mdx index 6f36a9b1ce309c..360ef15edaafd3 100644 --- a/src/includes/performance/configure-sample-rate/javascript.mdx +++ b/src/includes/performance/configure-sample-rate/javascript.mdx @@ -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 diff --git a/src/includes/performance/configure-sample-rate/javascript.vue.mdx b/src/includes/performance/configure-sample-rate/javascript.vue.mdx index 5e2d9390c88c98..6f5c528b31ffb1 100644 --- a/src/includes/performance/configure-sample-rate/javascript.vue.mdx +++ b/src/includes/performance/configure-sample-rate/javascript.vue.mdx @@ -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 diff --git a/src/includes/performance/enable-automatic-instrumentation/javascript.mdx b/src/includes/performance/enable-automatic-instrumentation/javascript.mdx index 56814814cd69d2..7628077a30bba6 100644 --- a/src/includes/performance/enable-automatic-instrumentation/javascript.mdx +++ b/src/includes/performance/enable-automatic-instrumentation/javascript.mdx @@ -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 }), diff --git a/src/includes/performance/group-transaction-example/javascript.mdx b/src/includes/performance/group-transaction-example/javascript.mdx index 9d19d2954302f3..f60c5c2ec9635a 100644 --- a/src/includes/performance/group-transaction-example/javascript.mdx +++ b/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, diff --git a/src/includes/performance/tracingOrigins-example/javascript.mdx b/src/includes/performance/tracingOrigins-example/javascript.mdx index 8b371f51c9536d..9048d720bf147a 100644 --- a/src/includes/performance/tracingOrigins-example/javascript.mdx +++ b/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"], }), ], diff --git a/src/includes/performance/tracingOrigins-example/javascript.nextjs.mdx b/src/includes/performance/tracingOrigins-example/javascript.nextjs.mdx index 683b774391f740..85633cef970e51 100644 --- a/src/includes/performance/tracingOrigins-example/javascript.nextjs.mdx +++ b/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"], }), ], diff --git a/src/platforms/javascript/common/configuration/integrations/custom.mdx b/src/platforms/javascript/common/configuration/integrations/custom.mdx index 6721589f4ce27c..360026240356d3 100644 --- a/src/platforms/javascript/common/configuration/integrations/custom.mdx +++ b/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({ // ... diff --git a/src/platforms/javascript/common/install/cdn.mdx b/src/platforms/javascript/common/install/cdn.mdx index 485c12d0dd7433..3e57069238885a 100644 --- a/src/platforms/javascript/common/install/cdn.mdx +++ b/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 diff --git a/src/platforms/javascript/common/performance/instrumentation/automatic-instrumentation.mdx b/src/platforms/javascript/common/performance/instrumentation/automatic-instrumentation.mdx index 49e6025ad1b448..51f403b0e2441a 100644 --- a/src/platforms/javascript/common/performance/instrumentation/automatic-instrumentation.mdx +++ b/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 }), ], diff --git a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx index 728b1548fbc51a..59a2e1d84c8195 100644 --- a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx +++ b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx @@ -123,7 +123,7 @@ If you are using Vue Router, you can use our provided integration for better tra import Vue from "vue"; import App from "./App"; import * as Sentry from "@sentry/vue"; -import { Integrations } from "@sentry/tracing"; +import { BrowserTracing } from "@sentry/tracing"; import Router from "vue-router"; import HelloWorld from "@/components/HelloWorld"; diff --git a/src/platforms/node/common/configuration/integrations/index.mdx b/src/platforms/node/common/configuration/integrations/index.mdx index 1074c39294a6f7..5b311de564e145 100644 --- a/src/platforms/node/common/configuration/integrations/index.mdx +++ b/src/platforms/node/common/configuration/integrations/index.mdx @@ -16,7 +16,7 @@ const Sentry = require("@sentry/node"); // import * as Sentry from '@sentry/node'; // All integrations that come with an SDK can be found on the Sentry.Integrations object -// Custom integrations must conform Integration interface: https://github.com/getsentry/sentry-javascript/blob/master/packages/types/src/index.ts +// Custom integrations must conform to the Integration interface: https://github.com/getsentry/sentry-javascript/blob/master/packages/types/src/index.ts Sentry.init({ dsn: "___PUBLIC_DSN___", diff --git a/src/wizard/capacitor/index.md b/src/wizard/capacitor/index.md index a88c03027a0495..1ae68109446cc5 100644 --- a/src/wizard/capacitor/index.md +++ b/src/wizard/capacitor/index.md @@ -81,7 +81,7 @@ With Ionic/Angular: import * as Sentry from "@sentry/capacitor"; import * as SentryAngular from "@sentry/angular"; // 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 "@sentry/tracing"; // Note: You MUST import the package in some way for tracing to work @@ -96,7 +96,7 @@ Sentry.init( // We recommend adjusting this value in production. tracesSampleRate: 1.0, integrations: [ - new TracingIntegrations.BrowserTracing({ + new BrowserTracing({ tracingOrigins: ["localhost", "https://yourserver.io/api"], }), ] @@ -128,7 +128,7 @@ Sentry.init({ // Set your release version, such as "getsentry@1.0.0" release: "my-project-name@", // Set your dist version, such as "1" - dist: "" + dist: "", }); ```