ref: use new onboarding component (#75345)

Uses the new onboarding component that does not fetch onboarding from
the docs.

static/app/components/onboarding/gettingStartedDoc/utils/profilingOnboarding.tsx

@@ -0,0 +1,63 @@
+import type React from 'react';
+import {Fragment} from 'react';
+
+import {
+  type StepProps,
+  TabbedCodeSnippet,
+} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {t, tct} from 'sentry/locale';
+
+export function getProfilingDocumentHeaderConfigurationStep(): StepProps {
+  return {
+    title: 'Add Document-Policy: js-profiling header',
+    description: (
+      <Fragment>
+        <p>
+          {tct(
+            `For the JavaScript browser profiler to start, the document response header needs
+          to include a Document-Policy header key with the js-profiling value. How you do
+          this will depend on how your assets are served.
+
+          If you're using a server like Express, you'll be able to use the response.set function to set the header value.
+          `,
+            {}
+          )}
+        </p>
+        <TabbedCodeSnippet
+          tabs={[
+            {
+              code: `response.set('Document-Policy', 'js-profiling')`,
+              language: 'javascript',
+              value: 'javascript',
+              label: 'Express',
+            },
+          ]}
+        />
+      </Fragment>
+    ),
+  };
+}
+
+export function MaybeBrowserProfilingBetaWarning(
+  props: DocsParams<any>
+): React.ReactElement | null {
+  if (!props.isProfilingSelected) {
+    return null;
+  }
+
+  return (
+    <p>
+      {tct(
+        `Browser profiling is currently in Beta as we wait for the JS Self Profiling spec to gain wider support. You can read the detailed explanation [explainer].`,
+        {
+          explainer: (
+            <a href="https://docs.sentry.io/platforms/javascript/profiling/">
+              {t('here')}
+            </a>
+          ),
+        }
+      )}
+    </p>
+  );
+}

static/app/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted.tsx

@@ -35,12 +35,12 @@ export function useLoadGettingStarted({
   );
 
   const projectKeys = useProjectKeys({orgSlug, projSlug});
-
   const platformPath = getPlatformPath(platform);
 
   useEffect(() => {
     async function getGettingStartedDoc() {
       if (
+        !platformPath ||
         (productType === 'replay' && !replayPlatforms.includes(platform.id)) ||
         (productType === 'feedback' && !feedbackOnboardingPlatforms.includes(platform.id))
       ) {

static/app/components/profiling/ProfilingOnboarding/util.ts

@@ -1,118 +0,0 @@
-import partition from 'lodash/partition';
-
-import type {PlatformKey, Project} from 'sentry/types/project';
-import type {SupportedProfilingPlatformSDK} from 'sentry/utils/profiling/platforms';
-import {getDocsPlatformSDKForPlatform} from 'sentry/utils/profiling/platforms';
-
-export const profilingOnboardingDocKeys = [
-  '0-alert',
-  '1-install',
-  '2-configure-performance',
-  '3-configure-profiling',
-  '4-upload',
-] as const;
-
-export const browserProfilingOnboardingDocKeysWithDocumentPolicy = [
-  '1-install',
-  '2-configure-document-policy',
-  '3-configure',
-] as const;
-
-type ProfilingOnboardingDocKeys = (typeof profilingOnboardingDocKeys)[number];
-type BrowserProfilingOnboardingDocKeys =
-  (typeof browserProfilingOnboardingDocKeysWithDocumentPolicy)[number];
-
-export const supportedPlatformExpectedDocKeys: Record<
-  SupportedProfilingPlatformSDK,
-  ProfilingOnboardingDocKeys[] | BrowserProfilingOnboardingDocKeys[]
-> = {
-  android: ['1-install', '2-configure-performance', '3-configure-profiling', '4-upload'],
-  'apple-ios': [
-    '1-install',
-    '2-configure-performance',
-    '3-configure-profiling',
-    '4-upload',
-  ],
-  go: ['0-alert', '1-install', '2-configure-performance', '3-configure-profiling'],
-  node: ['1-install', '2-configure-performance', '3-configure-profiling'],
-  python: ['1-install', '2-configure-performance', '3-configure-profiling'],
-  php: ['1-install', '2-configure-performance', '3-configure-profiling'],
-  'php-laravel': ['1-install', '2-configure-performance', '3-configure-profiling'],
-  'php-symfony2': ['1-install', '2-configure-performance', '3-configure-profiling'],
-  ruby: ['0-alert', '1-install', '2-configure-performance', '3-configure-profiling'],
-  'javascript-nextjs': ['1-install', '2-configure-performance', '3-configure-profiling'],
-  'javascript-remix': ['1-install', '2-configure-performance', '3-configure-profiling'],
-  'javascript-sveltekit': [
-    '1-install',
-    '2-configure-performance',
-    '3-configure-profiling',
-  ],
-  javascript: ['1-install', '2-configure-document-policy', '3-configure'],
-  'javascript-react': ['1-install', '2-configure-document-policy', '3-configure'],
-  'javascript-angular': ['1-install', '2-configure-document-policy', '3-configure'],
-  'javascript-vue': ['1-install', '2-configure-document-policy', '3-configure'],
-  'react-native': [
-    '0-alert',
-    '1-install',
-    '2-configure-performance',
-    '3-configure-profiling',
-  ],
-  flutter: ['0-alert', '1-install', '2-configure-performance', '3-configure-profiling'],
-  'dart-flutter': [
-    '0-alert',
-    '1-install',
-    '2-configure-performance',
-    '3-configure-profiling',
-  ],
-};
-
-function makeDocKey(platformId: SupportedProfilingPlatformSDK, key: string) {
-  if (platformId === 'javascript-nextjs') {
-    return `node-javascript-nextjs-profiling-onboarding-${key}`;
-  }
-  if (platformId === 'javascript-remix') {
-    return `node-javascript-remix-profiling-onboarding-${key}`;
-  }
-  if (platformId === 'javascript-sveltekit') {
-    return `node-javascript-sveltekit-profiling-onboarding-${key}`;
-  }
-  return `${platformId}-profiling-onboarding-${key}`;
-}
-
-type DocKeyMap = Record<
-  (ProfilingOnboardingDocKeys | BrowserProfilingOnboardingDocKeys)[number],
-  string
->;
-export function makeDocKeyMap(platformId: PlatformKey | undefined) {
-  const docsPlatform = getDocsPlatformSDKForPlatform(platformId);
-
-  if (!platformId || !docsPlatform) {
-    return null;
-  }
-
-  const expectedDocKeys: (
-    | ProfilingOnboardingDocKeys
-    | BrowserProfilingOnboardingDocKeys
-  )[] = supportedPlatformExpectedDocKeys[docsPlatform];
-
-  if (!expectedDocKeys) {
-    return null;
-  }
-
-  return expectedDocKeys.reduce((acc: DocKeyMap, key) => {
-    acc[key] = makeDocKey(docsPlatform, key);
-    return acc;
-  }, {} as DocKeyMap);
-}
-
-export function splitProjectsByProfilingSupport(projects: Project[]): {
-  supported: Project[];
-  unsupported: Project[];
-} {
-  const [supported, unsupported] = partition(
-    projects,
-    project => project.platform && getDocsPlatformSDKForPlatform(project.platform)
-  );
-
-  return {supported, unsupported};
-}

static/app/components/profiling/ProfilingOnboarding/profilingOnboardingSidebar.tsx → static/app/components/profiling/profilingOnboardingSidebar.tsx

@@ -1,47 +1,62 @@
-import {useEffect, useMemo, useState} from 'react';
+import {Fragment, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
+import partition from 'lodash/partition';
 
-import {Button} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import IdBadge from 'sentry/components/idBadge';
+import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import useOnboardingDocs from 'sentry/components/onboardingWizard/useOnboardingDocs';
-import {
-  DocumentationWrapper,
-  OnboardingStep,
-} from 'sentry/components/sidebar/onboardingStep';
-import {
-  EventIndicator,
-  TaskSidebar,
-  TaskSidebarList,
-} from 'sentry/components/sidebar/taskSidebar';
+import {Step} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {useLoadGettingStarted} from 'sentry/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted';
+import {ProductSolution} from 'sentry/components/onboarding/productSelection';
+import {TaskSidebar} from 'sentry/components/sidebar/taskSidebar';
 import type {CommonSidebarProps} from 'sentry/components/sidebar/types';
 import {SidebarPanelKey} from 'sentry/components/sidebar/types';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import platforms from 'sentry/data/platforms';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Project, SelectValue} from 'sentry/types';
+import type {SelectValue} from 'sentry/types/core';
+import type {Organization} from 'sentry/types/organization';
+import type {PlatformIntegration, Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import EventWaiter from 'sentry/utils/eventWaiter';
-import useApi from 'sentry/utils/useApi';
+import {getDocsPlatformSDKForPlatform} from 'sentry/utils/profiling/platforms';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import usePrevious from 'sentry/utils/usePrevious';
 import useProjects from 'sentry/utils/useProjects';
 
-import {makeDocKeyMap, splitProjectsByProfilingSupport} from './util';
+function splitProjectsByProfilingSupport(projects: Project[]): {
+  supported: Project[];
+  unsupported: Project[];
+} {
+  const [supported, unsupported] = partition(
+    projects,
+    project => project.platform && getDocsPlatformSDKForPlatform(project.platform)
+  );
+
+  return {supported, unsupported};
+}
+
+const PROFILING_ONBOARDING_STEPS = [
+  ProductSolution.PERFORMANCE_MONITORING,
+  ProductSolution.PROFILING,
+];
 
 export function ProfilingOnboardingSidebar(props: CommonSidebarProps) {
-  const {currentPanel, collapsed, hidePanel, orientation} = props;
-  const isActive = currentPanel === SidebarPanelKey.PROFILING_ONBOARDING;
-  const organization = useOrganization();
-  const hasProjectAccess = organization.access.includes('project:read');
+  if (props.currentPanel !== SidebarPanelKey.PROFILING_ONBOARDING) {
+    return null;
+  }
+
+  return <ProfilingOnboarding {...props} />;
+}
 
+function ProfilingOnboarding(props: CommonSidebarProps) {
+  const pageFilters = usePageFilters();
+  const organization = useOrganization();
   const {projects} = useProjects();
 
   const [currentProject, setCurrentProject] = useState<Project | undefined>();
-  const pageFilters = usePageFilters();
 
   const {supported: supportedProjects, unsupported: unsupportedProjects} = useMemo(
     () => splitProjectsByProfilingSupport(projects),
@@ -49,6 +64,8 @@ export function ProfilingOnboardingSidebar(props: CommonSidebarProps) {
   );
 
   useEffect(() => {
+    if (currentProject) return;
+
     // we'll only ever select an unsupportedProject if they do not have a supported project in their organization
     if (supportedProjects.length === 0 && unsupportedProjects.length > 0) {
       if (pageFilters.selection.projects[0] === ALL_ACCESS_PROJECTS) {
@@ -87,8 +104,8 @@ export function ProfilingOnboardingSidebar(props: CommonSidebarProps) {
       }
     }
   }, [
-    pageFilters.selection.projects,
     currentProject,
+    pageFilters.selection.projects,
     supportedProjects,
     unsupportedProjects,
   ]);
@@ -130,23 +147,23 @@ export function ProfilingOnboardingSidebar(props: CommonSidebarProps) {
     ];
   }, [supportedProjects, unsupportedProjects]);
 
-  if (!isActive || !hasProjectAccess) {
-    return null;
-  }
+  const currentPlatform = currentProject?.platform
+    ? platforms.find(p => p.id === currentProject.platform)
+    : undefined;
 
   return (
     <TaskSidebar
-      orientation={orientation}
-      collapsed={collapsed}
+      orientation={props.orientation}
+      collapsed={props.collapsed}
       hidePanel={() => {
         trackAnalytics('profiling_views.onboarding_action', {
           organization,
           action: 'dismissed',
         });
-        hidePanel();
+        props.hidePanel();
       }}
     >
-      <TaskSidebarList>
+      <Content>
         <Heading>{t('Profile Code')}</Heading>
         <div
           onClick={e => {
@@ -177,178 +194,125 @@ export function ProfilingOnboardingSidebar(props: CommonSidebarProps) {
             position="bottom-end"
           />
         </div>
-        {currentProject && (
-          <OnboardingContent
-            currentProject={currentProject}
-            isSupported={supportedProjects.includes(currentProject)}
+        {currentProject && currentPlatform ? (
+          <ProfilingOnboardingContent
+            activeProductSelection={PROFILING_ONBOARDING_STEPS}
+            organization={organization}
+            platform={currentPlatform}
+            projectId={currentProject.id}
+            projectSlug={currentProject.slug}
           />
-        )}
-      </TaskSidebarList>
+        ) : null}
+      </Content>
     </TaskSidebar>
   );
 }
 
-function OnboardingContent({
-  currentProject,
-  isSupported,
-}: {
-  currentProject: Project;
-  isSupported: boolean;
-}) {
-  const currentPlatform = platforms.find(p => p.id === currentProject?.platform);
-  const api = useApi();
-  const organization = useOrganization();
-  const [received, setReceived] = useState(false);
-  const previousProject = usePrevious(currentProject);
-  useEffect(() => {
-    if (!currentProject || !previousProject) {
-      return;
-    }
-    if (previousProject.id !== currentProject.id) {
-      setReceived(false);
-    }
-  }, [currentProject, previousProject]);
-
-  const docKeysMap = useMemo(() => makeDocKeyMap(currentPlatform?.id), [currentPlatform]);
-  const docKeys = useMemo(
-    () => (docKeysMap ? Object.values(docKeysMap) : []),
-    [docKeysMap]
-  );
+interface ProfilingOnboardingContentProps {
+  activeProductSelection: ProductSolution[];
+  organization: Organization;
+  platform: PlatformIntegration;
+  projectId: Project['id'];
+  projectSlug: Project['slug'];
+}
 
-  const {docContents, isLoading, hasOnboardingContents} = useOnboardingDocs({
-    docKeys,
-    project: currentProject,
-    isPlatformSupported: isSupported,
+function ProfilingOnboardingContent(props: ProfilingOnboardingContentProps) {
+  const {isLoading, isError, dsn, cdn, docs, refetch} = useLoadGettingStarted({
+    orgSlug: props.organization.slug,
+    projSlug: props.projectSlug,
+    platform: props.platform,
   });
 
   if (isLoading) {
     return <LoadingIndicator />;
   }
 
-  if (!currentPlatform) {
+  if (isError) {
     return (
-      <ContentContainer>
-        <p>
-          {t(
-            `Your project's platform has not been set. Please select your project's platform before proceeding.`
-          )}
-        </p>
-        <Button
-          size="sm"
-          to={`/settings/${organization.slug}/projects/${currentProject.slug}/`}
-        >
-          {t('Go to Project Settings')}
-        </Button>
-      </ContentContainer>
+      <LoadingError
+        message={t(
+          'We encountered an issue while loading the getting started documentation for this platform.'
+        )}
+      />
     );
   }
 
-  if (!isSupported) {
-    // this content will only be presented if the org only has one project and its not supported
-    // in these scenarios we will auto-select the unsupported project and render this message
+  if (!docs) {
     return (
-      <ContentContainer>
-        <p>
-          {tct(
-            'Fiddlesticks. Profiling isn’t available for your [platform] project yet. Reach out to us on Discord for more information.',
-            {platform: currentPlatform?.name || currentProject.slug}
-          )}
-        </p>
-        <Button size="sm" href="https://discord.gg/zrMjKA4Vnz" external>
-          {t('Join Discord')}
-        </Button>
-      </ContentContainer>
+      <LoadingError
+        message={t(
+          'The getting started documentation for this platform is currently unavailable.'
+        )}
+      />
     );
   }
 
-  if (!docKeysMap || !hasOnboardingContents) {
+  if (!dsn) {
     return (
-      <ContentContainer>
-        <p>
-          {tct(
-            'Fiddlesticks. This checklist isn’t available for your [project] project yet, but for now, go to Sentry docs for installation details.',
-            {project: currentProject.slug}
-          )}
-        </p>
-        <Button
-          size="sm"
-          href="https://docs.sentry.io/product/profiling/getting-started/"
-          external
-        >
-          {t('Go to documentation')}
-        </Button>
-      </ContentContainer>
+      <LoadingError
+        message={t(
+          'We encountered an issue while loading the DSN for this getting started documentation.'
+        )}
+        onRetry={refetch}
+      />
     );
   }
 
-  const alertContent = docContents[docKeysMap['0-alert']];
+  const docParams: DocsParams<any> = {
+    cdn,
+    dsn,
+    organization: props.organization,
+    platformKey: props.platform.id,
+    projectId: props.projectId,
+    projectSlug: props.projectSlug,
+    isFeedbackSelected: false,
+    isPerformanceSelected: true,
+    isProfilingSelected: true,
+    isReplaySelected: false,
+    sourcePackageRegistries: {
+      isLoading: false,
+      data: undefined,
+    },
+    platformOptions: PROFILING_ONBOARDING_STEPS,
+    newOrg: false,
+    feedbackOptions: {},
+  };
+
+  const steps = [
+    ...docs.onboarding.install(docParams),
+    ...docs.onboarding.configure(docParams),
+  ];
 
   return (
-    <ContentContainer>
-      {alertContent && (
-        <DocumentationWrapper dangerouslySetInnerHTML={{__html: alertContent}} />
+    <Fragment>
+      {docs.onboarding.introduction && (
+        <Introduction>{docs.onboarding.introduction(docParams)}</Introduction>
       )}
-      <p>
-        {t(
-          `Adding Profiling to your %s project is simple. Make sure you've got these basics down.`,
-          currentPlatform!.name
-        )}
-      </p>
-      {Object.entries(docKeysMap).map(entry => {
-        const [key, docKey] = entry;
-        if (key === '0-alert') {
-          return null;
-        }
-
-        const content = docContents[docKey];
-        if (!content) {
-          return null;
-        }
-        return (
-          <div key={docKey}>
-            <OnboardingStep
-              prefix="profiling"
-              docKey={docKey}
-              project={currentProject}
-              docContent={content}
-            />
-          </div>
-        );
-      })}
-      <EventWaiter
-        api={api}
-        organization={organization}
-        project={currentProject}
-        eventType="profile"
-        onIssueReceived={() => {
-          trackAnalytics('profiling_views.onboarding_action', {
-            organization,
-            action: 'done',
-          });
-          setReceived(true);
-        }}
-      >
-        {() => (received ? <EventReceivedIndicator /> : <EventWaitingIndicator />)}
-      </EventWaiter>
-    </ContentContainer>
+      <Steps>
+        {steps.map(step => {
+          return <Step key={step.title ?? step.type} {...step} />;
+        })}
+      </Steps>
+    </Fragment>
   );
 }
 
-function EventReceivedIndicator() {
-  return (
-    <EventIndicator status="received">
-      {t("We've received this project's first profile!")}
-    </EventIndicator>
-  );
-}
+const Steps = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
 
-function EventWaitingIndicator() {
-  return (
-    <EventIndicator status="waiting">
-      {t("Waiting for this project's first profile.")}
-    </EventIndicator>
-  );
-}
+const Introduction = styled('div')`
+  display: flex;
+  flex-direction: column;
+  margin-top: ${space(2)};
+  margin-bottom: ${space(2)};
+`;
+
+const Content = styled('div')`
+  padding: ${space(2)};
+`;
 
 const Heading = styled('div')`
   display: flex;
@@ -365,7 +329,3 @@ const StyledIdBadge = styled(IdBadge)`
   white-space: nowrap;
   flex-shrink: 1;
 `;
-
-const ContentContainer = styled('div')`
-  margin: ${space(2)} 0;
-`;

static/app/components/sidebar/index.tsx

@@ -56,7 +56,7 @@ import {MODULE_SIDEBAR_TITLE as HTTP_MODULE_SIDEBAR_TITLE} from 'sentry/views/in
 import {MODULE_TITLES} from 'sentry/views/insights/settings';
 import MetricsOnboardingSidebar from 'sentry/views/metrics/ddmOnboarding/sidebar';
 
-import {ProfilingOnboardingSidebar} from '../profiling/ProfilingOnboarding/profilingOnboardingSidebar';
+import {ProfilingOnboardingSidebar} from '../profiling/profilingOnboardingSidebar';
 
 import Broadcasts from './broadcasts';
 import SidebarHelp from './help';

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -16,6 +16,10 @@ import {
   getFeedbackConfigureDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {
+  getProfilingDocumentHeaderConfigurationStep,
+  MaybeBrowserProfilingBetaWarning,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding';
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
@@ -76,6 +80,7 @@ const getInstallConfig = () => [
 ];
 
 const onboarding: OnboardingConfig = {
+  introduction: MaybeBrowserProfilingBetaWarning,
   install: () => [
     {
       type: StepType.INSTALL,
@@ -131,6 +136,9 @@ const onboarding: OnboardingConfig = {
     })
     export class AppModule {}`,
         },
+        ...(params.isProfilingSelected
+          ? [getProfilingDocumentHeaderConfigurationStep()]
+          : []),
       ],
     },
     getUploadSourceMapsStep({

static/app/gettingStartedDocs/javascript/astro.tsx

@@ -18,6 +18,7 @@ import {
   getFeedbackSDKSetupSnippet,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding';
 import {getReplaySDKSetupSnippet} from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
@@ -355,7 +356,7 @@ const feedbackOnboarding: OnboardingConfig = {
 const crashReportOnboarding: OnboardingConfig = {
   introduction: () => getCrashReportModalIntroduction(),
   install: (params: Params) => getCrashReportJavaScriptInstallStep(params),
-  configure: () => [
+  configure: params => [
     {
       type: StepType.CONFIGURE,
       description: getCrashReportModalConfigDescription({
@@ -364,6 +365,9 @@ const crashReportOnboarding: OnboardingConfig = {
       additionalInfo: widgetCallout({
         link: 'https://docs.sentry.io/platforms/javascript/guides/astro/user-feedback/#user-feedback-widget',
       }),
+      ...(params.isProfilingSelected
+        ? [getProfilingDocumentHeaderConfigurationStep()]
+        : []),
     },
   ],
   verify: () => [],

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -16,6 +16,10 @@ import {
   getFeedbackConfigureDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {
+  getProfilingDocumentHeaderConfigurationStep,
+  MaybeBrowserProfilingBetaWarning,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding';
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
@@ -102,6 +106,7 @@ const getVerifyEmberSnippet = () => `
 myUndefinedFunction();`;
 
 const onboarding: OnboardingConfig = {
+  introduction: MaybeBrowserProfilingBetaWarning,
   install: () => [
     {
       type: StepType.INSTALL,
@@ -132,6 +137,9 @@ const onboarding: OnboardingConfig = {
             },
           ],
         },
+        ...(params.isProfilingSelected
+          ? [getProfilingDocumentHeaderConfigurationStep()]
+          : []),
       ],
     },
     getUploadSourceMapsStep({

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -18,6 +18,10 @@ import {
   getFeedbackConfigureDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {
+  getProfilingDocumentHeaderConfigurationStep,
+  MaybeBrowserProfilingBetaWarning,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding';
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
@@ -126,6 +130,9 @@ const getConfigureStep = (params: Params) => {
           },
         ],
       },
+      ...(params.isProfilingSelected
+        ? [getProfilingDocumentHeaderConfigurationStep()]
+        : []),
     ],
   };
 };
@@ -151,6 +158,7 @@ const getInstallConfig = () => [
 ];
 
 const onboarding: OnboardingConfig = {
+  introduction: MaybeBrowserProfilingBetaWarning,
   install: () => [
     {
       type: StepType.INSTALL,

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -16,6 +16,10 @@ import {
   getFeedbackConfigureDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
+import {
+  getProfilingDocumentHeaderConfigurationStep,
+  MaybeBrowserProfilingBetaWarning,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding';
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
@@ -107,6 +111,7 @@ const getInstallConfig = () => [
 ];
 
 const onboarding: OnboardingConfig = {
+  introduction: MaybeBrowserProfilingBetaWarning,
   install: () => [
     {
       type: StepType.INSTALL,
@@ -133,6 +138,9 @@ const onboarding: OnboardingConfig = {
             },
           ],
         },
+        ...(params.isProfilingSelected
+          ? [getProfilingDocumentHeaderConfigurationStep()]
+          : []),
       ],
     },
     getUploadSourceMapsStep({