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 <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/wizard/javascript/profiling-onboarding/javascript/3.configure.md

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* docs(profiling): add browser profiling

* style(lint): Auto commit lint changes

* Update src/platforms/javascript/common/profiling/index.mdx

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/platforms/javascript/common/profiling/index.mdx

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/platforms/javascript/common/profiling/index.mdx

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/platforms/javascript/common/profiling/index.mdx

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/platforms/javascript/common/profiling/index.mdx

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/platforms/javascript/common/profiling/index.mdx

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/wizard/javascript/profiling-onboarding/javascript/1.install.md

Co-authored-by: Liza Mock <liza.mock@sentry.io>

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

Co-authored-by: Liza Mock <liza.mock@sentry.io>

* Update src/wizard/javascript/profiling-onboarding/javascript/3.configure.md

Co-authored-by: Liza Mock <liza.mock@sentry.io>

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Liza Mock <liza.mock@sentry.io>

src/docs/product/profiling/index.mdx

@@ -12,9 +12,10 @@ description: "Profiling offers a deeper level of visibility on top of traditiona
 
 - [Android (Java and Kotlin only)](/platforms/android/profiling/)
 - [iOS (Swift and Objective-C only)](/platforms/apple/profiling/)
-- [Node.js](/platforms/node/profiling/)
 - [Python](/platforms/python/profiling/)
+- [Node.js](/platforms/node/profiling/)
 - [PHP (including Laravel and Symfony)](/platforms/php/profiling/)
+- [Browser JavaScript [beta]](/platforms/javascript/profiling/)
 - [Go [experimental]](/platforms/go/profiling/)
 - [Ruby [experimental]](/platforms/ruby/profiling/)
 - [React Native [experimental]](/platforms/react-native/profiling/)

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

@@ -0,0 +1,74 @@
+---
+title: Profiling
+sidebar_order: 1
+supported:
+  - javascript
+description: "Learn what transactions are captured after tracing is enabled."
+---
+
+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)
+
+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).
+
+In order to get started with browser profiling, you'll need to:
+
+- Install the @sentry/browser SDK
+- Configure the document response header to include `Document-Policy: js-profiling`
+- Configure the SDK to use the BrowserProfilingIntegration and set profilesSampleRate
+
+## Install
+
+Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
+
+```bash
+# Using yarn
+yarn add @sentry/browser
+
+# Using npm
+npm install --save @sentry/browser
+```
+
+## Add Document-Policy: js-profiling header
+
+In order for the profiler to start, the document response header has to include a `Document-Policy` header key with the `js-profiling` value.
+
+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.
+
+```js
+app.get("/", (request, response) => {
+  response.set("Document-Policy", "js-profiling");
+  response.sendFile("index.html");
+});
+```
+
+## Configure
+
+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.
+
+```javascript
+import * as Sentry from "@sentry/browser";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [
+    // Add browser profiling integration to the list of integrations
+    new Sentry.BrowserProfilingIntegration(),
+    new Sentry.BrowserTracing({
+      // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+    }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set profilesSampleRate to 1.0 to profile every transaction.
+  // Since profilesSampleRate is relative to tracesSampleRate,
+  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
+  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
+  // results in 25% of transactions being profiled (0.5*0.5=0.25)
+  profilesSampleRate: 1.0,
+});
+```

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

@@ -0,0 +1,22 @@
+---
+name: Browser (JS Self Profiling)
+doc_link: https://docs.sentry.io/platforms/javascript/profiling/
+support_level: beta
+type: framework
+---
+
+## Install
+
+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)
+
+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).
+
+Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
+
+```bash
+# Using yarn
+yarn add @sentry/browser
+
+# Using npm
+npm install --save @sentry/browser
+```

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

@@ -0,0 +1,19 @@
+---
+name: Browser (JS Self Profiling)
+doc_link: https://docs.sentry.io/platforms/javascript/profiling/
+support_level: beta
+type: framework
+---
+
+## Add Document-Policy: js-profiling header
+
+In order for the profiler to start, the document response header has to include a `Document-Policy` header key with the `js-profiling` value.
+
+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.
+
+```js
+app.get("/", (request, response) => {
+  response.set("Document-Policy", "js-profiling");
+  response.sendFile("index.html");
+});
+```

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

@@ -0,0 +1,38 @@
+---
+name: Browser (JS Self Profiling)
+doc_link: https://docs.sentry.io/platforms/javascript/profiling/
+support_level: beta
+type: framework
+---
+
+## Configure
+
+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.
+
+```javascript
+import * as Sentry from "@sentry/browser";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [
+    // Add browser profiling integration to the list of integrations
+    new Sentry.BrowserProfilingIntegration(),
+    new Sentry.BrowserTracing({
+      // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+    }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set profilesSampleRate to 1.0 to profile every transaction.
+  // Since profilesSampleRate is relative to tracesSampleRate,
+  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
+  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
+  // results in 25% of transactions being profiled (0.5*0.5=0.25)
+  profilesSampleRate: 1.0,
+});
+```

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

@@ -0,0 +1,22 @@
+---
+name: React (JS Self Profiling)
+doc_link: https://docs.sentry.io/platforms/javascript/guides/react/profiling/
+support_level: beta
+type: framework
+---
+
+## Install
+
+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).
+
+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).
+
+Install our JavaScript browser SDK using either `yarn` or `npm`, the minimum version that supports profiling is **7.60.0**.
+
+```bash
+# Using yarn
+yarn add @sentry/react
+
+# Using npm
+npm install --save @sentry/react
+```

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

@@ -0,0 +1,19 @@
+---
+name: React (JS Self Profiling)
+doc_link: https://docs.sentry.io/platforms/javascript/guides/react/profiling/
+support_level: beta
+type: framework
+---
+
+## Add Document-Policy: js-profiling header
+
+In order for the profiler to start, the document response header has to include a `Document-Policy` header key with the `js-profiling` value.
+
+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.
+
+```js
+app.get("/", (request, response) => {
+  response.set("Document-Policy", "js-profiling");
+  response.sendFile("index.html");
+});
+```

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

@@ -0,0 +1,38 @@
+---
+name: React (JS Self Profiling)
+doc_link: https://docs.sentry.io/platforms/javascript/guides/react/profiling/
+support_level: beta
+type: framework
+---
+
+## Configure
+
+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.
+
+```javascript
+import * as Sentry from "@sentry/react";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [
+    // Add browser profiling integration to the list of integrations
+    new Sentry.BrowserProfilingIntegration(),
+    new Sentry.BrowserTracing({
+      // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+    }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set profilesSampleRate to 1.0 to profile every transaction.
+  // Since profilesSampleRate is relative to tracesSampleRate,
+  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
+  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
+  // results in 25% of transactions being profiled (0.5*0.5=0.25)
+  profilesSampleRate: 1.0,
+});
+```