Skip to content

Commit ab4fdc9

Browse files
AbhiPrasadAbhiPrasad
committed
feat(js): Import BrowserTracing directly from a browser SDK
1 parent 5566052 commit ab4fdc9

File tree

27 files changed

+119
-155
lines changed

27 files changed

+119
-155
lines changed

‎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
}),

‎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.

‎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

‎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.

‎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
}),

‎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,

‎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,

‎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 manual usage 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

‎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 manual usage 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

‎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 manual usage 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

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@ After configuration, you will see both `pageload` and `navigation` transactions
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
}),

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ To enable tracing, include the `BrowserTracing` integration in your SDK configur
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

‎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\/?$/);

‎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\/?$/);

‎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,

‎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)