feat(onboarding): Prepare JavaScript SDK v11 onboarding

static/app/components/clippedBox.tsx

@@ -370,5 +370,6 @@ const ClipFade = styled('div')`
 
 const CollapseButton = styled('div')`
   text-align: center;
+  margin-top: ${p => p.theme.space.lg};
   margin-bottom: ${p => p.theme.space.lg};
 `;

static/app/components/onboarding/gettingStartedDoc/contentBlocks/defaultRenderers.tsx

@@ -60,7 +60,7 @@ function CodeBlock(block: Extract<ContentBlock, {type: 'code'}>) {
   if ('code' in block) {
     return (
       <div css={baseBlockStyles}>
-        <OnboardingCodeSnippet language={block.language}>
+        <OnboardingCodeSnippet language={block.language} filename={block.filename}>
           {block.code}
         </OnboardingCodeSnippet>
       </div>

static/app/components/onboarding/gettingStartedDoc/utils/index.spec.tsx

@@ -0,0 +1,75 @@
+import {
+  getJsDataCollectionDocsLink,
+  isJavaScriptPlatform,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+
+describe('isJavaScriptPlatform', () => {
+  it.each([
+    'javascript',
+    'javascript-nextjs',
+    'node',
+    'node-express',
+    'bun',
+    'deno',
+    'electron',
+    'capacitor',
+    'ionic',
+  ])('accepts %s', platform => {
+    expect(isJavaScriptPlatform(platform)).toBe(true);
+  });
+
+  it.each([
+    'python',
+    'python-fastapi',
+    'php-laravel',
+    'other',
+    'go',
+    // React Native is JavaScript-based, but its docs do not cover `dataCollection`.
+    'react-native',
+    undefined,
+  ])('rejects %s', platform => {
+    expect(isJavaScriptPlatform(platform)).toBe(false);
+  });
+});
+
+describe('getJsDataCollectionDocsLink', () => {
+  const BASE = 'https://docs.sentry.io/platforms/javascript';
+
+  it.each([
+    ['javascript-nextjs', `${BASE}/guides/nextjs/configuration/options/#dataCollection`],
+    ['node', `${BASE}/guides/node/configuration/options/#dataCollection`],
+    ['node-express', `${BASE}/guides/express/configuration/options/#dataCollection`],
+    ['bun', `${BASE}/guides/bun/configuration/options/#dataCollection`],
+    // Keys whose guide slug differs from the platform key
+    ['node-awslambda', `${BASE}/guides/aws-lambda/configuration/options/#dataCollection`],
+    [
+      'node-azurefunctions',
+      `${BASE}/guides/azure-functions/configuration/options/#dataCollection`,
+    ],
+    [
+      'node-gcpfunctions',
+      `${BASE}/guides/gcp-functions/configuration/options/#dataCollection`,
+    ],
+    [
+      'node-cloudflare-workers',
+      `${BASE}/guides/cloudflare/configuration/options/#dataCollection`,
+    ],
+    // Legacy key of the merged Cloudflare platform
+    [
+      'node-cloudflare-pages',
+      `${BASE}/guides/cloudflare/configuration/options/#dataCollection`,
+    ],
+    ['ionic', `${BASE}/guides/capacitor/configuration/options/#dataCollection`],
+  ])('maps %s to its guide', (platform, expected) => {
+    expect(getJsDataCollectionDocsLink(platform)).toBe(expected);
+  });
+
+  it.each(['javascript', 'other', undefined])(
+    'falls back to the canonical page for %s',
+    platform => {
+      expect(getJsDataCollectionDocsLink(platform)).toBe(
+        `${BASE}/configuration/options/#dataCollection`
+      );
+    }
+  );
+});

static/app/components/onboarding/gettingStartedDoc/utils/index.tsx

@@ -3,6 +3,7 @@ import {Fragment} from 'react';
 import {Button} from '@sentry/scraps/button';
 import {ExternalLink} from '@sentry/scraps/link';
 
