Skip to content

Commit d712075

Browse files
JonasBaJonasBa
authored
docs: add angular and vue (#8721)
* docs: add angular and vue * docs: rename tab name * docs: rename tab name
1 parent bfa3f86 commit d712075

File tree

6 files changed

+211
-0
lines changed

6 files changed

+211
-0
lines changed

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
name: Angular (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
<Note>
9+
10+
Browser Profiling is currently in beta. Beta features are still in-progress and may have bugs. We recognize the irony.
11+
12+
</Note>
13+
14+
#### Install
15+
16+
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).
17+
18+
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).
19+
20+
Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
21+
22+
Angular versions < 12
23+
24+
```bash
25+
# Using yarn
26+
yarn add @sentry/angular
27+
28+
# Using npm
29+
npm install --save @sentry/angular
30+
```
31+
32+
Angular versions > 12
33+
34+
```bash
35+
# Using yarn
36+
yarn add @sentry/angular-ivy
37+
38+
# Using npm
39+
npm install --save @sentry/angular-ivy
40+
```

‎src/wizard/javascript/profiling-onboarding/angular/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/angular/3.configure.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
Angular versions < 12
13+
14+
```javascript
15+
import * as Sentry from "@sentry/angular";
16+
17+
Sentry.init({
18+
dsn: "___PUBLIC_DSN___",
19+
integrations: [
20+
// Add browser profiling integration to the list of integrations
21+
new Sentry.BrowserProfilingIntegration(),
22+
new Sentry.BrowserTracing(),
23+
],
24+
25+
// Set tracesSampleRate to 1.0 to capture 100%
26+
// of transactions for performance monitoring.
27+
// We recommend adjusting this value in production
28+
tracesSampleRate: 1.0,
29+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
30+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
31+
32+
// Set profilesSampleRate to 1.0 to profile every transaction.
33+
// Since profilesSampleRate is relative to tracesSampleRate,
34+
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
35+
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
36+
// results in 25% of transactions being profiled (0.5*0.5=0.25)
37+
profilesSampleRate: 1.0,
38+
});
39+
```
40+
41+
Angular versions 12 and above
42+
43+
```javascript
44+
import * as Sentry from "@sentry/angular-ivy";
45+
46+
Sentry.init({
47+
dsn: "___PUBLIC_DSN___",
48+
integrations: [
49+
// Add browser profiling integration to the list of integrations
50+
new Sentry.BrowserProfilingIntegration(),
51+
new Sentry.BrowserTracing(),
52+
],
53+
54+
// Set tracesSampleRate to 1.0 to capture 100%
55+
// of transactions for performance monitoring.
56+
// We recommend adjusting this value in production
57+
tracesSampleRate: 1.0,
58+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
59+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
60+
61+
// Set profilesSampleRate to 1.0 to profile every transaction.
62+
// Since profilesSampleRate is relative to tracesSampleRate,
63+
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
64+
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
65+
// results in 25% of transactions being profiled (0.5*0.5=0.25)
66+
profilesSampleRate: 1.0,
67+
});
68+
```

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
name: Vue (JS Self Profiling)
3+
doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/profiling/
4+
support_level: beta
5+
type: framework
6+
---
7+
8+
<Note>
9+
10+
Browser Profiling is currently in beta. Beta features are still in-progress and may have bugs. We recognize the irony.
11+
12+
</Note>
13+
14+
#### Install
15+
16+
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).
17+
18+
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).
19+
20+
Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
21+
22+
```bash
23+
# Using yarn
24+
yarn add @sentry/vue
25+
26+
# Using npm
27+
npm install --save @sentry/vue
28+
```

‎src/wizard/javascript/profiling-onboarding/vue/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/vue/3.configure.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
name: Vue (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/vue";
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+
],
22+
23+
// Set tracesSampleRate to 1.0 to capture 100%
24+
// of transactions for performance monitoring.
25+
// We recommend adjusting this value in production
26+
tracesSampleRate: 1.0,
27+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
28+
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
29+
30+
// Set profilesSampleRate to 1.0 to profile every transaction.
31+
// Since profilesSampleRate is relative to tracesSampleRate,
32+
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
33+
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
34+
// results in 25% of transactions being profiled (0.5*0.5=0.25)
35+
profilesSampleRate: 1.0,
36+
});
37+
```

0 commit comments

Comments
 (0)