diff --git a/src/platform-includes/getting-started-config/javascript.angular.mdx b/src/platform-includes/getting-started-config/javascript.angular.mdx index 5d87429ee5f34..decaf89458a97 100644 --- a/src/platform-includes/getting-started-config/javascript.angular.mdx +++ b/src/platform-includes/getting-started-config/javascript.angular.mdx @@ -4,7 +4,6 @@ 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-ivy"; -import { BrowserTracing } from "@sentry/tracing"; import { AppModule } from "./app/app.module"; Sentry.init({ @@ -13,7 +12,7 @@ Sentry.init({ // Registers and configures the Tracing integration, // which automatically instruments your application to monitor its // performance, including custom Angular routing instrumentation - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], routingInstrumentation: Sentry.routingInstrumentation, }), @@ -35,7 +34,6 @@ platformBrowserDynamic() import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import * as Sentry from "@sentry/angular"; -import { BrowserTracing } from "@sentry/tracing"; import { AppModule } from "./app/app.module"; Sentry.init({ @@ -44,7 +42,7 @@ Sentry.init({ // Registers and configures the Tracing integration, // which automatically instruments your application to monitor its // performance, including custom Angular routing instrumentation - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], routingInstrumentation: Sentry.routingInstrumentation, }), diff --git a/src/platform-includes/getting-started-config/javascript.mdx b/src/platform-includes/getting-started-config/javascript.mdx index 2ee1196d78437..324ed409499e4 100644 --- a/src/platform-includes/getting-started-config/javascript.mdx +++ b/src/platform-includes/getting-started-config/javascript.mdx @@ -2,7 +2,6 @@ Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and ```javascript {tabTitle: ESM} import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", @@ -10,7 +9,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 BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/platform-includes/getting-started-config/javascript.react.mdx b/src/platform-includes/getting-started-config/javascript.react.mdx index 12a20c8625fb9..8d9d02eabe493 100644 --- a/src/platform-includes/getting-started-config/javascript.react.mdx +++ b/src/platform-includes/getting-started-config/javascript.react.mdx @@ -2,12 +2,11 @@ import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; import App from "./App"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/getting-started-config/javascript.svelte.mdx b/src/platform-includes/getting-started-config/javascript.svelte.mdx index db6e2aeb2e3f2..ebe0d2cd07447 100644 --- a/src/platform-includes/getting-started-config/javascript.svelte.mdx +++ b/src/platform-includes/getting-started-config/javascript.svelte.mdx @@ -5,12 +5,11 @@ import "./app.css"; import App from "./App.svelte"; import * as Sentry from "@sentry/svelte"; -import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. @@ -30,12 +29,11 @@ import "./app.css"; import App from "./App.svelte"; import * as Sentry from "@sentry/svelte"; -import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx index 293ddd69c8f4c..83ad13f92a236 100644 --- a/src/platform-includes/getting-started-config/javascript.vue.mdx +++ b/src/platform-includes/getting-started-config/javascript.vue.mdx @@ -6,7 +6,6 @@ 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 { BrowserTracing } from "@sentry/tracing"; Vue.use(Router); @@ -18,7 +17,7 @@ Sentry.init({ Vue, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), @@ -43,7 +42,6 @@ new Vue({ import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; const app = createApp({ // ... @@ -56,7 +54,7 @@ Sentry.init({ app, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), diff --git a/src/platform-includes/getting-started-install/javascript.angular.mdx b/src/platform-includes/getting-started-install/javascript.angular.mdx index 115ac9462765d..a061c7d9ee626 100644 --- a/src/platform-includes/getting-started-install/javascript.angular.mdx +++ b/src/platform-includes/getting-started-install/javascript.angular.mdx @@ -1,17 +1,17 @@ ```bash {tabTitle:npm} # Angular 12 and newer: -npm install --save @sentry/angular-ivy @sentry/tracing +npm install --save @sentry/angular-ivy # Angular 10 and 11: -npm install --save @sentry/angular @sentry/tracing +npm install --save @sentry/angular ``` ```bash {tabTitle:Yarn} # Angular 12 and newer: -yarn add @sentry/angular-ivy @sentry/tracing +yarn add @sentry/angular-ivy # Angular 10 and 11: -yarn add @sentry/angular @sentry/tracing +yarn add @sentry/angular ``` ### Angular Version Compatibility diff --git a/src/platform-includes/getting-started-install/javascript.mdx b/src/platform-includes/getting-started-install/javascript.mdx index cd2841d854465..55aad846e0fb1 100644 --- a/src/platform-includes/getting-started-install/javascript.mdx +++ b/src/platform-includes/getting-started-install/javascript.mdx @@ -1,9 +1,9 @@ ```bash {tabTitle: yarn} -yarn add @sentry/browser @sentry/tracing +yarn add @sentry/browser ``` ```bash {tabTitle: npm} -npm install --save @sentry/browser @sentry/tracing +npm install --save @sentry/browser ``` diff --git a/src/platform-includes/getting-started-install/javascript.react.mdx b/src/platform-includes/getting-started-install/javascript.react.mdx index 8ac717be27ca6..f2d9d4db2d7a9 100644 --- a/src/platform-includes/getting-started-install/javascript.react.mdx +++ b/src/platform-includes/getting-started-install/javascript.react.mdx @@ -1,7 +1,7 @@ ```bash {tabTitle: ESM} # Using npm -npm install --save @sentry/react @sentry/tracing +npm install --save @sentry/react # Using yarn -yarn add @sentry/react @sentry/tracing +yarn add @sentry/react ``` diff --git a/src/platform-includes/getting-started-install/javascript.svelte.mdx b/src/platform-includes/getting-started-install/javascript.svelte.mdx index ebe41c67152b1..a98085fbd28f9 100644 --- a/src/platform-includes/getting-started-install/javascript.svelte.mdx +++ b/src/platform-includes/getting-started-install/javascript.svelte.mdx @@ -1,7 +1,7 @@ ```bash {tabTitle:npm} -npm install --save @sentry/svelte @sentry/tracing +npm install --save @sentry/svelte ``` ```bash {tabTitle:yarn} -yarn add @sentry/svelte @sentry/tracing +yarn add @sentry/svelte ``` diff --git a/src/platform-includes/getting-started-install/javascript.vue.mdx b/src/platform-includes/getting-started-install/javascript.vue.mdx index 4954194201946..7ceea0f06b239 100644 --- a/src/platform-includes/getting-started-install/javascript.vue.mdx +++ b/src/platform-includes/getting-started-install/javascript.vue.mdx @@ -1,7 +1,7 @@ ```bash {tabTitle:npm} -npm install --save @sentry/vue @sentry/tracing +npm install --save @sentry/vue ``` ```bash {tabTitle:Yarn} -yarn add @sentry/vue @sentry/tracing +yarn add @sentry/vue ``` diff --git a/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx b/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx index 5954d16564a35..1f6b710f5c6f5 100644 --- a/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx +++ b/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx @@ -1 +1 @@ -The `@sentry/tracing` package provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications. +The Sentry SDK package provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications. diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.mdx index f140ce658ede4..6a607b095df2f 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.mdx @@ -4,17 +4,15 @@ import * as Sentry from "@sentry/browser"; // If taking advantage of automatic instrumentation (highly recommended) -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 +// Sentry.addTracingExtensions(); Sentry.init({ dsn: "___PUBLIC_DSN___", // This enables automatic instrumentation (highly recommended), but is not // necessary for purely manual usage - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx index 44aed3cf2f0db..564445a03077b 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx @@ -1,18 +1,15 @@ ```javascript import * as Sentry from "@sentry/react"; -// If taking advantage of automatic instrumentation (highly recommended) -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 +// If only manually tracing (not using the `BrowserTracing` integration) +// Sentry.addTracingExtensions(); Sentry.init({ dsn: "___PUBLIC_DSN___", // This enables automatic instrumentation (highly recommended), but is not // necessary for purely manual usage - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx index b7e449163492a..f472efd9d20fb 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx @@ -2,11 +2,8 @@ import Vue from "vue"; import * as Sentry from "@sentry/vue"; -// If taking advantage of automatic instrumentation (highly recommended) -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 +// If only manually tracing (not using the `BrowserTracing` integration) +// Sentry.addTracingExtensions(); Sentry.init({ // Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present. @@ -15,7 +12,7 @@ Sentry.init({ // This enables automatic instrumentation (highly recommended), but is not // necessary for purely manual usage - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx index cba71fba6d5da..99e1bf0914a88 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx @@ -1,4 +1,4 @@ -To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. (Note that when using ESM modules, the main `@sentry/*` import must come before the `@sentry/tracing` import.) +To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. After configuration, you will see both `pageload` and `navigation` transactions in the Sentry UI. @@ -6,13 +6,12 @@ After configuration, you will see both `pageload` and `navigation` transactions // If you're using one of our framework SDK packages, like `@sentry/angular`, // substitute its name for `@sentry/browser` here import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; // Must import second Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], // ... other options }), diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx index 058bcd20d2cf0..11ea14dd940a5 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx @@ -1,13 +1,12 @@ -To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. (Note that when using ESM modules, the main `@sentry/react` import must come before the `@sentry/tracing` import.) +To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. To use `react-router` integration, import and set a custom routing instrumentation using a custom history. Make sure you use a `Router` component combined with `createBrowserHistory` (or equivalent). ```javascript -import { Router } from 'react-router-dom'; -import { createBrowserHistory } from 'history'; +import { Router } from "react-router-dom"; +import { createBrowserHistory } from "history"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; // Must import after @sentry/react const history = createBrowserHistory(); @@ -15,7 +14,7 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], // Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation diff --git a/src/platform-includes/performance/group-transaction-example/javascript.mdx b/src/platform-includes/performance/group-transaction-example/javascript.mdx index f60c5c2ec9635..8229c6a937098 100644 --- a/src/platform-includes/performance/group-transaction-example/javascript.mdx +++ b/src/platform-includes/performance/group-transaction-example/javascript.mdx @@ -15,12 +15,11 @@ For browser JavaScript applications using the `BrowserTracing` integration, the ```javascript import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ // ... integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ beforeNavigate: context => { return { ...context, diff --git a/src/platforms/common/performance/index.mdx b/src/platforms/common/performance/index.mdx index df07948f0e7ac..001d13360a1fc 100644 --- a/src/platforms/common/performance/index.mdx +++ b/src/platforms/common/performance/index.mdx @@ -131,7 +131,7 @@ Learn more about using and customizing the React Profiler in [React Component Tr ## React Router -If you are using `react-router`, we provide React Router instrumentation to use with our `@sentry/tracing` package. +If you are using `react-router`, we provide React Router instrumentation to use with our Performance Monitoring functionality. diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index 368574a606331..42f1a6c8fbcf0 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -25,7 +25,7 @@ To make optional code eligible for tree shaking, you can replace various flags i : Replacing this flag with `false` will tree shake all code in the SDK that is related to performance monitoring. **Attention:** `__SENTRY_TRACING__` must not be replaced with `false` when you're directly using the `@sentry/tracing` package, or when you're using any performance monitoring related SDK features (e.g. `Sentry.startTransaction()`). -This flag is intended to be used in combination with packages like `@sentry/next` where the `@sentry/tracing` package is used implicitly. +This flag is intended to be used in combination with packages like `@sentry/nextjs` where the `@sentry/tracing` package is used implicitly. diff --git a/src/platforms/javascript/common/configuration/webworkers/index.mdx b/src/platforms/javascript/common/configuration/webworkers/index.mdx index 4474e6fd2c261..44b980361ec4b 100644 --- a/src/platforms/javascript/common/configuration/webworkers/index.mdx +++ b/src/platforms/javascript/common/configuration/webworkers/index.mdx @@ -85,7 +85,7 @@ self.onmessage = message => { ### Integrations -Using non-default integrations such as [@sentry/tracing](/platforms/javascript/performance/) inside Web Workers may not work as expected. Non-default integrations enabled outside workers' scope are not affected by worker-level configurations and will still work as expected. +Using non-default integrations such as [Sentry Performance Monitoring](/platforms/javascript/performance/) inside Web Workers may not work as expected. Non-default integrations enabled outside workers' scope are not affected by worker-level configurations and will still work as expected. ### Source Maps 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 a9cded273d188..c0b8f1218761f 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -11,13 +11,14 @@ React Router support is included in the `@sentry/react` package since version `5 -The React Router integration is designed to work with our Tracing SDK, `@sentry/tracing`. Please see [Getting Started with React Performance](/product/performance/getting-started/?platform=react) for more details on how to set up and install the SDK. +The React Router integration is designed to work with Sentry Performance Monitoring. Please see [Getting Started with React Performance](/product/performance/getting-started/?platform=react) for more details on how to set up and install the SDK. We support integrations for React Router 3, 4, 5, and 6. ## React Router v6 + _(Available in version 7 and above)_ To use React Router v6 with Sentry: @@ -30,38 +31,36 @@ Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation -Make sure `Sentry.reactRouterV6Instrumentation` is initialized by your `Sentry.init` call, before you wrap `` component or `useRoutes` hook. Otherwise, the routing instrumentation may not work properly. +Make sure `Sentry.reactRouterV6Instrumentation` is initialized by your `Sentry.init` call, before you wrap `` component or `useRoutes` hook. Otherwise, the routing instrumentation may not work properly. ### Usage with React Router 6.4 Data API -_(Available in version 7.21.0 and above)_ +_(Available in version 7.21.0 and above)_ If you choose to create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from the `react-router-dom` package, you can use `Sentry.wrapCreateBrowserRouter` to wrap it with the instrumentation: ```javascript -import { createBrowserRouter } from 'react-router-dom'; -import * as Sentry from '@sentry/react'; -import { BrowserTracing } from '@sentry/tracing'; +import { createBrowserRouter } from "react-router-dom"; +import * as Sentry from "@sentry/react"; Sentry.init({ - dsn: '___PUBLIC_DSN___', + dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.reactRouterV6Instrumentation( - React.useEffect, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, + React.useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes ), }), ], tracesSampleRate: 1.0, }); - const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter( createBrowserRouter ); @@ -69,7 +68,6 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter( const router = sentryCreateBrowserRouter([ // ... ]); - ``` @@ -78,52 +76,51 @@ While [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-r - ### Usage With `` Component If you use the `` component from `react-router-dom` to define your routes, wrap [`Routes`](https://reactrouter.com/docs/en/v6/api#routes-and-route) using `Sentry.withSentryReactRouterV6Routing`. This creates a higher order component, which will enable Sentry to reach your router context, as in the example below: ```javascript -import React from 'react'; +import React from "react"; import ReactDOM from "react-dom"; import { - Routes, - BrowserRouter, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, + Routes, + BrowserRouter, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes, } from "react-router-dom"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ - integrations: [ - new BrowserTracing({ - routingInstrumentation: Sentry.reactRouterV6Instrumentation( - React.useEffect, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, - ), - }), - ], - tracesSampleRate: 1.0, + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV6Instrumentation( + React.useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes + ), + }), + ], + tracesSampleRate: 1.0, }); -const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes) +const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes); ReactDOM.render( - - - Home} /> - - , + + + Home} /> + + ); ``` ### Usage With `useRoutes` Hook + _(Available in version 7.12.1 and above)_ If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), use `Sentry.wrapUseRoutes` to create a patched `useRoutes` hook that instruments your routes with Sentry. @@ -136,52 +133,49 @@ If you specify your route definitions as an object to the [`useRoutes` hook](htt ```javascript import { - createRoutesFromChildren, - matchRoutes, - useLocation, - useNavigationType, - useRoutes, + createRoutesFromChildren, + matchRoutes, + useLocation, + useNavigationType, + useRoutes, } from "react-router-dom"; import { wrapUseRoutes } from "@sentry/react"; import { useEffect } from "react"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ - dsn: "___DSN___", - integrations: [ - new BrowserTracing({ - routingInstrumentation: Sentry.reactRouterV6Instrumentation( - useEffect, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, - ), - }), - ], - tracesSampleRate: 1.0, + dsn: "___DSN___", + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV6Instrumentation( + useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes + ), + }), + ], + tracesSampleRate: 1.0, }); const useSentryRoutes = wrapUseRoutes(useRoutes); function App() { - return useSentryRoutes([ - // ... - ]); + return useSentryRoutes([ + // ... + ]); } ReactDOM.render( - - - , - document.getElementById("root"), + + + , + document.getElementById("root") ); ``` - Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. - ## React Router v4/v5 The React router instrumentation uses the React router library to create `pageload/navigation` transactions and paramaterize transaction names. Make sure you use a `Router` component combined with `createBrowserHistory` (or equivalent). @@ -197,7 +191,6 @@ import {Route, Router, Switch } from 'react-router-dom'; import { createBrowserHistory } from 'history'; import * as Sentry from '@sentry/react'; -import { BrowserTracing } from '@sentry/tracing'; // Create Custom Sentry Route component const SentryRoute = Sentry.withSentryRouting(Route); @@ -206,7 +199,7 @@ const history = createBrowserHistory(); Sentry.init({ integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.reactRouterV5Instrumentation(history), }), ], @@ -236,7 +229,6 @@ import { Route, Router, Switch, matchPath } from 'react-router-dom'; import { createBrowserHistory } from 'history'; import * as Sentry from '@sentry/react'; -import { BrowserTracing } from '@sentry/tracing'; const history = createBrowserHistory(); @@ -246,7 +238,7 @@ const routes = [{ path: '/users/:userid' }, { path: '/users' }, { path: '/' }]; Sentry.init({ integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.reactRouterV5Instrumentation(history, routes, matchPath), }), ], @@ -278,7 +270,6 @@ 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 { BrowserTracing } from "@sentry/tracing"; // Routes looks like this: const routes = ( @@ -292,7 +283,7 @@ const routes = ( Sentry.init({ integrations: [ - new BrowserTracing({ + new Sentry.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 7a18a8e6a6a91..5a135f65346bd 100644 --- a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx +++ b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx @@ -15,7 +15,6 @@ Here is a full example of how to use it: import Vue from "vue"; import App from "./App"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; import Router from "vue-router"; import HelloWorld from "@/components/HelloWorld"; import Foo from "@/components/Foo"; @@ -32,7 +31,7 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", tracesSampleRate: 1.0, integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), }), ], @@ -51,13 +50,13 @@ new Vue({ You can pass an optional configuration object as second argument to the router instrumentation: ```javascript -vueRouterInstrumentation(vueRouter, { - routeLabel: "path" +vueRouterInstrumentation(vueRouter, { + routeLabel: "path", }); ``` The available options are: -| Key | Type | Default | Description | -| ------------ | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Key | Type | Default | Description | +| ---------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | routeLabel | string | `name` | The label to use for the route transactions. Can be either `name` or `path`. When this is `name`, the transaction will use `route.name`, if it is set, and else use the path of the route. By setting this to `path` you can opt-out of this and always use the path. | diff --git a/src/wizard/javascript/angular.md b/src/wizard/javascript/angular.md index 978f4b366864f..674dd76d2e009 100644 --- a/src/wizard/javascript/angular.md +++ b/src/wizard/javascript/angular.md @@ -14,14 +14,14 @@ Add the Sentry SDK as a dependency using `yarn` or `npm`: ```bash # Using yarn (Angular 12+) -yarn add @sentry/angular-ivy @sentry/tracing +yarn add @sentry/angular-ivy # Using yarn (Angular 10 and 11) -yarn add @sentry/angular @sentry/tracing +yarn add @sentry/angular # Using npm (Angular 12+) -npm install --save @sentry/angular-ivy @sentry/tracing +npm install --save @sentry/angular-ivy # Using npm (Angular 10 and 11) -npm install --save @sentry/angular @sentry/tracing +npm install --save @sentry/angular ``` You should `init` the Sentry browser SDK in your `main.ts` file as soon as possible during application load up, before initializing Angular: @@ -31,14 +31,13 @@ import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; // import * as Sentry from "@sentry/angular" // for Angular 10/11 instead import * as Sentry from "@sentry/angular-ivy"; -import { BrowserTracing } from "@sentry/tracing"; import { AppModule } from "./app/app.module"; Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], routingInstrumentation: Sentry.routingInstrumentation, }), diff --git a/src/wizard/javascript/index.md b/src/wizard/javascript/index.md index d0891c381020e..64ef9c3f56b75 100644 --- a/src/wizard/javascript/index.md +++ b/src/wizard/javascript/index.md @@ -9,9 +9,9 @@ Install our JavaScript browser SDK using either `yarn` or `npm`: ```bash {tabTitle: ESM} # Using yarn -yarn add @sentry/browser @sentry/tracing +yarn add @sentry/browser # Using npm -npm install --save @sentry/browser @sentry/tracing +npm install --save @sentry/browser ``` We also support alternate [installation methods](/platforms/javascript/install/). @@ -20,11 +20,10 @@ We also support alternate [installation methods](/platforms/javascript/install/) ```javascript import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. @@ -43,4 +42,4 @@ myUndefinedFunction(); If you're new to Sentry, use the email alert to access your account and complete a product tour. -If you're an existing user and have disabled alerts, you won't receive this email. \ No newline at end of file +If you're an existing user and have disabled alerts, you won't receive this email. diff --git a/src/wizard/javascript/performance-onboarding/javascript/1.install.md b/src/wizard/javascript/performance-onboarding/javascript/1.install.md index 4964e1ce0f2d9..5d7fe4f449df0 100644 --- a/src/wizard/javascript/performance-onboarding/javascript/1.install.md +++ b/src/wizard/javascript/performance-onboarding/javascript/1.install.md @@ -11,8 +11,8 @@ Install our JavaScript browser SDK using either `yarn` or `npm`: ```bash # Using yarn -yarn add @sentry/browser @sentry/tracing +yarn add @sentry/browser # Using npm -npm install --save @sentry/browser @sentry/tracing +npm install --save @sentry/browser ``` diff --git a/src/wizard/javascript/performance-onboarding/javascript/2.configure.md b/src/wizard/javascript/performance-onboarding/javascript/2.configure.md index 9035a97282308..dfe596a9b7dfb 100644 --- a/src/wizard/javascript/performance-onboarding/javascript/2.configure.md +++ b/src/wizard/javascript/performance-onboarding/javascript/2.configure.md @@ -13,11 +13,10 @@ Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and ```javascript import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/performance-onboarding/react/1.install.md b/src/wizard/javascript/performance-onboarding/react/1.install.md index 1c37d18b2b7fe..c02e3c2a10906 100644 --- a/src/wizard/javascript/performance-onboarding/react/1.install.md +++ b/src/wizard/javascript/performance-onboarding/react/1.install.md @@ -11,8 +11,8 @@ Install our JavaScript browser SDK using either `yarn` or `npm`: ```bash # Using yarn -yarn add @sentry/react @sentry/tracing +yarn add @sentry/react # Using npm -npm install --save @sentry/react @sentry/tracing +npm install --save @sentry/react ``` diff --git a/src/wizard/javascript/performance-onboarding/react/2.configure.md b/src/wizard/javascript/performance-onboarding/react/2.configure.md index b52c123dc576e..1d986314daaf7 100644 --- a/src/wizard/javascript/performance-onboarding/react/2.configure.md +++ b/src/wizard/javascript/performance-onboarding/react/2.configure.md @@ -13,12 +13,11 @@ 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 { BrowserTracing } from "@sentry/tracing"; import App from "./App"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.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 1d0deae0b0ee7..d7a435bc48c3f 100644 --- a/src/wizard/javascript/react.md +++ b/src/wizard/javascript/react.md @@ -4,36 +4,38 @@ doc_link: https://docs.sentry.io/platforms/javascript/guides/react/ support_level: production type: framework --- + In this quick guide you’ll set up: -- `@sentry/react` for [error monitoring](https://docs.sentry.io/platforms/javascript/guides/react/) -- `@sentry/tracing` for [performance monitoring](https://docs.sentry.io/platforms/javascript/guides/react/performance/) + +- `@sentry/react` for [error monitoring](https://docs.sentry.io/platforms/javascript/guides/react/) and [performance monitoring](https://docs.sentry.io/platforms/javascript/guides/react/performance/) --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash # Using yarn -yarn add @sentry/react @sentry/tracing +yarn add @sentry/react # Using npm -npm install --save @sentry/react @sentry/tracing +npm install --save @sentry/react ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. ```javascript import { createRoot } React from "react-dom/client"; -import React from "react"; +import React from "react"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; import App from "./App"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], tracesSampleRate: 1.0, }); @@ -46,6 +48,7 @@ root.render() > The above setting ensures that 100% of transactions will be sent to Sentry, but we recommend lowering this number in production. ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -53,7 +56,9 @@ return ; ``` --- + ## Next Steps + - [Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. - [React Features](https://docs.sentry.io/platforms/javascript/guides/react/features/): Learn about our first class integration with the React framework. - [Session Replay](https://docs.sentry.io/platforms/javascript/guides/react/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/svelte.md b/src/wizard/javascript/svelte.md index 4699aeedf5343..777496d9a0b4c 100644 --- a/src/wizard/javascript/svelte.md +++ b/src/wizard/javascript/svelte.md @@ -5,14 +5,14 @@ support_level: production type: framework --- -To instrument your Svelte application with Sentry, first install the `@sentry/svelte` and `@sentry/tracing` packages: +To instrument your Svelte application with Sentry, first install the `@sentry/svelte` package: ```bash # Using yarn -yarn add @sentry/svelte @sentry/tracing +yarn add @sentry/svelte # Using npm -npm install --save @sentry/svelte @sentry/tracing +npm install --save @sentry/svelte ``` Next, import and initialize initialize Sentry in your Svelte app's entry point (`main.ts/js`): @@ -22,12 +22,11 @@ import "./app.css"; import App from "./App.svelte"; import * as Sentry from "@sentry/svelte"; -import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.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 251fc09b3202e..d51fbd8333160 100644 --- a/src/wizard/javascript/vue.md +++ b/src/wizard/javascript/vue.md @@ -7,12 +7,7 @@ type: framework ## Instrument your application -To begin collecting error and performance data from your Vue application, you'll need the following packages: - -- `@sentry/vue` (Sentry's Vue SDK) -- `@sentry/tracing` (instruments performance data) - -Below are instructions for using your favorite package manager, or alternatively loaded directly from our CDN. +To begin collecting error and performance data from your Vue application, you'll need install the `@sentry/vue` package: ### Using yarn or npm @@ -20,10 +15,10 @@ Install the dependencies: ```bash # Using yarn -yarn add @sentry/vue @sentry/tracing +yarn add @sentry/vue # Using npm -npm install --save @sentry/vue @sentry/tracing +npm install --save @sentry/vue ``` Next, initialize Sentry in your app entry point before you initialize your root component. @@ -34,7 +29,6 @@ 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 { BrowserTracing } from "@sentry/tracing"; Vue.use(Router); @@ -46,7 +40,7 @@ Sentry.init({ Vue, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), @@ -71,7 +65,6 @@ new Vue({ import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; const app = createApp({ // ... @@ -84,7 +77,7 @@ Sentry.init({ app, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }),