From cfb86d2068bbecb261838cd13e6a9d473ce89688 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Mon, 31 Jan 2022 15:05:04 -0500 Subject: [PATCH] Update BrowserTracing import for tree shaking (#4474) 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 | 6 +++--- .../javascript.react.mdx | 6 +++--- .../configure-sample-rate/javascript.vue.mdx | 6 +++--- .../javascript.mdx | 6 +++--- .../javascript.react.mdx | 4 ++-- .../filter-span-example/javascript.mdx | 2 +- .../filter-span-example/javascript.nextjs.mdx | 2 +- .../group-transaction-example/javascript.mdx | 4 ++-- .../tracingOrigins-example/javascript.mdx | 2 +- .../javascript.nextjs.mdx | 2 +- .../configuration/integrations/custom.mdx | 4 ++-- .../javascript/common/install/cdn.mdx | 2 +- .../automatic-instrumentation.mdx | 2 +- .../integrations/react-router.mdx | 16 +++++++------- .../configuration/integrations/vue-router.mdx | 21 +++++++++---------- .../configuration/integrations/index.mdx | 2 +- src/wizard/capacitor/index.md | 6 +++--- 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 +++---- 30 files changed, 74 insertions(+), 75 deletions(-) diff --git a/src/includes/getting-started-config/javascript.angular.mdx b/src/includes/getting-started-config/javascript.angular.mdx index 8d1ad29c958dc..0a3c1df24749a 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 92c212541f7cb..347d595efd8ac 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 75dd11ab2edce..97db41cdff325 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 7cba5f469d73c..b6409e9de9a45 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 d0caa192a8114..06d0fbccc6149 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 46a829d6572ad..fd406e5d905ac 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 90af047204f60..360ef15edaafd 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 @@ -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.react.mdx b/src/includes/performance/configure-sample-rate/javascript.react.mdx index d225305c5c31f..d455117d7fe00 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 144d62fd276a7..6f5c528b31ffb 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 @@ -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 96475b80efeda..7628077a30bba 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 }), @@ -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/enable-automatic-instrumentation/javascript.react.mdx b/src/includes/performance/enable-automatic-instrumentation/javascript.react.mdx index 3dae235f05012..fa601401a54dc 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 d6eab01f5bf0c..d421c424638ad 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 d798eefc3741e..d421c424638ad 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/includes/performance/group-transaction-example/javascript.mdx b/src/includes/performance/group-transaction-example/javascript.mdx index 9d19d2954302f..f60c5c2ec9635 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 8b371f51c9536..9048d720bf147 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 683b774391f74..85633cef970e5 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 6721589f4ce27..360026240356d 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 485c12d0dd743..3e57069238885 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 49e6025ad1b44..51f403b0e2441 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/react/configuration/integrations/react-router.mdx b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx index 87149a34b57fa..f129e7f538bbf 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 ca8bb83e1a40d..59a2e1d84c819 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, }); @@ -124,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"; @@ -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/platforms/node/common/configuration/integrations/index.mdx b/src/platforms/node/common/configuration/integrations/index.mdx index 1074c39294a6f..5b311de564e14 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 a88c03027a049..1ae68109446cc 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: "", }); ``` diff --git a/src/wizard/javascript/angular.md b/src/wizard/javascript/angular.md index d4345356b6bb9..de75051658021 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 33e5e487f8d4b..25a2c5cf4dde9 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 19b28bc720112..f88f87b2c973e 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 adbdf3d1b76a0..0ba39d5180b59 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 b69ea8eafaf3c..7b703cf52d72e 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 806fd680d46ef..16359002e67e3 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 449f3cac1dd9f..32f370d1c9af1 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", /^\//], }),