diff --git a/static/app/components/onboarding/productSelection.tsx b/static/app/components/onboarding/productSelection.tsx index 5675e963f7ed1d..ea0011f6ea8e54 100644 --- a/static/app/components/onboarding/productSelection.tsx +++ b/static/app/components/onboarding/productSelection.tsx @@ -108,6 +108,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, @@ -336,7 +340,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 ( @@ -352,6 +359,13 @@ export function ProductSelection({ })} )} + {showAstroInfo && ( + + {tct("In this quick guide you'll use the [astrocli:astro] CLI to set up:", { + astrocli: , + })} + + )} = new Set([ 'dart', 'javascript', 'javascript-angular', + 'javascript-astro', 'javascript-ember', 'javascript-gatsby', 'javascript-nextjs', diff --git a/static/app/data/platforms.tsx b/static/app/data/platforms.tsx index dfa0e10c2ab427..3313e4f153a989 100644 --- a/static/app/data/platforms.tsx +++ b/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', diff --git a/static/app/gettingStartedDocs/javascript/astro.spec.tsx b/static/app/gettingStartedDocs/javascript/astro.spec.tsx new file mode 100644 index 00000000000000..0392dbfd603cd8 --- /dev/null +++ b/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(); + }); +}); diff --git a/static/app/gettingStartedDocs/javascript/astro.tsx b/static/app/gettingStartedDocs/javascript/astro.tsx new file mode 100644 index 00000000000000..e9a6a02a07533c --- /dev/null +++ b/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 = () => ` + + +`; + +const onboarding: OnboardingConfig = { + introduction: () => + tct("Sentry's integration with [astroLink:Astro] supports Astro 3.0.0 and above.", { + astroLink: , + }), + install: (_params: Params) => [ + { + type: StepType.INSTALL, + configurations: [ + { + description: tct( + 'Install the [sentryAstroPkg:@sentry/astro] package with the [astroCli:astro] CLI:', + { + sentryAstroPkg: , + astroCli: , + } + ), + 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: , + } + ), + 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: , + } + ), + 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: ( + + ), + } + ), + }, + ], + }, + ], + 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: ( + +

+ {t( + "If you're new to Sentry, use the email alert to access your account and complete a product tour." + )} +

+

+ {t( + "If you're an existing user and have disabled alerts, you won't receive this email." + )} +

+ + ), + }, + ], + 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;