feat(getting-started): Add Astro onboarding (#58435)

This change adds a getting started page for Astro. Furthermore it also
re-adds astro to the platform picker.

One noteable thing here: We're currently experimenting with enabeling
performance and Replay by default and letting users opt out of both by
specifying 0-sample rates. Therefore, the init code is simplest when
everything is selected and additional options (the rates) are added, if
products are un-selected.

static/app/components/onboarding/productSelection.tsx

@@ -104,6 +104,10 @@ export const platformProductAvailability = {
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
   ],
+  'javascript-astro': [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.SESSION_REPLAY,
+  ],
   node: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
   'node-azurefunctions': [
     ProductSolution.PERFORMANCE_MONITORING,
@@ -332,7 +336,10 @@ export function ProductSelection({
   // The package manager info is only shown for javascript platforms
   // until we improve multi snippet suppport
   const showPackageManagerInfo =
-    platform?.indexOf('javascript') === 0 || platform?.indexOf('node') === 0;
+    (platform?.indexOf('javascript') === 0 || platform?.indexOf('node') === 0) &&
+    platform !== 'javascript-astro';
+
+  const showAstroInfo = platform === 'javascript-astro';
 
   return (
     <Fragment>
@@ -348,6 +355,13 @@ export function ProductSelection({
               })}
         </TextBlock>
       )}
+      {showAstroInfo && (
+        <TextBlock noMargin>
+          {tct("In this quick guide you'll use the [astrocli:astro] CLI to set up:", {
+            astrocli: <strong />,
+          })}
+        </TextBlock>
+      )}
       <Products>
         <Product
           label={t('Error Monitoring')}

static/app/data/platformPickerCategories.tsx

@@ -33,6 +33,7 @@ const browser: Set<PlatformKey> = new Set([
   'dart',
   'javascript',
   'javascript-angular',
+  'javascript-astro',
   'javascript-ember',
   'javascript-gatsby',
   'javascript-nextjs',

static/app/data/platforms.tsx

@@ -263,14 +263,13 @@ const platforms: PlatformIntegration[] = [
     language: 'javascript',
     link: 'https://docs.sentry.io/platforms/javascript/guides/angular/',
   },
-  // TODO: comment back in when we have a getting-started page for Astro
-  // {
-  //   id: 'javascript-astro',
-  //   name: 'Astro',
-  //   type: 'framework',
-  //   language: 'javascript',
-  //   link: 'https://docs.sentry.io/platforms/javascript/guides/astro/',
-  // },
+  {
+    id: 'javascript-astro',
+    name: 'Astro',
+    type: 'framework',
+    language: 'javascript',
+    link: 'https://docs.sentry.io/platforms/javascript/guides/astro/',
+  },
   {
     id: 'javascript-ember',
     name: 'Ember',

static/app/gettingStartedDocs/javascript/astro.spec.tsx

@@ -0,0 +1,75 @@
+import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
+import {screen} from 'sentry-test/reactTestingLibrary';
+import {textWithMarkupMatcher} from 'sentry-test/utils';
+
+import {ProductSolution} from 'sentry/components/onboarding/productSelection';
+
+import docs from './astro';
+
+describe('javascript-astro onboarding docs', function () {
+  it('renders onboarding docs correctly', () => {
+    renderWithOnboardingLayout(docs);
+
+    // Renders main headings
+    expect(screen.getByRole('heading', {name: 'Install'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument();
+
+    // Includes minimum required Astro version
+    expect(screen.getByText(textWithMarkupMatcher(/Astro 3.0.0/))).toBeInTheDocument();
+
+    // Includes import statement
+    expect(
+      screen.getByText(textWithMarkupMatcher(/import sentry from "@sentry\/astro"/))
+    ).toBeInTheDocument();
+  });
+
+  it("doesn't display any sample rates by default", () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [
+        ProductSolution.ERROR_MONITORING,
+        ProductSolution.PERFORMANCE_MONITORING,
+        ProductSolution.SESSION_REPLAY,
+      ],
+    });
+
+    expect(
+      screen.queryByText(textWithMarkupMatcher(/tracesSampleRate/))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(textWithMarkupMatcher(/replaysSessionSampleRate/))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(textWithMarkupMatcher(/replaysOnErrorSampleRate/))
+    ).not.toBeInTheDocument();
+  });
+
+  it('disables performance setting the tracesSampleRate to 0', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [
+        ProductSolution.ERROR_MONITORING,
+        ProductSolution.SESSION_REPLAY,
+      ],
+    });
+
+    expect(
+      screen.getByText(textWithMarkupMatcher(/tracesSampleRate: 0/))
+    ).toBeInTheDocument();
+  });
+
+  it('disables replay by setting replay samplerates set to 0', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [
+        ProductSolution.ERROR_MONITORING,
+        ProductSolution.PERFORMANCE_MONITORING,
+      ],
+    });
+
+    expect(
+      screen.getByText(textWithMarkupMatcher(/replaysSessionSampleRate: 0/))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(textWithMarkupMatcher(/replaysOnErrorSampleRate: 0/))
+    ).toBeInTheDocument();
+  });
+});