+import type {ContentBlock} from 'sentry/components/onboarding/gettingStartedDoc/contentBlocks/types';
 import {
   docsFlowVariantParams,
   resolveDocsFlowEvent,
@@ -84,6 +85,146 @@ export function getUploadSourceMapsStep({
   };
 }
 
+// Platform key families using the JavaScript SDKs. React Native is excluded
+// because its docs do not cover `dataCollection`.
+const JS_PLATFORM_PREFIXES = [
+  'javascript',
+  'node',
+  'bun',
+  'deno',
+  'electron',
+  'capacitor',
+  'cordova',
+  'ionic',
+];
+
+/**
+ * Whether the platform uses a JavaScript SDK that exposes `dataCollection`.
+ * A positive list, so a future non-JavaScript platform is excluded by default.
+ */
+export function isJavaScriptPlatform(platformKey: string | null | undefined): boolean {
+  return (
+    !!platformKey &&
+    JS_PLATFORM_PREFIXES.some(
+      prefix => platformKey === prefix || platformKey.startsWith(`${prefix}-`)
+    )
+  );
+}
+
+// Platform keys whose docs guide slug is not simply the key minus its family prefix.
+const DOCS_GUIDE_SLUG_OVERRIDES: Record<string, string> = {
+  'node-awslambda': 'aws-lambda',
+  'node-azurefunctions': 'azure-functions',
+  'node-gcpfunctions': 'gcp-functions',
+  // Workers and Pages share the `cloudflare` guide.
+  'node-cloudflare-workers': 'cloudflare',
+  'node-cloudflare-pages': 'cloudflare',
+  ionic: 'capacitor',
+};
+
+/**
+ * The `dataCollection` docs for the platform's own guide, for configs shared
+ * across JavaScript platforms. Unknown platforms get the canonical page.
+ */
+export function getJsDataCollectionDocsLink(
+  platformKey: string | null | undefined
+): string {
+  if (
+    !platformKey ||
+    !isJavaScriptPlatform(platformKey) ||
+    platformKey === 'javascript'
+  ) {
+    return 'https://docs.sentry.io/platforms/javascript/configuration/options/#dataCollection';
+  }
+  const slug =
+    DOCS_GUIDE_SLUG_OVERRIDES[platformKey] ??
+    platformKey.replace(/^(javascript|node)-/, '');
+  return `https://docs.sentry.io/platforms/javascript/guides/${slug}/configuration/options/#dataCollection`;
+}
+
+/**
+ * Shown without an init wrapper because agent and MCP monitoring span several
+ * init shapes (`Sentry.init`, `Sentry.withSentry`, `instrumentAgentWithSentry`).
+ */
+export const GEN_AI_DATA_COLLECTION_SNIPPET = `dataCollection: {
+  genAI: { inputs: false, outputs: false },
+},`;
+
+const DEFAULT_DATA_COLLECTION_SNIPPET = `Sentry.init({
+  // ...
+  dataCollection: {
+    userInfo: false,
+    // other options
+  },
+});`;
+
+/**
+ * Presents `dataCollection` as its own setup step instead of a commented-out
+ * override in the init snippet, as the SDK data collection spec requires. Pass
+ * `collapsible: false` for `GuidedSteps` surfaces, which drop collapsible steps.
+ */
+export function getDataCollectionStep({
+  docsLink,
+  code,
+  description,
+  collapsible = true,
+}: {
+  docsLink: string;
+  code?: string;
+  collapsible?: boolean;
+  description?: React.ReactNode;
+}): OnboardingStep {
+  const summary: ContentBlock[] = description
+    ? [{type: 'text', text: description}]
+    : [
+        {
+          type: 'text',
+          text: t(
+            'By default, the SDK sends user identity data (IP address, ID, and similar) and other data like HTTP bodies and URL query parameters. This gives you rich debugging context.'
+          ),
+        },
+        {
+          type: 'text',
+          text: tct(
+            'The SDK always filters sensitive values whose keys match a built-in denylist, such as [authCode:auth] or [passwordCode:password], and sends [filtered] instead.',
+            {
+              authCode: <code />,
+              passwordCode: <code />,
+              filtered: <code>[Filtered]</code>,
+            }
+          ),
+        },
+      ];
+
+  return {
+    collapsible,
+    title: t('Control the Data You Send to Sentry (Optional)'),
+    content: [
+      ...summary,
+      {
+        type: 'text',
+        text: tct(
+          "To send less data, turn off the categories you don't need in the [code:dataCollection] option. For the full list of categories and their defaults, see [link:the dataCollection options].",
+          {
+            code: <code />,
+            link: <ExternalLink href={docsLink} />,
+          }
+        ),
+      },
+      {
+        type: 'code',
+        tabs: [
+          {
+            label: 'JavaScript',
+            language: 'javascript',
+            code: code ?? DEFAULT_DATA_COLLECTION_SNIPPET,
+          },
+        ],
+      },
+    ],
+  };
+}
+
 const SENTRY_INSTRUMENT_SKILL_URL = 'https://skills.sentry.dev/instrument';
 
 function CopyPromptButton({prompt}: {prompt: string}) {

static/app/components/onboarding/productSelection.tsx

@@ -93,8 +93,17 @@ export function getDisabledProducts(organization: Organization): DisabledProduct
 // NOTE: Please keep the prefix in alphabetical order
 export const platformProductAvailability = {
   'apple-macos': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
-  bun: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
+  bun: [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.LOGS,
+    ProductSolution.METRICS,
+  ],
   capacitor: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
+  deno: [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.LOGS,
+    ProductSolution.METRICS,
+  ],
   dotnet: [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,

static/app/components/onboarding/scm/scmPlatformHelpers.spec.tsx

@@ -27,9 +27,18 @@ describe('platformOptionGroups', () => {
     );
   });
 
-  it('keeps every platform exactly once across sections', () => {
+  it('leaves hidden platforms out of the dropdown', () => {
+    expect(
+      otherGroup!.options.some(option => option.value === 'node-cloudflare-pages')
+    ).toBe(false);
+    expect(
+      platformOptions.filter(option => option.label === 'Cloudflare (Node)')
+    ).toHaveLength(1);
+  });
+
+  it('keeps every offered platform exactly once across sections', () => {
     const values = platformOptions.map(option => option.value);
     expect(new Set(values).size).toBe(values.length);
-    expect(values).toHaveLength(platforms.length);
+    expect(values).toHaveLength(platforms.filter(platform => !platform.hidden).length);
   });
 });

static/app/components/onboarding/scm/scmPlatformHelpers.tsx

@@ -58,6 +58,7 @@ export const platformOptionGroups = [
   {
     label: t('Other platforms'),
     options: platforms
+      .filter(platform => !platform.hidden)
       .filter(platform => !popularPlatformCategories.has(platform.id))
       .toSorted((a, b) => comparePlatformNames(a.name, b.name))
       .map(toPlatformOption),

static/app/data/platformCategories.tsx

@@ -317,6 +317,7 @@ export const withLoggingOnboarding = new Set<PlatformKey>([
   'cocoa-objc',
   'cocoa-swift',
   'dart',
+  'deno',
   'dotnet',
   'dotnet-aspnet',
   'dotnet-aspnetcore',
@@ -416,6 +417,8 @@ export const withMetricsOnboarding = new Set<PlatformKey>([
   'apple',
   'apple-ios',
   'apple-macos',
+  'bun',
+  'deno',
   'dotnet',
   'dotnet-aspnet',
   'dotnet-aspnetcore',
@@ -856,16 +859,7 @@ export const featureFlagDrawerPlatforms: readonly PlatformKey[] = [
   'react-native',
 ];
 
-export const agentMonitoringPlatforms: ReadonlySet<PlatformKey> = new Set([
-  ...platformKeys.filter(id => id.startsWith('javascript')),
-  ...platformKeys.filter(id => id.startsWith('node')),
-  ...platformKeys.filter(id => id.startsWith('python')),
-  'deno',
-  'bun',
-  'php-laravel',
-]);
-
-export const javascriptMetaFrameworks: readonly PlatformKey[] = [
+const javascriptMetaFrameworks: readonly PlatformKey[] = [
   'javascript-astro',
   'javascript-nextjs',
   'javascript-nuxt',
@@ -876,8 +870,19 @@ export const javascriptMetaFrameworks: readonly PlatformKey[] = [
   'javascript-tanstackstart-react',
 ] as const;
 
+export const agentMonitoringPlatforms: ReadonlySet<PlatformKey> = new Set([
+  ...javascriptMetaFrameworks,
+  ...platformKeys.filter(id => id.startsWith('node')),
+  ...platformKeys.filter(id => id.startsWith('python')),
+  'deno',
+  'bun',
+  'php-laravel',
+]);
+
 export const mcpMonitoringPlatforms: ReadonlySet<PlatformKey> = new Set([
   ...javascriptMetaFrameworks,
   ...platformKeys.filter(id => id.startsWith('node')),
   ...platformKeys.filter(id => id.startsWith('python')),
+  'bun',
+  'deno',
 ]);

static/app/data/platformPickerCategories.tsx

@@ -80,9 +80,7 @@ const server = new Set<PlatformKey>([
   'kotlin',
   'native',
   'node',
-  'node-cloudflare-pages',
   'node-cloudflare-workers',
-  'node-connect',
   'node-express',
   'node-fastify',
   'node-hapi',
@@ -158,7 +156,6 @@ const serverless = new Set<PlatformKey>([
   'node-awslambda',
   'node-azurefunctions',
   'node-gcpfunctions',
-  'node-cloudflare-pages',
   'node-cloudflare-workers',
   'python-awslambda',
   'python-gcpfunctions',

static/app/data/platforms.tsx

@@ -445,14 +445,16 @@ export const platforms: PlatformIntegration[] = [
   },
   {
     id: 'node-cloudflare-pages',
-    name: 'Cloudflare Pages',
+    name: 'Cloudflare (Node)',
     type: 'framework',
     language: 'node',
     link: 'https://docs.sentry.io/platforms/javascript/guides/cloudflare/',
+    // Merged into `node-cloudflare-workers`, which is the Cloudflare platform.
+    hidden: true,
   },
   {
     id: 'node-cloudflare-workers',
-    name: 'Cloudflare Workers',
+    name: 'Cloudflare (Node)',
     type: 'framework',
     language: 'node',
     link: 'https://docs.sentry.io/platforms/javascript/guides/cloudflare/',
@@ -463,6 +465,8 @@ export const platforms: PlatformIntegration[] = [
     type: 'framework',
     language: 'node',
     link: 'https://docs.sentry.io/platforms/javascript/guides/connect/',
+    // Version 11 of the SDK removed the Connect instrumentation.
+    hidden: true,
   },
   {
     id: 'node-express',