feat(js): Add new onboarding for all JavaScript guides (#10241)

Author: mydea

docs/platforms/javascript/common/index.mdx

@@ -41,11 +41,30 @@ If you prefer to follow video instructions, see [How to Install the Sentry Next.
 
 </PlatformSection>
 
-
 <PlatformSection notSupported={["javascript.deno"]}>
 
 ## Install
 
+<PlatformCategorySection notSupported={["server"]}>
+  <PlatformSection notSupported={["javascript", 'javascript.cordova']}>
+    <OnboardingOptionButtons
+      options={["error-monitoring", "performance", "session-replay"]}
+    />
+  </PlatformSection>
+</PlatformCategorySection>
+
+<PlatformCategorySection notSupported={["browser"]}>
+  <PlatformSection notSupported={["javascript.bun"]}>
+    <OnboardingOptionButtons
+      options={["error-monitoring", "performance", "profiling"]}
+    />
+  </PlatformSection>
+
+  <PlatformSection supported={["javascript.bun"]}>
+    <OnboardingOptionButtons options={["error-monitoring", "performance"]} />
+  </PlatformSection>
+</PlatformCategorySection>
+
 Sentry captures data by using an SDK within your application’s runtime.
 
 <PlatformContent includePath="getting-started-install" />

docs/platforms/javascript/common/performance/index.mdx

@@ -17,13 +17,22 @@ If you’re adopting Performance in a high-throughput environment, we recommend
 
 </PlatformCategorySection>
 
+<PlatformContent supported={['javascript']}>
 ## Enable Tracing
 
 <PlatformContent includePath="performance/enable-tracing" />
 
+</PlatformContent>
+
 ## Configure
 
+<PlatformSection supported={['javascript']}>
 First, enable tracing and configure the sampling rate for transactions. Set the sample rate for your transactions by either:
+</PlatformSection>
+
+<PlatformSection notSupported={['javascript']}>
+First, configure the sampling rate for transactions. Set the sample rate for your transactions by either:
+</PlatformSection>
 
 - Setting a uniform sample rate for all transactions using the <PlatformIdentifier name="traces-sample-rate" /> option in your SDK config to a number between `0` and `1`. (For example, to send 20% of transactions, set <PlatformIdentifier name="traces-sample-rate" /> to `0.2`.)
 - Controlling the sample rate based on the transaction itself and the context in which it's captured, by providing a function to the <PlatformIdentifier name="traces-sampler" /> config option.

docs/platforms/javascript/guides/aws-lambda/index.mdx

@@ -19,62 +19,25 @@ Before you begin, note:
 - You need to have experience with AWS console and a basic understanding of Lambda.
 - You'll need an AWS account and you have to create an [IAM user](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html).
 
-<Note>
-  This guide is for version 8.0.0 and up of `@sentry/aws-serverless`.
-</Note>
+<Note>This guide is for version 8.0.0 and up of `@sentry/aws-serverless`.</Note>
 
-Create a deployment package on your local machine and install the required dependencies in the deployment package. For more information, see [Building an AWS Lambda deployment package for Node.js](https://aws.amazon.com/premiumsupport/knowledge-center/lambda-deployment-package-nodejs/).
+## Install
 
-Add `@sentry/aws-serverless` as a dependency:
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "profiling"]}
+/>
 
-```bash {tabTitle:npm}
-npm install --save @sentry/aws-serverless
-```
+Create a deployment package on your local machine and install the required dependencies in the deployment package. For more information, see [Building an AWS Lambda deployment package for Node.js](https://aws.amazon.com/premiumsupport/knowledge-center/lambda-deployment-package-nodejs/).
 
-```bash {tabTitle:Yarn}
-yarn add @sentry/aws-serverless
-```
+<PlatformContent includePath="getting-started-install" />
 
 We also support [installing Sentry as a Container Image](/platforms/javascript/guides/aws-lambda/container-image/) and [installing Sentry in Lambda Layer](/platforms/javascript/guides/aws-lambda/layer/).
 
-You can use the AWS Lambda integration for the Node like this:
-
-<SignInNote />
-
-```javascript {tabTitle:async}
-const Sentry = require("@sentry/aws-serverless");
-
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
-
-  // Add Performance Monitoring by setting tracesSampleRate and adding integration
-  // Set tracesSampleRate to 1.0 to capture 100% of transactions
-  // We recommend adjusting this value in production
-  tracesSampleRate: 1.0,
-});
-
-exports.handler = Sentry.wrapHandler(async (event, context) => {
-  // Your handler code
-});
-```
-
-```javascript {tabTitle:sync}
-const Sentry = require("@sentry/aws-serverless");
-
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
+## Configure
 
-  // We recommend adjusting this value in production, or using tracesSampler
-  // for finer control
-  tracesSampleRate: 1.0,
-});
-
-exports.handler = Sentry.wrapHandler((event, context, callback) => {
-  // Your handler code
-});
-```
+You can use the AWS Lambda integration for the Node like this:
 
-{/* <!-- TODO-ADD-VERIFICATION-EXAMPLE --> */}
+<PlatformContent includePath="getting-started-config" />
 
 ## Enable Timeout Warning
 

docs/platforms/javascript/guides/azure-functions/index.mdx

@@ -7,46 +7,21 @@ categories:
   - serverless
 ---
 
-Add `@sentry/node` as a dependency:
+## Install
 
-```bash {tabTitle:npm}
-npm install --save @sentry/node
-```
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "profiling"]}
+/>
 
