diff --git a/static/app/gettingStartedDocs/node/cloudflare-pages/agentMonitoring.tsx b/static/app/gettingStartedDocs/node/cloudflare-pages/agentMonitoring.tsx new file mode 100644 index 00000000000000..821a43cdddc2b9 --- /dev/null +++ b/static/app/gettingStartedDocs/node/cloudflare-pages/agentMonitoring.tsx @@ -0,0 +1,5 @@ +import {getNodeAgentMonitoringOnboarding} from 'sentry/gettingStartedDocs/node/node/utils'; + +export const agentMonitoring = getNodeAgentMonitoringOnboarding({ + packageName: '@sentry/cloudflare', +}); diff --git a/static/app/gettingStartedDocs/node/cloudflare-pages/crashReport.tsx b/static/app/gettingStartedDocs/node/cloudflare-pages/crashReport.tsx new file mode 100644 index 00000000000000..6b7a91aa31adb1 --- /dev/null +++ b/static/app/gettingStartedDocs/node/cloudflare-pages/crashReport.tsx @@ -0,0 +1,29 @@ +import { + StepType, + type OnboardingConfig, +} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import { + getCrashReportJavaScriptInstallSteps, + getCrashReportModalConfigDescription, + getCrashReportModalIntroduction, +} from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; + +export const crashReport: OnboardingConfig = { + introduction: () => getCrashReportModalIntroduction(), + install: params => getCrashReportJavaScriptInstallSteps(params), + configure: () => [ + { + type: StepType.CONFIGURE, + content: [ + { + type: 'text', + text: getCrashReportModalConfigDescription({ + link: 'https://docs.sentry.io/platforms/javascript/guides/cloudflare/user-feedback/configuration/#crash-report-modal', + }), + }, + ], + }, + ], + verify: () => [], + nextSteps: () => [], +}; diff --git a/static/app/gettingStartedDocs/node/cloudflare-pages/index.tsx b/static/app/gettingStartedDocs/node/cloudflare-pages/index.tsx new file mode 100644 index 00000000000000..66bf7079d4e76b --- /dev/null +++ b/static/app/gettingStartedDocs/node/cloudflare-pages/index.tsx @@ -0,0 +1,17 @@ +import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; + +import {agentMonitoring} from './agentMonitoring'; +import {crashReport} from './crashReport'; +import {logs} from './logs'; +import {mcp} from './mcp'; +import {onboarding} from './onboarding'; + +const docs: Docs = { + onboarding, + crashReportOnboarding: crashReport, + logsOnboarding: logs, + agentMonitoringOnboarding: agentMonitoring, + mcpOnboarding: mcp, +}; + +export default docs; diff --git a/static/app/gettingStartedDocs/node/cloudflare-pages/logs.tsx b/static/app/gettingStartedDocs/node/cloudflare-pages/logs.tsx new file mode 100644 index 00000000000000..26257bd67bdfd6 --- /dev/null +++ b/static/app/gettingStartedDocs/node/cloudflare-pages/logs.tsx @@ -0,0 +1,25 @@ +import {getNodeLogsOnboarding} from 'sentry/gettingStartedDocs/node/node/utils'; + +export const logs = getNodeLogsOnboarding({ + docsPlatform: 'cloudflare', + packageName: '@sentry/cloudflare', + generateConfigureSnippet: (params, packageName) => ({ + type: 'code', + language: 'javascript', + code: `import * as Sentry from "${packageName}"; + +export const onRequest = [ + // Make sure Sentry is the first middleware + Sentry.sentryPagesPlugin((context) => ({ + dsn: "${params.dsn.public}", + integrations: [ + // send console.log, console.warn, and console.error calls as logs to Sentry + Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }), + ], + // Enable logs to be sent to Sentry + enableLogs: true, + })), + // Add more middlewares here +];`, + }), +}); diff --git a/static/app/gettingStartedDocs/node/cloudflare-pages/mcp.tsx b/static/app/gettingStartedDocs/node/cloudflare-pages/mcp.tsx new file mode 100644 index 00000000000000..bdcdc12c8a9e55 --- /dev/null +++ b/static/app/gettingStartedDocs/node/cloudflare-pages/mcp.tsx @@ -0,0 +1,5 @@ +import {getNodeMcpOnboarding} from 'sentry/gettingStartedDocs/node/node/utils'; + +export const mcp = getNodeMcpOnboarding({ + packageName: '@sentry/cloudflare', +}); diff --git a/static/app/gettingStartedDocs/node/cloudflare-pages.spec.tsx b/static/app/gettingStartedDocs/node/cloudflare-pages/onboarding.spec.tsx similarity index 79% rename from static/app/gettingStartedDocs/node/cloudflare-pages.spec.tsx rename to static/app/gettingStartedDocs/node/cloudflare-pages/onboarding.spec.tsx index bc01319c65886c..af8b91310bbf76 100644 --- a/static/app/gettingStartedDocs/node/cloudflare-pages.spec.tsx +++ b/static/app/gettingStartedDocs/node/cloudflare-pages/onboarding.spec.tsx @@ -4,9 +4,9 @@ import {textWithMarkupMatcher} from 'sentry-test/utils'; import {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types'; -import docs from './cloudflare-pages'; +import docs from '.'; -describe('express onboarding docs', () => { +describe('cloudflare-pages onboarding docs', () => { it('renders onboarding docs correctly', () => { renderWithOnboardingLayout(docs); @@ -16,6 +16,7 @@ describe('express onboarding docs', () => { expect( screen.getByRole('heading', {name: /Upload Source Maps/i}) ).toBeInTheDocument(); + expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument(); // Includes import statement const allMatches = screen.getAllByText( @@ -31,7 +32,6 @@ describe('express onboarding docs', () => { selectedProducts: [ ProductSolution.ERROR_MONITORING, ProductSolution.PERFORMANCE_MONITORING, - ProductSolution.PROFILING, ], }); @@ -40,7 +40,7 @@ describe('express onboarding docs', () => { ).toBeInTheDocument(); }); - it('displays logs configuration when logs are selected', () => { + it('enables logs by setting enableLogs to true', () => { renderWithOnboardingLayout(docs, { selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.LOGS], }); @@ -50,33 +50,27 @@ describe('express onboarding docs', () => { ).toBeInTheDocument(); }); - it('shows Logging Integrations in next steps when logs is selected', () => { + it('does not enable logs when not selected', () => { renderWithOnboardingLayout(docs, { - selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.LOGS], + selectedProducts: [ProductSolution.ERROR_MONITORING], }); - expect(screen.getByText('Logging Integrations')).toBeInTheDocument(); + expect( + screen.queryByText(textWithMarkupMatcher(/enableLogs: true/)) + ).not.toBeInTheDocument(); }); - it('does not display logs configuration when logs are not selected', () => { + it('displays logs integration next step when logs are selected', () => { renderWithOnboardingLayout(docs, { - selectedProducts: [ - ProductSolution.ERROR_MONITORING, - ProductSolution.PERFORMANCE_MONITORING, - ], + selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.LOGS], }); - expect( - screen.queryByText(textWithMarkupMatcher(/enableLogs: true/)) - ).not.toBeInTheDocument(); + expect(screen.getByText('Logging Integrations')).toBeInTheDocument(); }); - it('does not show Logging Integrations in next steps when logs is not selected', () => { + it('does not display logs integration next step when logs are not selected', () => { renderWithOnboardingLayout(docs, { - selectedProducts: [ - ProductSolution.ERROR_MONITORING, - ProductSolution.PERFORMANCE_MONITORING, - ], + selectedProducts: [ProductSolution.ERROR_MONITORING], }); expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument(); @@ -105,4 +99,10 @@ describe('express onboarding docs', () => { ) ).not.toBeInTheDocument(); }); + + it('displays cloudflare features next step', () => { + renderWithOnboardingLayout(docs); + + expect(screen.getByText('Cloudflare Features')).toBeInTheDocument(); + }); }); diff --git a/static/app/gettingStartedDocs/node/cloudflare-pages.tsx b/static/app/gettingStartedDocs/node/cloudflare-pages/onboarding.tsx similarity index 71% rename from static/app/gettingStartedDocs/node/cloudflare-pages.tsx rename to static/app/gettingStartedDocs/node/cloudflare-pages/onboarding.tsx index 8626389ffd42df..038d672d503f1f 100644 --- a/static/app/gettingStartedDocs/node/cloudflare-pages.tsx +++ b/static/app/gettingStartedDocs/node/cloudflare-pages/onboarding.tsx @@ -1,25 +1,12 @@ import {ExternalLink} from 'sentry/components/core/link'; import type { - Docs, DocsParams, OnboardingConfig, } from 'sentry/components/onboarding/gettingStartedDoc/types'; import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils'; -import { - getCrashReportJavaScriptInstallSteps, - getCrashReportModalConfigDescription, - getCrashReportModalIntroduction, -} from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; +import {getInstallCodeBlock} from 'sentry/gettingStartedDocs/node/node/utils'; import {t, tct} from 'sentry/locale'; -import { - getInstallCodeBlock, - getNodeAgentMonitoringOnboarding, - getNodeLogsOnboarding, - getNodeMcpOnboarding, -} from 'sentry/utils/gettingStartedDocs/node'; - -type Params = DocsParams; const getSdkConfigureSnippetToml = () => ` compatibility_flags = ["nodejs_compat"] @@ -35,7 +22,7 @@ const getSdkConfigureSnippetJson = () => ` "compatibility_date": "2024-09-23" }`; -const getSdkSetupSnippet = (params: Params) => ` +const getSdkSetupSnippet = (params: DocsParams) => ` import * as Sentry from "@sentry/cloudflare"; export const onRequest = [ @@ -65,7 +52,7 @@ export const onRequest = [ // Add more middlewares here ];`; -const getVerifySnippet = (params: Params) => ` +const getVerifySnippet = (params: DocsParams) => ` export function onRequest(context) {${ params.isLogsSelected ? ` @@ -78,7 +65,7 @@ export function onRequest(context) {${ throw new Error(); }`; -const onboarding: OnboardingConfig = { +export const onboarding: OnboardingConfig = { introduction: () => tct( "In this quick guide, you'll set up and configure the Sentry Cloudflare SDK for use in your Cloudflare Pages application. This will enable Sentry for the backend part of your application: the functions. If you'd like to monitor the frontend as well, refer to the instrumentation guide for [platformLink:the framework of your choice].", @@ -111,7 +98,7 @@ const onboarding: OnboardingConfig = { { type: 'text', text: tct( - "To use the SDK, you'll need to set either the [code:nodejs_compat] or [code:nodejs_als] compatibility flags in your [code:wrangler.toml]. This is because the SDK needs access to the [code:AsyncLocalStorage] API to work correctly.", + "To use the SDK, you'll need to set either the [code:nodejs_compat] or [code:nodejs_als] compatibility flags in your [code:wrangler.json]/[code:wrangler.toml]. This is because the SDK needs access to the [code:AsyncLocalStorage] API to work correctly.", {code: } ), }, @@ -163,7 +150,7 @@ const onboarding: OnboardingConfig = { ...params, }), ], - verify: (params: Params) => [ + verify: (params: DocsParams) => [ { type: StepType.VERIFY, content: [ @@ -183,7 +170,7 @@ const onboarding: OnboardingConfig = { ], }, ], - nextSteps: (params: Params) => { + nextSteps: (params: DocsParams) => { const steps = [ { id: 'cloudflare-features', @@ -209,59 +196,3 @@ const onboarding: OnboardingConfig = { return steps; }, }; - -const crashReportOnboarding: OnboardingConfig = { - introduction: () => getCrashReportModalIntroduction(), - install: (params: Params) => getCrashReportJavaScriptInstallSteps(params), - configure: () => [ - { - type: StepType.CONFIGURE, - content: [ - { - type: 'text', - text: getCrashReportModalConfigDescription({ - link: 'https://docs.sentry.io/platforms/javascript/guides/cloudflare/user-feedback/configuration/#crash-report-modal', - }), - }, - ], - }, - ], - verify: () => [], - nextSteps: () => [], -}; - -const docs: Docs = { - onboarding, - crashReportOnboarding, - logsOnboarding: getNodeLogsOnboarding({ - docsPlatform: 'cloudflare', - packageName: '@sentry/cloudflare', - generateConfigureSnippet: (params, packageName) => ({ - type: 'code', - language: 'javascript', - code: `import * as Sentry from "${packageName}"; - -export const onRequest = [ - // Make sure Sentry is the first middleware - Sentry.sentryPagesPlugin((context) => ({ - dsn: "${params.dsn.public}", - integrations: [ - // send console.log, console.warn, and console.error calls as logs to Sentry - Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }), - ], - // Enable logs to be sent to Sentry - enableLogs: true, - })), - // Add more middlewares here -];`, - }), - }), - agentMonitoringOnboarding: getNodeAgentMonitoringOnboarding({ - packageName: '@sentry/cloudflare', - }), - mcpOnboarding: getNodeMcpOnboarding({ - packageName: '@sentry/cloudflare', - }), -}; - -export default docs;