feat(js): Document new performance APIs (#7707)

Author: AbhiPrasad

src/platform-includes/performance/add-active-span/javascript.mdx

@@ -0,0 +1,30 @@
+You can use the `Sentry.startActiveSpan` method to wrap a callback in a span to measure how long it will take. The span is automatically finished when the callback is finished. This will work with both sync and async callbacks.
+
+```javascript
+const result = Sentry.startActiveSpan({ name: "Important Function" }, () => {
+  return expensiveFunction();
+});
+
+const result = await Sentry.startActiveSpan(
+  { name: "Important Function" },
+  async () => {
+    const res = Sentry.startActiveSpan({ name: "Child Span" }, () => {
+      return expensiveFunction();
+    });
+
+    return updateRes(res);
+  }
+);
+
+const result = Sentry.startActiveSpan(
+  { name: "Important Function" },
+  (span) => {
+    // Can access the span to add data or set specific status.
+    // The span can be undefined if the span was not sampled or if performance monitoring is disabled.
+    span?.setData("foo", "bar");
+    return expensiveFunction();
+  }
+);
+```
+
+The span named `Important Function` will become the active span for the duration of the callback.

src/platform-includes/performance/add-active-span/node.mdx

@@ -0,0 +1,30 @@
+You can use the `Sentry.startActiveSpan` method to wrap a callback in a span to measure how long it will take. The span is automatically finished when the callback is finished. This will work with both sync and async callbacks.
+
+```javascript
+const result = Sentry.startActiveSpan({ name: "Important Function" }, () => {
+  return expensiveFunction();
+});
+
+const result = await Sentry.startActiveSpan(
+  { name: "Important Function" },
+  async () => {
+    const res = Sentry.startActiveSpan({ name: "Child Span" }, () => {
+      return expensiveFunction();
+    });
+
+    return updateRes(res);
+  }
+);
+
+const result = Sentry.startActiveSpan(
+  { name: "Important Function" },
+  (span) => {
+    // Can access the span to add data or set specific status.
+    // The span can be undefined if the span was not sampled or if performance monitoring is disabled.
+    span?.setData("foo", "bar");
+    return expensiveFunction();
+  }
+);
+```
+
+The span named `Important Function` will become the active span for the duration of the callback.

src/platform-includes/performance/add-independent-span/javascript.mdx

@@ -0,0 +1,17 @@
+```javascript
+const span1 = Sentry.startSpan({ name: "first-step" });
+
+firstStep();
+
+const span2 = Sentry.startSpan({ name: "second-step" });
+
+secondStep();
+
+const span3 = Sentry.startSpan({ name: "third-step" });
+
+thirdStep();
+
+span1.finish();
+span2.finish();
+span3.finish();
+```

src/platform-includes/performance/add-independent-span/node.mdx

@@ -0,0 +1,17 @@
+```javascript
+const span1 = Sentry.startSpan({ name: "first-step" });
+
+firstStep();
+
+const span2 = Sentry.startSpan({ name: "second-step" });
+
+secondStep();
+
+const span3 = Sentry.startSpan({ name: "third-step" });
+
+thirdStep();
+
+span1.finish();
+span2.finish();
+span3.finish();
+```

src/platform-includes/performance/add-spans-example/javascript.mdx

@@ -9,7 +9,7 @@ function shopCheckout() {
   // If there's currently an unfinished transaction, it may be dropped
   Sentry.getCurrentHub().configureScope((scope) => scope.setSpan(transaction));
 
-  // Assume this function makes an xhr/fetch call
+  // Assume this function makes a fetch call
   const result = validateShoppingCartOnServer();
 
   const span = transaction.startChild({

src/platform-includes/performance/enable-manual-instrumentation/apple.mdx

@@ -1,3 +1,5 @@
+To instrument certain regions of your code, you can create transactions to capture them.
+
 ```swift {tabTitle:Swift}
 import Sentry;
 

src/platform-includes/performance/enable-manual-instrumentation/dart.mdx

@@ -1,3 +1,5 @@
+To instrument certain regions of your code, you can create transactions to capture them.
+
 The following example creates a transaction that contains an expensive operation (for example, `processOrderBatch`), and sends the result to Sentry:
 
 ```dart

src/platform-includes/performance/enable-manual-instrumentation/dotnet.mdx

@@ -1,3 +1,5 @@
+To instrument certain regions of your code, you can create transactions to capture them.
+
 ```csharp
 // Transaction can be started by providing, at minimum, the name and the operation
 var transaction = SentrySdk.StartTransaction(

src/platform-includes/performance/enable-manual-instrumentation/go.mdx

@@ -1,3 +1,5 @@
+To instrument certain regions of your code, you can create transactions to capture them.
+
 The following example creates a transaction span to time runs of an expensive operation on items from a channel. Timing for each operation is sent to Sentry and grouped by transaction name:
 
 ```go

src/platform-includes/performance/enable-manual-instrumentation/java.mdx

@@ -1,3 +1,5 @@
+To instrument certain regions of your code, you can create transactions to capture them.
+
 The following example creates a transaction that contains an expensive operation (for example, `processOrderBatch`), and sends the result to Sentry:
 
 ```java {tabTitle:Java}