static/app/gettingStartedDocs/javascript/astro.tsx

@@ -0,0 +1,195 @@
+import {Fragment} from 'react';
+
+import ExternalLink from 'sentry/components/links/externalLink';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import {
+  Docs,
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {t, tct} from 'sentry/locale';
+
+type Params = DocsParams;
+
+const getSdkSetupSnippet = (params: Params) => `
+import { defineConfig } from "astro/config";
+import sentry from "@sentry/astro";
+
+export default defineConfig({
+  integrations: [
+    sentry({
+      dsn: "${params.dsn}",${
+        params.isPerformanceSelected
+          ? ''
+          : `
+      tracesSampleRate: 0,`
+      }${
+        params.isReplaySelected
+          ? ''
+          : `
+      replaysSessionSampleRate: 0,
+      replaysOnErrorSampleRate: 0,`
+      }
+      sourceMapsUploadOptions: {
+        project: "${params.projectSlug}",
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+      },
+    }),
+  ],
+});
+`;
+
+const getVerifyAstroSnippet = () => `
+<!-- your-page.astro -->
+<button onclick="throw new Error('This is a test error')">
+  Throw test error
+</button>
+`;
+
+const onboarding: OnboardingConfig = {
+  introduction: () =>
+    tct("Sentry's integration with [astroLink:Astro] supports Astro 3.0.0 and above.", {
+      astroLink: <ExternalLink href="https://astro.build/" />,
+    }),
+  install: (_params: Params) => [
+    {
+      type: StepType.INSTALL,
+      configurations: [
+        {
+          description: tct(
+            'Install the [sentryAstroPkg:@sentry/astro] package with the [astroCli:astro] CLI:',
+            {
+              sentryAstroPkg: <code />,
+              astroCli: <code />,
+            }
+          ),
+          language: 'bash',
+          code: [
+            {
+              label: 'bash',
+              value: 'bash',
+              language: 'bash',
+              code: `npx astro add @sentry/astro`,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  configure: (params: Params) => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'Open up your [astroConfig:astro.config.mjs] file and configure the DSN, and any other settings you need:',
+        {
+          astroConfig: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getSdkSetupSnippet(params),
+            },
+          ],
+        },
+        {
+          description: tct(
+            'Add your Sentry auth token to the [authTokenEnvVar:SENTRY_AUTH_TOKEN] environment variable:',
+            {
+              authTokenEnvVar: <code />,
+            }
+          ),
+          language: 'bash',
+          code: [
+            {
+              value: 'bash',
+              language: 'bash',
+              label: 'bash',
+              code: `SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___`,
+            },
+          ],
+        },
+        {
+          description: tct(
+            'You can further customize your SDK by [manualSetupLink:manually inializing the SDK].',
+            {
+              manualSetupLink: (
+                <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/astro/manual-setup/" />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t(
+        'Then throw a test error anywhere in your app, so you can test that everything is working:'
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'Astro',
+              value: 'html',
+              language: 'html',
+              code: getVerifyAstroSnippet(),
+            },
+          ],
+        },
+      ],
+      additionalInfo: (
+        <Fragment>
+          <p>
+            {t(
+              "If you're new to Sentry, use the email alert to access your account and complete a product tour."
+            )}
+          </p>
+          <p>
+            {t(
+              "If you're an existing user and have disabled alerts, you won't receive this email."
+            )}
+          </p>
+        </Fragment>
+      ),
+    },
+  ],
+  nextSteps: () => [
+    {
+      id: 'astro-manual-setup',
+      name: t('Customize your SDK Setup'),
+      description: t(
+        'Learn how to further configure and customize your Sentry Astro SDK setup.'
+      ),
+      link: 'https://docs.sentry.io/platforms/javascript/guides/astro/manual-setup/',
+    },
+    {
+      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/astro/performance/',
+    },
+    {
+      id: 'session-replay',
+      name: t('Session Replay'),
+      description: t(
+        'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.'
+      ),
+      link: 'https://docs.sentry.io/platforms/javascript/guides/astro/session-replay/',
+    },
+  ],
+};
+
+const docs: Docs = {
+  onboarding,
+};
+
+export default docs;