-```bash {tabTitle:Yarn}
-yarn add @sentry/node
-```
+Sentry captures data by using an SDK within your application’s runtime. This means that you have to add `@sentry/node` as a runtime dependency to your application:
+
+<PlatformContent includePath="getting-started-install" />
+
+## Configure
 
 To set up Sentry error logging for an Azure Function:
 
-<SignInNote />
-
-```javascript
-"use strict";
-
-const Sentry = require("@sentry/node");
-
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
-});
-
-module.exports = async function (context, req) {
-  try {
-    await notExistFunction();
-  } catch (e) {
-    Sentry.withScope((scope) => {
-      scope.setSDKProcessingMetadata({ request: req });
-      Sentry.captureException(e);
-    });
-    await Sentry.flush(2000);
-  }
-
-  context.res = {
-    status: 200,
-    body: "Hello from Azure Cloud Function!",
-  };
-};
-```
+<PlatformContent includePath="getting-started-config" />
 
 You can obtain the DSN using your Sentry account from your organization's _Settings > Projects > Client Keys (DSN)_ in the Sentry web UI.
 

docs/platforms/javascript/guides/bun/config.yml

@@ -1,5 +1,4 @@
 title: Bun
 sdk: sentry.javascript.bun
 categories:
-  - browser
   - server

docs/platforms/javascript/guides/electron/index.mdx

@@ -10,6 +10,10 @@ categories:
 
 ## Install
 
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "session-replay"]}
+/>
+
 <PlatformContent includePath="getting-started-install" />
 
 ## Configure

docs/platforms/javascript/guides/gatsby/index.mdx

@@ -8,6 +8,10 @@ categories:
 
 ## Install
 
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "session-replay"]}
+/>
+
 To use Sentry with your Gatsby application, you will need to use `@sentry/gatsby` (Sentry’s Gatsby SDK):
 
 ```bash {tabTitle:npm}
@@ -42,12 +46,15 @@ Then, configure your `Sentry.init`:
 
 <SignInNote />
 
-```javascript {filename:sentry.config.(js|ts)}
+```javascript {filename:sentry.config.(js|ts)} {"onboardingOptions": {"performance": "6, 9-13", "session-replay": "7, 14-18"}}
 import * as Sentry from "@sentry/gatsby";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [Sentry.replayIntegration()],
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.replayIntegration(),
+  ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.

docs/platforms/javascript/guides/gcp-functions/index.mdx

@@ -11,62 +11,21 @@ categories:
   This guide is for version 8.0.0 and up of `@sentry/google-cloud-serverless`.
 </Note>
 
-Add `@sentry/google-cloud-serverless` as a dependency to `package.json`:
-
-```bash
-  "@sentry/google-cloud-serverless": "^{{@inject packages.version('sentry.javascript.node') }}"
-```
-
-To set up Sentry for a Google Cloud Function:
-
-<SignInNote />
-
-```javascript {tabTitle:Http functions}
-const Sentry = require("@sentry/google-cloud-serverless");
+## Install
 
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "profiling"]}
+/>
 
