Skip to content

Commit 1ad5d48

Browse files
AbhiPrasadlizokmLms24
authored
feat(js): Import BrowserTracing directly from a browser SDK (#6508)
Co-authored-by: Liza Mock <[email protected]> Co-authored-by: Lukas Stracke <[email protected]>
1 parent 15bd975 commit 1ad5d48

File tree

40 files changed

+162
-226
lines changed

40 files changed

+162
-226
lines changed

Diff for: ‎src/platform-includes/getting-started-config/javascript.angular.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ Once this is done, Sentry's Angular SDK captures all unhandled exceptions and tr
44
import { enableProdMode } from "@angular/core";
55
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
66
import * as Sentry from "@sentry/angular-ivy";
7-
import { BrowserTracing } from "@sentry/tracing";
87
import { AppModule } from "./app/app.module";
98
109
Sentry.init({
@@ -13,7 +12,7 @@ Sentry.init({
1312
// Registers and configures the Tracing integration,
1413
// which automatically instruments your application to monitor its
1514
// performance, including custom Angular routing instrumentation
16-
new BrowserTracing({
15+
new Sentry.BrowserTracing({
1716
tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
1817
routingInstrumentation: Sentry.routingInstrumentation,
1918
}),
@@ -35,7 +34,6 @@ platformBrowserDynamic()
3534
import { enableProdMode } from "@angular/core";
3635
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
3736
import * as Sentry from "@sentry/angular";
38-
import { BrowserTracing } from "@sentry/tracing";
3937
import { AppModule } from "./app/app.module";
4038
4139
Sentry.init({
@@ -44,7 +42,7 @@ Sentry.init({
4442
// Registers and configures the Tracing integration,
4543
// which automatically instruments your application to monitor its
4644
// performance, including custom Angular routing instrumentation
47-
new BrowserTracing({
45+
new Sentry.BrowserTracing({
4846
tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
4947
routingInstrumentation: Sentry.routingInstrumentation,
5048
}),

Diff for: ‎src/platform-includes/getting-started-config/javascript.mdx

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@ Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and
22

33
```javascript {tabTitle: ESM}
44
import * as Sentry from "@sentry/browser";
5-
import { BrowserTracing } from "@sentry/tracing";
65

76
Sentry.init({
87
dsn: "___PUBLIC_DSN___",
98

109
// Alternatively, use `process.env.npm_package_version` for a dynamic release version
1110
// if your build tool supports it.
1211
release: "[email protected]",
13-
integrations: [new BrowserTracing()],
12+
integrations: [new Sentry.BrowserTracing()],
1413

1514
// Set tracesSampleRate to 1.0 to capture 100%
1615
// of transactions for performance monitoring.

Diff for: ‎src/platform-includes/getting-started-config/javascript.react.mdx

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22
import React from "react";
33
import ReactDOM from "react-dom";
44
import * as Sentry from "@sentry/react";
5-
import { BrowserTracing } from "@sentry/tracing";
65
import App from "./App";
76

87
Sentry.init({
98
dsn: "___PUBLIC_DSN___",
10-
integrations: [new BrowserTracing()],
9+
integrations: [new Sentry.BrowserTracing()],
1110

1211
// We recommend adjusting this value in production, or using tracesSampler
1312
// for finer control

Diff for: ‎src/platform-includes/getting-started-config/javascript.svelte.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ import "./app.css";
55
import App from "./App.svelte";
66

77
import * as Sentry from "@sentry/svelte";
8-
import { BrowserTracing } from "@sentry/tracing";
98

109
// Initialize the Sentry SDK here
1110
Sentry.init({
1211
dsn: "___PUBLIC_DSN___",
13-
integrations: [new BrowserTracing()],
12+
integrations: [new Sentry.BrowserTracing()],
1413

1514
// Set tracesSampleRate to 1.0 to capture 100%
1615
// of transactions for performance monitoring.
@@ -30,12 +29,11 @@ import "./app.css";
3029
import App from "./App.svelte";
3130

3231
import * as Sentry from "@sentry/svelte";
33-
import { BrowserTracing } from "@sentry/tracing";
3432

3533
// Initialize the Sentry SDK here
3634
Sentry.init({
3735
dsn: "___PUBLIC_DSN___",
38-
integrations: [new BrowserTracing()],
36+
integrations: [new Sentry.BrowserTracing()],
3937

4038
// Set tracesSampleRate to 1.0 to capture 100%
4139
// of transactions for performance monitoring.

Diff for: ‎src/platform-includes/getting-started-config/javascript.vue.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ To initialize Sentry in your Vue application, add this to your `app.js`:
66
import Vue from "vue";
77
import Router from "vue-router";
88
import * as Sentry from "@sentry/vue";
9-
import { BrowserTracing } from "@sentry/tracing";
109

1110
Vue.use(Router);
1211

@@ -18,7 +17,7 @@ Sentry.init({
1817
Vue,
1918
dsn: "___PUBLIC_DSN___",
2019
integrations: [
21-
new BrowserTracing({
20+
new Sentry.BrowserTracing({
2221
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
2322
tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
2423
}),
@@ -43,7 +42,6 @@ new Vue({
4342
import { createApp } from "vue";
4443
import { createRouter } from "vue-router";
4544
import * as Sentry from "@sentry/vue";
46-
import { BrowserTracing } from "@sentry/tracing";
4745

4846
const app = createApp({
4947
// ...
@@ -56,7 +54,7 @@ Sentry.init({
5654
app,
5755
dsn: "___PUBLIC_DSN___",
5856
integrations: [
59-
new BrowserTracing({
57+
new Sentry.BrowserTracing({
6058
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
6159
tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
6260
}),

Diff for: ‎src/platform-includes/getting-started-install/javascript.angular.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
```bash {tabTitle:npm}
22
# Angular 12 and newer:
3-
npm install --save @sentry/angular-ivy @sentry/tracing
3+
npm install --save @sentry/angular-ivy
44

55
# Angular 10 and 11:
6-
npm install --save @sentry/angular @sentry/tracing
6+
npm install --save @sentry/angular
77
```
88

99
```bash {tabTitle:Yarn}
1010
# Angular 12 and newer:
11-
yarn add @sentry/angular-ivy @sentry/tracing
11+
yarn add @sentry/angular-ivy
1212

1313
# Angular 10 and 11:
14-
yarn add @sentry/angular @sentry/tracing
14+
yarn add @sentry/angular
1515
```
1616

1717
### Angular Version Compatibility

Diff for: ‎src/platform-includes/getting-started-install/javascript.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
```bash {tabTitle: yarn}
2-
yarn add @sentry/browser @sentry/tracing
2+
yarn add @sentry/browser
33
```
44

55
```bash {tabTitle: npm}
6-
npm install --save @sentry/browser @sentry/tracing
6+
npm install --save @sentry/browser
77
```
88

99
<Note>

Diff for: ‎src/platform-includes/getting-started-install/javascript.react.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```bash {tabTitle: ESM}
22
# Using npm
3-
npm install --save @sentry/react @sentry/tracing
3+
npm install --save @sentry/react
44

55
# Using yarn
6-
yarn add @sentry/react @sentry/tracing
6+
yarn add @sentry/react
77
```

Diff for: ‎src/platform-includes/getting-started-install/javascript.svelte.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```bash {tabTitle:npm}
2-
npm install --save @sentry/svelte @sentry/tracing
2+
npm install --save @sentry/svelte
33
```
44

55
```bash {tabTitle:yarn}
6-
yarn add @sentry/svelte @sentry/tracing
6+
yarn add @sentry/svelte
77
```

Diff for: ‎src/platform-includes/getting-started-install/javascript.vue.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```bash {tabTitle:npm}
2-
npm install --save @sentry/vue @sentry/tracing
2+
npm install --save @sentry/vue
33
```
44

55
```bash {tabTitle:Yarn}
6-
yarn add @sentry/vue @sentry/tracing
6+
yarn add @sentry/vue
77
```

Diff for: ‎src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
The `@sentry/tracing` package provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications.
1+
The Sentry SDK provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications.

Diff for: ‎src/platform-includes/performance/beforeNavigate-example/javascript.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ One common use case is parameterizing transaction names. For both `pageload` and
44
Sentry.init({
55
// ...
66
integrations: [
7-
new BrowserTracing({
7+
new Sentry.BrowserTracing({
88
beforeNavigate: context => {
99
return {
1010
...context,

Diff for: ‎src/platform-includes/performance/beforeNavigate-example/javascript.nextjs.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Sentry.init({
33
// ...
44
integrations: [
5-
new BrowserTracing({
5+
new Sentry.BrowserTracing({
66
beforeNavigate: context => {
77
return {
88
...context,

Diff for: ‎src/platform-includes/performance/configure-sample-rate/javascript.mdx

+4-8
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,14 @@
33
// substitute its name for `@sentry/browser` here
44
import * as Sentry from "@sentry/browser";
55

6-
// If taking advantage of automatic instrumentation (highly recommended)
7-
import { BrowserTracing } from "@sentry/tracing";
8-
// Or, if only manually tracing
9-
// import * as _ from "@sentry/tracing"
10-
// Note: You MUST import the package in some way for tracing to work
11-
126
Sentry.init({
137
dsn: "___PUBLIC_DSN___",
148

159
// This enables automatic instrumentation (highly recommended), but is not
16-
// necessary for purely manual usage
17-
integrations: [new BrowserTracing()],
10+
// necessary for purely manual usage.
11+
// If you only want to use manual instrumentation, remove the BrowserTracing integration and add
12+
// Sentry.addTracingExtensions() above your Sentry.init() call.
13+
integrations: [new Sentry.BrowserTracing()],
1814

1915
// We recommend adjusting this value in production, or using tracesSampler
2016
// for finer control

Diff for: ‎src/platform-includes/performance/configure-sample-rate/javascript.react.mdx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
```javascript
22
import * as Sentry from "@sentry/react";
33

4-
// If taking advantage of automatic instrumentation (highly recommended)
5-
import { BrowserTracing } from "@sentry/tracing";
6-
// Or, if only manually tracing
7-
// import * as _ from "@sentry/tracing"
8-
// Note: You MUST import the package in some way for tracing to work
9-
104
Sentry.init({
115
dsn: "___PUBLIC_DSN___",
126

137
// This enables automatic instrumentation (highly recommended), but is not
14-
// necessary for purely manual usage
15-
integrations: [new BrowserTracing()],
8+
// necessary for purely manual usage.
9+
// If you only want to use manually, remove the BrowserTracing integration and add
10+
// Sentry.addTracingExtensions() above your Sentry.init() call.
11+
integrations: [new Sentry.BrowserTracing()],
1612

1713
// We recommend adjusting this value in production, or using tracesSampler
1814
// for finer control

Diff for: ‎src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx

+3-7
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,16 @@
22
import Vue from "vue";
33
import * as Sentry from "@sentry/vue";
44

5-
// If taking advantage of automatic instrumentation (highly recommended)
6-
import { BrowserTracing } from "@sentry/tracing";
7-
// Or, if only manually tracing
8-
// import * as _ from "@sentry/tracing"
9-
// Note: You MUST import the package in some way for tracing to work
10-
115
Sentry.init({
126
// Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present.
137
Vue: Vue,
148
dsn: "___PUBLIC_DSN___",
159

1610
// This enables automatic instrumentation (highly recommended), but is not
1711
// necessary for purely manual usage
18-
integrations: [new BrowserTracing()],
12+
// If you only want to use manually, remove the BrowserTracing integration and add
13+
// Sentry.addTracingExtensions() above your Sentry.init() call.
14+
integrations: [new Sentry.BrowserTracing()],
1915

2016
// We recommend adjusting this value in production, or using tracesSampler
2117
// for finer control

Diff for: ‎src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
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.)
1+
To enable tracing, include the `BrowserTracing` integration in your SDK configuration options.
22

33
After configuration, you will see both `pageload` and `navigation` transactions in the Sentry UI.
44

55
```javascript {tabTitle: ESM}
66
// If you're using one of our framework SDK packages, like `@sentry/angular`,
77
// substitute its name for `@sentry/browser` here
88
import * as Sentry from "@sentry/browser";
9-
import { BrowserTracing } from "@sentry/tracing"; // Must import second
109

1110
Sentry.init({
1211
dsn: "___PUBLIC_DSN___",
1312

1413
integrations: [
15-
new BrowserTracing({
14+
new Sentry.BrowserTracing({
1615
tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
1716
// ... other options
1817
}),

Diff for: ‎src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
1-
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.)
1+
To enable tracing, include the `BrowserTracing` integration in your SDK configuration options.
22

33
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).
44

55
```javascript
6-
import { Router } from 'react-router-dom';
7-
import { createBrowserHistory } from 'history';
6+
import { Router } from "react-router-dom";
7+
import { createBrowserHistory } from "history";
88

99
import * as Sentry from "@sentry/react";
10-
import { BrowserTracing } from "@sentry/tracing"; // Must import after @sentry/react
1110

1211
const history = createBrowserHistory();
1312

1413
Sentry.init({
1514
dsn: "___PUBLIC_DSN___",
1615

1716
integrations: [
18-
new BrowserTracing({
17+
new Sentry.BrowserTracing({
1918
tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
2019

2120
// Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation

Diff for: ‎src/platform-includes/performance/enable-tracing/javascript.mdx

+2-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,3 @@
1-
Install the tracing package:
1+
Tracing is included by default in the Sentry JavaScript npm packages.
22

3-
```bash {tabTitle: ESM}
4-
# Using yarn
5-
yarn add @sentry/tracing
6-
7-
# Using npm
8-
npm install --save @sentry/tracing
9-
```
10-
11-
```html {tabTitle: CDN}
12-
<script
13-
<!--
14-
Note that `bundle.tracing.min.js` contains both `@sentry/browser` AND
15-
`@sentry/tracing`, and should therefore be used in place of
16-
`@sentry/browser`'s bundle rather than in addition to it.
17-
-->
18-
src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
19-
integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
20-
crossorigin="anonymous"
21-
></script>
22-
```
3+
If you are using the CDN, make sure you are using a [CDN bundle that has performance monitoring enabled](/platforms/javascript/install/cdn/#default-bundle).

Diff for: ‎src/platform-includes/performance/filter-span-example/javascript.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Sentry.init({
33
// ...
44
integrations: [
5-
new BrowserTracing({
5+
new Sentry.BrowserTracing({
66
shouldCreateSpanForRequest: url => {
77
// Do not create spans for outgoing requests to a `/health/` endpoint
88
return !url.match(/\/health\/?$/);

Diff for: ‎src/platform-includes/performance/filter-span-example/javascript.nextjs.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Sentry.init({
33
// ...
44
integrations: [
5-
new BrowserTracing({
5+
new Sentry.BrowserTracing({
66
shouldCreateSpanForRequest: url => {
77
// Do not create spans for outgoing requests to a `/health/` endpoint
88
return !url.match(/\/health\/?$/);

Diff for: ‎src/platform-includes/performance/group-transaction-example/javascript.mdx

+1-2
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,11 @@ For browser JavaScript applications using the `BrowserTracing` integration, the
1515

1616
```javascript
1717
import * as Sentry from "@sentry/browser";
18-
import { BrowserTracing } from "@sentry/tracing";
1918

2019
Sentry.init({
2120
// ...
2221
integrations: [
23-
new BrowserTracing({
22+
new Sentry.BrowserTracing({
2423
beforeNavigate: context => {
2524
return {
2625
...context,

Diff for: ‎src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ For example:
1010
Sentry.init({
1111
// ...
1212
integrations: [
13-
new BrowserTracing({
13+
new Sentry.BrowserTracing({
1414
tracePropagationTargets: ["api.example.com"],
1515
}),
1616
],

0 commit comments

Comments
 (0)