chore: Refactor onboarding options for unique titles

app/globals.css

@@ -165,3 +165,20 @@ body {
 {
   color: rgb(134, 142, 150) !important;
 }
+
+/* CSS Counters for Onboarding Steps */
+.onboarding-steps {
+  counter-reset: onboarding-step;
+}
+
+.onboarding-step {
+  counter-increment: onboarding-step;
+}
+
+.onboarding-step h2::before {
+  content: "Step " counter(onboarding-step) ": ";
+}
+
+.onboarding-step h2[data-step-prefix]::before {
+  content: attr(data-step-prefix) counter(onboarding-step) ": ";
+}

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

@@ -159,8 +159,10 @@ import * as Sentry from "@sentry/react";
   [here](features/error-boundary/#manually-capturing-errors).
 </Alert>
 
-<OnboardingOption optionId="performance">
-## Step 4: Set Up React Router
+<OnboardingSteps>
+
+<OnboardingOption optionId="performance" isStep>
+## Set Up React Router
 If you're using `react-router` in your application, you need to set up the Sentry integration for your specific React Router version to trace `navigation` events.\
 Select your React Router version to start instrumenting your routing:
 
@@ -169,45 +171,40 @@ Select your React Router version to start instrumenting your routing:
 - [Older React Router versions](features/react-router)
 - [TanStack Router](features/tanstack-router)
 
-## Step 5: Capture Redux State Data (Optional)
-
 </OnboardingOption>
 
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 4: Capture Redux State Data (Optional)
-</OnboardingOption>
+<OnboardingOption optionId="performance" isStep>
+## Capture Redux State Data (Optional)
 
 To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing your Redux store.
 
 <PlatformContent includePath="configuration/redux-init" />
 
-<OnboardingOption optionId="performance">
-  ## Step 6: Add Readable Stack Traces With Source Maps (Optional)
-</OnboardingOption>
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 5: Add Readable Stack Traces With Source Maps (Optional)
 </OnboardingOption>
 
+<OnboardingOption optionId="performance" isStep>
+## Add Readable Stack Traces With Source Maps (Optional)
+
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
-<OnboardingOption optionId="performance">
-  ## Step 7: Avoid Ad Blockers With Tunneling (Optional)
-</OnboardingOption>
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 6: Avoid Ad Blockers With Tunneling (Optional)
 </OnboardingOption>
 
+<OnboardingOption optionId="performance" isStep>
+## Avoid Ad Blockers With Tunneling (Optional)
+
 <PlatformContent includePath="getting-started-tunneling" />
 
-<OnboardingOption optionId="performance">
-  ## Step 8: Verify Your Setup
-</OnboardingOption>
-<OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 7: Verify Your Setup
 </OnboardingOption>
 
+<OnboardingOption optionId="performance" isStep>
+## Verify Your Setup
+
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
+</OnboardingOption>
+
+</OnboardingSteps>
+
 ### Issues
 
 To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it:

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

@@ -161,15 +161,28 @@ const app = new App({
 export default app;
 ```
 
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+<OnboardingSteps>
+
+<OnboardingOption optionId="performance" isStep>
+## Add Readable Stack Traces With Source Maps (Optional)
 
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+</OnboardingOption>
+
+<OnboardingOption optionId="performance" isStep>
+## Avoid Ad Blockers With Tunneling (Optional)
 
 <PlatformContent includePath="getting-started-tunneling" />
 
-## Step 5: Verify Your Setup
+</OnboardingOption>
+
+<OnboardingOption optionId="performance" isStep>
+## Verify Your Setup
+
+</OnboardingOption>
+
+</OnboardingSteps>
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 

src/components/onboarding/index.tsx

@@ -144,23 +144,33 @@ export function OnboardingOption({
   children,
   optionId,
   hideForThisOption,
+  isStep = false,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   optionId: OptionId;
   hideForThisOption?: boolean;
+  isStep?: boolean;
 }) {
   validateOptionIds([{id: optionId}]);
+  const className = [hideForThisOption ? 'hidden' : '', isStep ? 'onboarding-step' : '']
+    .filter(Boolean)
+    .join(' ');
+
   return (
     <div
       data-onboarding-option={optionId}
       data-hide-for-this-option={hideForThisOption}
-      className={hideForThisOption ? 'hidden' : ''}
+      className={className}
     >
       {children}
     </div>
   );
 }
 
+export function OnboardingSteps({children}: {children: ReactNode}) {
+  return <div className="onboarding-steps">{children}</div>;
+}
+
 /**
  * Updates DOM elements' visibility based on selected onboarding options
  */

src/mdxComponents.ts

@@ -18,7 +18,11 @@ import {GuideGrid} from './components/guideGrid';
 import {JsBundleList} from './components/jsBundleList';
 import {LambdaLayerDetail} from './components/lambdaLayerDetail';
 import {LinkWithPlatformIcon} from './components/linkWithPlatformIcon';
-import {OnboardingOption, OnboardingOptionButtons} from './components/onboarding';
+import {
+  OnboardingOption,
+  OnboardingOptionButtons,
+  OnboardingSteps,
+} from './components/onboarding';
 import {OrgAuthTokenNote} from './components/orgAuthTokenNote';
 import {PageGrid} from './components/pageGrid';
 import {ParamTable} from './components/paramTable';
@@ -84,6 +88,7 @@ export function mdxComponents(
     PlatformSdkPackageName,
     OnboardingOption,
     OnboardingOptionButtons,
+    OnboardingSteps,
     RelayMetrics,
     SandboxLink,
     SignInNote,