-  // Add Performance Monitoring by setting tracesSampleRate and adding integration
-  // Set tracesSampleRate to 1.0 to capture 100% of transactions
-  // We recommend adjusting this value in production
-  tracesSampleRate: 1.0,
-});
-
-exports.helloHttp = Sentry.wrapHttpFunction((req, res) => {
-  throw new Error("oh, hello there!");
-});
-```
-
-```javascript {tabTitle:Background functions}
-const Sentry = require("@sentry/google-cloud-serverless");
-
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
-  tracesSampleRate: 1.0,
-});
+Add `@sentry/google-cloud-serverless` as a dependency to `package.json`:
 
-exports.helloEvents = Sentry.wrapEventFunction(
-  (data, context, callback) => {
-    throw new Error("oh, hello there!");
-  }
-);
-```
+<PlatformContent includePath="getting-started-install" />
 
-```javascript {tabTitle:CloudEvent functions}
-const Sentry = require("@sentry/google-cloud-serverless");
+## Configure
 
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
-  tracesSampleRate: 1.0,
-});
+To set up Sentry for a Google Cloud Function:
 
-exports.helloEvents = Sentry.wrapCloudEventFunction(
-  (context, callback) => {
-    throw new Error("oh, hello there!");
-  }
-);
-```
+<PlatformContent includePath="getting-started-config" />
 
 <Alert level="warning" title="Note">
 

platform-includes/getting-started-config/javascript.angular.mdx

@@ -2,7 +2,7 @@ Once this is done, Sentry's Angular SDK captures all unhandled exceptions and tr
 
 <SignInNote />
 
-```typescript {filename: main.ts} {3, 6-30}
+```typescript {filename: main.ts} {3, 6-30} {"onboardingOptions": {"performance": "9-12, 17-24", "session-replay": "13-15, 25-29"}}
 import { enableProdMode } from "@angular/core";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import * as Sentry from "@sentry/angular";
@@ -43,7 +43,7 @@ platformBrowserDynamic()
 
 The Sentry Angular SDK exports a couple of Angular providers that are necessary to fully instrument your application. We recommend registering them in your main `AppModule`:
 
-```typescript {filename: app.module.ts} {4, 9-22}
+```typescript {filename: app.module.ts} {4, 9-22} {"onboardingOptions": {"performance": "13-22"}}
 import { APP_INITIALIZER, ErrorHandler, NgModule } from "@angular/core";
 import { Router } from "@angular/router";
 
@@ -74,6 +74,7 @@ export class AppModule {}
 
 The `Sentry.createErrorHandler` function initializes a Sentry-specific `ErrorHandler` that automatically sends errors caught by Angular to Sentry. You can also customize the behavior by setting a couple of handler [options](https://github.com/getsentry/sentry-javascript/blob/master/packages/angular/src/errorhandler.ts).
 
+<OnboardingOption optionId="performance">
 The `Sentry.TraceService` listens to the Angular router for performance monitoring and tracing. To inject `TraceService`, register the `APP_INITIALIZER` provider as shown above. Alternatively, you can also require the `TraceService` from inside your `AppModule` constructor:
 
 ```javascript {filename: app.module.ts} {5}
@@ -84,3 +85,4 @@ export class AppModule {
   constructor(trace: Sentry.TraceService) {}
 }
 ```
+</OnboardingOption>