ref(onboarding): Split cloudflare pages onboarding docs (#102656)

Contributes to
https://linear.app/getsentry/issue/TET-864/introduce-folders-for-onboarding-platforms

Author: priscilawebdev

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

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: () => [],
+};

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;

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

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

static/app/gettingStartedDocs/node/cloudflare-pages.spec.tsx renamed to 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();
+  });
 });

static/app/gettingStartedDocs/node/cloudflare-pages.tsx renamed to 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: <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;