Create structure for Performance content to be common across all platforms

src/includes/performance/beforeNavigate-example/javascript.mdx

@@ -0,0 +1,27 @@
+```javascript
+import * as Sentry from "@sentry/browser";
+import { Integrations } from "@sentry/tracing";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [
+    new Integrations.BrowserTracing({
+      beforeNavigate: context => {
+        return {
+          ...context,
+          // You could use your UI's routing library to find the matching
+          // route template here. We don't have one right now, so do some basic
+          // parameter replacements.
+          name: location.pathname
+            .replace(/\d+/g, "<digits>")
+            .replace(/[a-f0-9]{32}/g, "<hash>"),
+        };
+      },
+    }),
+  ],
+
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+});
+```

src/includes/performance/configure-tracing-package/javascript.mdx

@@ -0,0 +1,41 @@
+```javascript {tabTitle: ESM}
+// If you're using one of our integration packages, like `@sentry/react` or
+// `@sentry/angular`, substitute its name for `@sentry/browser` here
+import * as Sentry from "@sentry/browser";
+
+// If taking advantage of automatic instrumentation (highly recommended)
+import { Integrations as TracingIntegrations } from "@sentry/tracing";
+// Or, if only manually tracing
+// import * as _ from "@sentry/tracing"
+// Note: You MUST import the package in some way for tracing to work
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+
+  // This enables automatic instrumentation (highly recommended), but is not
+  // necessary for purely manual usage
+  integrations: [new TracingIntegrations.BrowserTracing()],
+
+  // To set a uniform sample rate
+  tracesSampleRate: 0.2
+
+  // Alternatively, to control sampling dynamically
+  tracesSampler: samplingContext => { ... }
+});
+```
+
+```javascript {tabTitle: CDN}
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+
+  // This enables automatic instrumentation (highly recommended), but is not
+  // necessary for purely manual usage
+  integrations: [new Sentry.Integrations.BrowserTracing()],
+
+  // To set a uniform sample rate
+  tracesSampleRate: 0.2
+
+  // Alternatively, to control sampling dynamically
+  tracesSampler: samplingContext => { ... }
+});
+```

src/includes/performance/configure-tracing-package/react-native.mdx

@@ -0,0 +1,15 @@
+```javascript
+import * as Sentry from "@sentry/react-native";
+
+// Unlike Sentry on other platforms, you do not need to import anything to use tracing on React Native
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+
+  // To set a uniform sample rate
+  tracesSampleRate: 0.2
+
+  // Alternatively, to control sampling dynamically
+  tracesSampler: samplingContext => { ... }
+});
+```

src/includes/performance/control-data-truncation/javascript.mdx

@@ -0,0 +1,24 @@
+Instead, using `span.set_tag` and `span.set_data` preserves the details of this query using structured metadata. This could be done over `baseUrl`, `endpoint`, and `parameters`:
+
+```javascript
+const baseUrl = "https://empowerplant.io";
+const endpoint = "/api/0/projects/ep/setup_form";
+const parameters = {
+  user_id: 314159265358979323846264338327,
+  tracking_id: "EasyAsABC123OrSimpleAsDoReMi",
+  product_name: PlantToHumanTranslator,
+  product_id: 161803398874989484820458683436563811772030917980576,
+};
+
+const span = transaction.startChild({
+  op: "request",
+  description: "setup form",
+});
+
+span.setTag("baseUrl", baseUrl);
+span.setTag("endpoint", endpoint);
+span.setData("parameters", parameters);
+// you may also find some parameters to be valuable as tags
+span.setData("user_id", parameters.user_id);
+http.get(`${base_url}/${endpoint}/`, (data = parameters));
+```

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

@@ -0,0 +1,40 @@
+After configuration, you will see both `pageload` and `navigation` when viewing transactions in sentry.io.
+
+```javascript {tabTitle: ESM}
+// If you're using one of our integration packages, like `@sentry/react` or `@sentry/angular`,
+// substitute its name for `@sentry/browser` here
+import * as Sentry from "@sentry/browser";
+import { Integrations as TracingIntegrations } from "@sentry/tracing"; // Must import second
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+
+  integrations: [
+    new Integrations.BrowserTracing({
+      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      // ... other options
+    }),
+  ],
+
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+});
+```
+
+```javascript {tabTitle: CDN}
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+
+  integrations: [
+    new Sentry.Integrations.BrowserTracing({
+      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      // ... other options
+    }),
+  ],
+
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+});
+```

src/includes/performance/enable-manual-instrumentation/javascript.mdx

@@ -0,0 +1,9 @@
+This is valid for all JavaScript SDKs (both backend and frontend) and works independently of the `Express`, `Http`, and `BrowserTracing` integrations.
+
+```javascript
+const transaction = Sentry.startTransaction({ name: "test-transaction" });
+const span = transaction.startChild({ op: "functionX" }); // This function returns a Span
+// functionCallX
+span.finish(); // Remember that only finished spans will be sent with the transaction
+transaction.finish(); // Finishing the transaction will send it to Sentry
+```

src/includes/performance/filter-span-example/javascript.mdx

@@ -0,0 +1,19 @@
+```javascript
+import * as Sentry from "@sentry/browser";
+import { Integrations } from "@sentry/tracing";
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [
+    new Integrations.BrowserTracing({
+      shouldCreateSpanForRequest: url => {
+        // Do not create spans for outgoing requests to a `/health/` endpoint
+        return !url.match(/\/health\/?$/);
+      },
+    }),
+  ],
+
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+});
+```

src/platforms/javascript/common/performance/capturing/group-transactions.mdx → src/includes/performance/group-transaction-example/javascript.mdx

