feat(onboarding): Add bun onboarding docs (#56928)

static/app/components/onboarding/productSelection.tsx

@@ -75,6 +75,7 @@ function getDisabledProducts(organization: Organization): DisabledProducts {
 export const platformProductAvailability = {
   android: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
   'apple-ios': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
+  bun: [ProductSolution.PERFORMANCE_MONITORING],
   javascript: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.SESSION_REPLAY],
   'javascript-react': [
     ProductSolution.PERFORMANCE_MONITORING,

static/app/data/platformCategories.tsx

@@ -81,6 +81,7 @@ export const mobile = [
 ] as const;
 
 export const backend = [
+  'bun',
   'dotnet',
   'dotnet-aspnetcore',
   'dotnet-aspnet',
@@ -194,6 +195,7 @@ export const tracing = [
 ] as const;
 
 export const performance = [
+  'bun',
   'javascript',
   'javascript-ember',
   'javascript-react',
@@ -304,6 +306,7 @@ export const releaseHealth: PlatformKey[] = [
   'flutter',
   'dart-flutter',
   // backend
+  'bun',
   'native',
   'node',
   'node-express',

static/app/data/platforms.tsx

@@ -142,6 +142,13 @@ const javaScriptPlatforms: Platform[] = [
     language: 'javascript',
     link: 'https://docs.sentry.io/platforms/javascript/guides/vue/',
   },
+  {
+    id: 'bun',
+    name: 'Bun',
+    type: 'language',
+    language: 'bun',
+    link: 'https://docs.sentry.io/platforms/javascript/guides/bun/',
+  },
 ];
 
 const javaPlatforms: Platform[] = [

static/app/gettingStartedDocs/bun/bun.spec.tsx

@@ -0,0 +1,18 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
+
+import {GettingStartedWithBun, steps} from './bun';
+
+describe('GettingStartedWithBun', function () {
+  it('renders doc correctly', function () {
+    render(<GettingStartedWithBun dsn="test-dsn" projectSlug="test-project" />);
+
+    // Steps
+    for (const step of steps()) {
+      expect(
+        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
+      ).toBeInTheDocument();
+    }
+  });
+});

static/app/gettingStartedDocs/bun/bun.tsx

@@ -0,0 +1,127 @@
+import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
+import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import {ProductSolution} from 'sentry/components/onboarding/productSelection';
+import {PlatformKey} from 'sentry/data/platformCategories';
+import {t} from 'sentry/locale';
+import type {Organization} from 'sentry/types';
+
+type StepProps = {
+  newOrg: boolean;
+  organization: Organization;
+  platformKey: PlatformKey;
+  projectId: string;
+  sentryInitContent: string;
+};
+
+const performanceOtherConfig = `
+// Performance Monitoring
+tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+`;
+
+export const steps = ({
+  sentryInitContent,
+}: Partial<StepProps> = {}): LayoutProps['steps'] => [
+  {
+    type: StepType.INSTALL,
+    description: t(
+      "Sentry captures data by using an SDK within your application's runtime."
+    ),
+    configurations: [
+      {
+        language: 'bash',
+        code: 'bun add @sentry/bun',
+      },
+    ],
+  },
+  {
+    type: StepType.CONFIGURE,
+    description: t(
+      "Initialize Sentry as early as possible in your application's lifecycle."
+    ),
+    configurations: [
+      {
+        language: 'javascript',
+        code: `
+//...
+import * as Sentry from "@sentry/bun";
+
+Sentry.init({
+  ${sentryInitContent}
+});
+        `,
+      },
+    ],
+  },
+  {
+    type: StepType.VERIFY,
+    description: t(
+      "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
+    ),
+    configurations: [
+      {
+        language: 'javascript',
+        code: `try {
+            throw new Error('Sentry Bun test');
+          } catch (e) {
+            Sentry.captureException(e);
+          }`,
+      },
+    ],
+  },
+];
+
+export const nextSteps = [
+  {
+    id: 'performance-monitoring',
+    name: t('Performance Monitoring'),
+    description: t(
+      'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
+    ),
+    link: 'https://docs.sentry.io/platforms/javascript/guides/bun/performance/',
+  },
+];
+// Configuration End
+
+export function GettingStartedWithBun({
+  dsn,
+  activeProductSelection = [],
+  newOrg,
+  platformKey,
+  ...props
+}: ModuleProps) {
+  const integrations: string[] = [];
+  const otherConfigs: string[] = [];
+  let nextStepDocs = [...nextSteps];
+
+  if (activeProductSelection.includes(ProductSolution.PERFORMANCE_MONITORING)) {
+    otherConfigs.push(performanceOtherConfig.trim());
+    nextStepDocs = nextStepDocs.filter(
+      step => step.id !== ProductSolution.PERFORMANCE_MONITORING
+    );
+  }
+
+  let sentryInitContent: string[] = [`dsn: "${dsn}",`];
+
+  if (integrations.length > 0) {
+    sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
+  }
+
+  if (otherConfigs.length > 0) {
+    sentryInitContent = sentryInitContent.concat(otherConfigs);
+  }
+
+  return (
+    <Layout
+      steps={steps({
+        sentryInitContent: sentryInitContent.join('\n'),
+      })}
+      nextSteps={nextStepDocs}
+      platformKey={platformKey}
+      newOrg={newOrg}
+      {...props}
+    />
+  );
+}
+
+export default GettingStartedWithBun;