Skip to content

Commit 680364b

Browse files
JonasBagetsantry[bot]lizokm
authored and
shanamatthews
committed
feat(profiling): add browser profiling docs (#7468)
* feat(profiling): add browser profiling docs * style(lint): Auto commit lint changes * style(lint): Auto commit lint changes * style(lint): Auto commit lint changes * style(lint): Auto commit lint changes * style(lint): Auto commit lint changes * style(lint): Auto commit lint changes * style(lint): Auto commit lint changes * style(lint): Auto commit lint changes * Update src/wizard/javascript/profiling-onboarding/react/3.configure.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/2.configure-document-policy.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/2.configure-document-policy.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/3.configure.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/2.configure-document-policy.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/2.configure-document-policy.md Co-authored-by: Liza Mock <[email protected]> * docs(profiling): add browser profiling * style(lint): Auto commit lint changes * Update src/platforms/javascript/common/profiling/index.mdx Co-authored-by: Liza Mock <[email protected]> * Update src/platforms/javascript/common/profiling/index.mdx Co-authored-by: Liza Mock <[email protected]> * Update src/platforms/javascript/common/profiling/index.mdx Co-authored-by: Liza Mock <[email protected]> * Update src/platforms/javascript/common/profiling/index.mdx Co-authored-by: Liza Mock <[email protected]> * Update src/platforms/javascript/common/profiling/index.mdx Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/3.configure.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/react/2.configure-document-policy.md Co-authored-by: Liza Mock <[email protected]> * Update src/platforms/javascript/common/profiling/index.mdx Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/2.configure-document-policy.md Co-authored-by: Liza Mock <[email protected]> * Update src/wizard/javascript/profiling-onboarding/javascript/3.configure.md Co-authored-by: Liza Mock <[email protected]> --------- Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com> Co-authored-by: Liza Mock <[email protected]>
1 parent 890bfc6 commit 680364b

File tree

8 files changed

+234
-1
lines changed

8 files changed

+234
-1
lines changed

‎src/docs/product/profiling/index.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ description: "Profiling offers a deeper level of visibility on top of traditiona
1212

1313
- [Android (Java and Kotlin only)](/platforms/android/profiling/)
1414
- [iOS (Swift and Objective-C only)](/platforms/apple/profiling/)
15-
- [Node.js](/platforms/node/profiling/)
1615
- [Python](/platforms/python/profiling/)
16+
- [Node.js](/platforms/node/profiling/)
1717
- [PHP (including Laravel and Symfony)](/platforms/php/profiling/)
18+
- [Browser JavaScript [beta]](/platforms/javascript/profiling/)
1819
- [Go [experimental]](/platforms/go/profiling/)
1920
- [Ruby [experimental]](/platforms/ruby/profiling/)
2021
- [React Native [experimental]](/platforms/react-native/profiling/)

‎src/platforms/javascript/common/profiling/index.mdx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Profiling
3+
sidebar_order: 1
4+
supported:
5+
- javascript
6+
description: "Learn what transactions are captured after tracing is enabled."
7+
---
8+
9+
Because our browser profiling integration is built on top of the profiler exposed by the [JS Self-Profiling API](https://wicg.github.io/js-self-profiling/), it's in beta and will likely only move out once the official spec progresses and gains adoption. As with any beta package, there are risks involved in using it - see platform [status](https://chromestatus.com/feature/5170190448852992)
10+
11+
Please note, that since profiling API is currently only implemented in Chromium based browsers, the profiles collected will inherently be biased towards that demographic. This is something you'll need to consider if you're basing your decisions on the data collected. We hope that as the API gains adoption, other browsers will implement it as well. If you find browser profiling feature helpful and would like to see it gain further adoption, please consider supporting the spec at the official [WICG repository](https://github.com/WICG/js-self-profiling).
12+
13+
In order to get started with browser profiling, you'll need to:
14+
15+
- Install the @sentry/browser SDK
16+
- Configure the document response header to include `Document-Policy: js-profiling`
17+
- Configure the SDK to use the BrowserProfilingIntegration and set profilesSampleRate
18+
19+
## Install
20+
21+
Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
22+
23+
```bash
24+
# Using yarn
25+
yarn add @sentry/browser
26+
27+
# Using npm
28+
npm install --save @sentry/browser
29+
```
30+
31+
## Add Document-Policy: js-profiling header
32+
33+
In order for the profiler to start, the document response header has to include a `Document-Policy` header key with the `js-profiling` value.
34+
35+
How you do this will depend on your server. If you're using a server like express, you'll be able to use the [response.set](https://expressjs.com/en/4x/api.html#res.set) function.
36+
37+
```js
38+
app.get("/", (request, response) => {
39+
response.set("Document-Policy", "js-profiling");
40+
response.sendFile("index.html");
41+
});
42+
```
43+
44+
## Configure
45+
46+
Configuration should happen as early as possible in your application's lifecycle. Once this is done, Sentry's JavaScript SDK will capture all unhandled exceptions and transactions.
47+
48+
```javascript
49+
import * as Sentry from "@sentry/browser";
50+
51+
Sentry.init({
52+
dsn: "___PUBLIC_DSN___",
53+
integrations: [
54+
// Add browser profiling integration to the list of integrations
55+
new Sentry.BrowserProfilingIntegration(),
56+
new Sentry.BrowserTracing({
57+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
58+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
59+
}),
60+
],
61+
62+
// Set tracesSampleRate to 1.0 to capture 100%
63+
// of transactions for performance monitoring.
64+
// We recommend adjusting this value in production
65+
tracesSampleRate: 1.0,
66+
67+
// Set profilesSampleRate to 1.0 to profile every transaction.
68+
// Since profilesSampleRate is relative to tracesSampleRate,
69+
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
70+
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
71+
// results in 25% of transactions being profiled (0.5*0.5=0.25)
72+
profilesSampleRate: 1.0,
73+
});
74+
```

‎src/wizard/javascript/profiling-onboarding/javascript/1.install.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
name: Browser (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
## Install
9+
10+
Because our browser profiling integration is built on top of the profiler exposed by the [JS Self-Profiling API](https://wicg.github.io/js-self-profiling/), it's in beta and will likely only move out once the official spec progresses and gains adoption. As with any beta package, there are risks involved in using it - see platform [status](https://chromestatus.com/feature/5170190448852992)
11+
12+
Please note, that since profiling API is currently only implemented in Chromium based browsers, the profiles collected will inherently be biased towards that demographic. This is something you'll need to consider if you're basing your decisions on the data collected. We hope that as the API gains adoption, other browsers will implement it as well. If you find browser profiling feature helpful and would like to see it gain further adoption, please consider supporting the spec at the official [WICG repository](https://github.com/WICG/js-self-profiling).
13+
14+
Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
15+
16+
```bash
17+
# Using yarn
18+
yarn add @sentry/browser
19+
20+
# Using npm
21+
npm install --save @sentry/browser
22+
```

‎src/wizard/javascript/profiling-onboarding/javascript/2.configure-document-policy.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
name: Browser (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
## Add Document-Policy: js-profiling header
9+
10+
In order for the profiler to start, the document response header has to include a `Document-Policy` header key with the `js-profiling` value.
11+
12+
How you do this will depend on your server. If you're using a server like express, you'll be able to use the [response.set](https://expressjs.com/en/4x/api.html#res.set) function.
13+
14+
```js
15+
app.get("/", (request, response) => {
16+
response.set("Document-Policy", "js-profiling");
17+
response.sendFile("index.html");
18+
});
19+
```

‎src/wizard/javascript/profiling-onboarding/javascript/3.configure.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
name: Browser (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
## Configure
9+
10+
Configuration should happen as early as possible in your application's lifecycle. Once this is done, Sentry's JavaScript SDK will capture all unhandled exceptions and transactions.
11+
12+
```javascript
13+
import * as Sentry from "@sentry/browser";
14+
15+
Sentry.init({
16+
dsn: "___PUBLIC_DSN___",
17+
integrations: [
18+
// Add browser profiling integration to the list of integrations
19+
new Sentry.BrowserProfilingIntegration(),
20+
new Sentry.BrowserTracing({
21+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
22+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
23+
}),
24+
],
25+
26+
// Set tracesSampleRate to 1.0 to capture 100%
27+
// of transactions for performance monitoring.
28+
// We recommend adjusting this value in production
29+
tracesSampleRate: 1.0,
30+
31+
// Set profilesSampleRate to 1.0 to profile every transaction.
32+
// Since profilesSampleRate is relative to tracesSampleRate,
33+
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
34+
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
35+
// results in 25% of transactions being profiled (0.5*0.5=0.25)
36+
profilesSampleRate: 1.0,
37+
});
38+
```

‎src/wizard/javascript/profiling-onboarding/react/1.install.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
name: React (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/guides/react/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
## Install
9+
10+
Because our browser profiling integration is built on top of the profiler exposed by the [JS Self-Profiling API](https://wicg.github.io/js-self-profiling/), it's in beta and will likely only move out once the official spec progresses and gains adoption. As with any beta package, there are risks involved in using it - see platform [status](https://chromestatus.com/feature/5170190448852992).
11+
12+
Please note, that since profiling API is currently only implemented in Chromium based browsers, the profiles collected will inherently be biased towards that demographic. This is something you'll need to consider if you're basing your decisions on the data collected. We hope that as the API gains adoption, other browsers will implement it as well. If you find browser profiling feature helpful and would like to see it gain further adoption, please consider supporting the spec at the official [WICG repository](https://github.com/WICG/js-self-profiling).
13+
14+
Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
15+
16+
```bash
17+
# Using yarn
18+
yarn add @sentry/react
19+
20+
# Using npm
21+
npm install --save @sentry/react
22+
```

‎src/wizard/javascript/profiling-onboarding/react/2.configure-document-policy.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
name: React (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/guides/react/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
## Add Document-Policy: js-profiling header
9+
10+
In order for the profiler to start, the document response header has to include a `Document-Policy` header key with the `js-profiling` value.
11+
12+
How you do this will depend on your server. If you're using a server like express, you'll be able to use the [response.set](https://expressjs.com/en/4x/api.html#res.set) function.
13+
14+
```js
15+
app.get("/", (request, response) => {
16+
response.set("Document-Policy", "js-profiling");
17+
response.sendFile("index.html");
18+
});
19+
```

‎src/wizard/javascript/profiling-onboarding/react/3.configure.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
name: React (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/guides/react/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
## Configure
9+
10+
Configuration should happen as early as possible in your application's lifecycle. Once this is done, Sentry's JavaScript SDK will capture all unhandled exceptions and transactions.
11+
12+
```javascript
13+
import * as Sentry from "@sentry/react";
14+
15+
Sentry.init({
16+
dsn: "___PUBLIC_DSN___",
17+
integrations: [
18+
// Add browser profiling integration to the list of integrations
19+
new Sentry.BrowserProfilingIntegration(),
20+
new Sentry.BrowserTracing({
21+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
22+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
23+
}),
24+
],
25+
26+
// Set tracesSampleRate to 1.0 to capture 100%
27+
// of transactions for performance monitoring.
28+
// We recommend adjusting this value in production
29+
tracesSampleRate: 1.0,
30+
31+
// Set profilesSampleRate to 1.0 to profile every transaction.
32+
// Since profilesSampleRate is relative to tracesSampleRate,
33+
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
34+
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
35+
// results in 25% of transactions being profiled (0.5*0.5=0.25)
36+
profilesSampleRate: 1.0,
37+
});
38+
```

0 commit comments

Comments
 (0)