@@ -1,11 +1,3 @@
----
-title: Group Transactions
-sidebar_order: 50
-description: "Learn how to group transactions."
----
-
-When Sentry captures transactions, they are assigned a transaction name. This name is generally auto-generated by the Sentry SDK based on the framework integrations you are using. If you can't leverage the automatic transaction generation (or want to customize how transaction names are generated) you can use a global event processor that is registered when you initialize the SDK with your configuration.
-
 An example of doing this in a node.js application:
 
 ```javascript

src/includes/performance/group-transaction-example/react-native.mdx

@@ -0,0 +1,11 @@
+```javascript
+import { addGlobalEventProcessor } from "@sentry/react-native";
+
+addGlobalEventProcessor(event => {
+  // if event is a transaction event
+  if (event.type === "transaction") {
+    event.transaction = sanitizeTransactionName(event.transaction);
+  }
+  return event;
+});
+```

src/includes/performance/install-tracing-package/javascript.mdx

@@ -0,0 +1,20 @@
+```bash {tabTitle: ESM}
+# Using yarn
+yarn add @sentry/tracing
+
+# Using npm
+npm install @sentry/tracing
+```
+
+```html {tabTitle: CDN}
+<script
+  <!--
+    Note that `bundle.tracing.min.js` contains both `@sentry/browser` AND
+    `@sentry/tracing`, and should therefore be used in place of
+    `@sentry/browser`'s bundle rather than in addition to it.
+  -->
+  src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
+  integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+```

src/includes/performance/install-tracing-package/react-native.mdx

@@ -0,0 +1 @@
+As `@sentry/tracing` is already included with our React Native SDK, no action is needed.

src/platforms/javascript/common/performance/capturing/manual.mdx → src/includes/performance/manual-instrumentation-example/javascript.mdx

@@ -1,25 +1,3 @@
----
-title: Manual Instrumentation
-sidebar_order: 20
-description: "Learn how to capture performance data on any action in your app."
----
-
-<Note>
-
-To _manually_ capture transactions, you must first <PlatformLink to="/performance/">enable tracing in your app.</PlatformLink>
-
-</Note>
-
-To manually instrument certain regions of your code, you can create transactions to capture them. This is valid for all JavaScript SDKs (both backend and frontend) and works independently of the `Express`, `Http`, and `BrowserTracing` integrations.
-
-```javascript
-const transaction = Sentry.startTransaction({ name: "test-transaction" });
-const span = transaction.startChild({ op: "functionX" }); // This function returns a Span
-// functionCallX
-span.finish(); // Remember that only finished spans will be sent with the transaction
-transaction.finish(); // Finishing the transaction will send it to Sentry
-```
-
 For example, if you want to create a transaction for a user interaction on your page:
 
 ```javascript

src/platforms/javascript/common/performance/capturing/retrieve-active-transaction.mdx → src/includes/performance/retrieve-transaction/javascript.mdx

@@ -1,9 +1,3 @@
----
-title: Retrieve an Active Transaction
-sidebar_order: 60
-description: "Learn how to retrieve an active transaction for grouping."
----
-
 In cases where you want to attach Spans to an already ongoing transaction, such as when grouping transactions, you can use `Sentry.getCurrentHub().getScope().getTransaction()`. This function will return a `Transaction` object when there is a running transaction on the scope, otherwise it returns `undefined`. If you are using our BrowserTracing integration, by default we attach the transaction to the Scope, so you could do something like this:
 
 ```javascript

src/includes/performance/tracingOrigins-example/javascript.mdx

@@ -0,0 +1,22 @@
+For example:
+
+- A frontend application is served from `example.com`
+- A backend service is served from `api.example.com`
+- The frontend application makes API calls to the backend
+- Therefore, the option needs to be configured like this: `new Integrations.BrowserTracing({tracingOrigins: ['api.example.com']})`
+- Now outgoing XHR/fetch requests to `api.example.com` will get the `sentry-trace` header attached
+
+```javascript
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [
+    new Integrations.BrowserTracing({
+      tracingOrigins: ["localhost", "my-site-url.com"],
+    }),
+  ],
+
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+});
+```

src/platforms/javascript/common/performance/capturing/add-to-spans.mdx → src/platforms/common/performance/capturing/add-to-spans.mdx

@@ -1,6 +1,9 @@
 ---
 title: Control Data Truncation
 sidebar_order: 40
+supported:
+  - javascript
+  - react-native
 description: "Learn how to add query information and parameters to spans."
 ---
 
@@ -14,27 +17,4 @@ The 200+ character request above will become truncated to:
 
 `https://empowerplant.io/api/0/projects/ep/setup_form/?user_id=314159265358979323846264338327&tracking_id=EasyAsABC123OrSimpleAsDoReMi&product_name=PlantToHumanTranslator&product_id=1618033988749894848`
 
-Instead, using `span.set_tag` and `span.set_data` preserves the details of this query using structured metadata. This could be done over `baseUrl`, `endpoint`, and `parameters`:
-
-```javascript
-const baseUrl = "https://empowerplant.io";
-const endpoint = "/api/0/projects/ep/setup_form";
-const parameters = {
-  user_id: 314159265358979323846264338327,
-  tracking_id: "EasyAsABC123OrSimpleAsDoReMi",
-  product_name: PlantToHumanTranslator,
-  product_id: 161803398874989484820458683436563811772030917980576,
-};
-
-const span = transaction.startChild({
-  op: "request",
-  description: "setup form",
-});
-
-span.setTag("baseUrl", baseUrl);
-span.setTag("endpoint", endpoint);
-span.setData("parameters", parameters);
-// you may also find some parameters to be valuable as tags
-span.setData("user_id", parameters.user_id);
-http.get(`${base_url}/${endpoint}/`, (data = parameters));
-```
+<PlatformContent includePath="performance/control-data-truncation" />