feat: add reverse proxy step to onboarding for feature flags

frontend/src/lib/constants.tsx

@@ -210,6 +210,7 @@ export const FEATURE_FLAGS = {
     REPLAY_ERROR_CLUSTERING: 'session-replay-error-clustering', // owner: #team-replay
     AUDIT_LOGS_ACCESS: 'audit-logs-access', // owner: #team-growth
     SUBSCRIBE_FROM_PAYGATE: 'subscribe-from-paygate', // owner: #team-growth
+    REVERSE_PROXY_ONBOARDING: 'reverse-proxy-onboarding', // owner: @zlwaterfield
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/scenes/onboarding/Onboarding.tsx

@@ -13,6 +13,7 @@ import { onboardingLogic, OnboardingStepKey } from './onboardingLogic'
 import { OnboardingProductConfiguration } from './OnboardingProductConfiguration'
 import { ProductConfigOption } from './onboardingProductConfigurationLogic'
 import { OnboardingProductIntroduction } from './OnboardingProductIntroduction'
+import { OnboardingReverseProxy } from './OnboardingReverseProxy'
 import { FeatureFlagsSDKInstructions } from './sdks/feature-flags/FeatureFlagsSDKInstructions'
 import { ProductAnalyticsSDKInstructions } from './sdks/product-analytics/ProductAnalyticsSDKInstructions'
 import { SDKs } from './sdks/SDKs'
@@ -28,7 +29,8 @@ export const scene: SceneExport = {
  * Wrapper for custom onboarding content. This automatically includes billing, other products, and invite steps.
  */
 const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Element => {
-    const { currentOnboardingStep, shouldShowBillingStep, product, includeIntro } = useValues(onboardingLogic)
+    const { currentOnboardingStep, shouldShowBillingStep, shouldShowReverseProxyStep, product, includeIntro } =
+        useValues(onboardingLogic)
     const { setAllOnboardingSteps } = useActions(onboardingLogic)
     const [allSteps, setAllSteps] = useState<JSX.Element[]>([])
 
@@ -58,6 +60,10 @@ const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Ele
             const IntroStep = <OnboardingProductIntroduction stepKey={OnboardingStepKey.PRODUCT_INTRO} />
             steps = [IntroStep, ...steps]
         }
+        if (shouldShowReverseProxyStep) {
+            const ReverseProxyStep = <OnboardingReverseProxy stepKey={OnboardingStepKey.REVERSE_PROXY} />
+            steps = [...steps, ReverseProxyStep]
+        }
         if (shouldShowBillingStep) {
             const BillingStep = <OnboardingBillingStep product={product} stepKey={OnboardingStepKey.PLANS} />
             steps = [...steps, BillingStep]

frontend/src/scenes/onboarding/OnboardingReverseProxy.tsx

@@ -0,0 +1,87 @@
+import { LemonDivider, Link } from '@posthog/lemon-ui'
+
+import { InviteMembersButton } from '~/layout/navigation/TopBar/AccountPopover'
+
+import { OnboardingStepKey } from './onboardingLogic'
+import { OnboardingStep } from './OnboardingStep'
+
+const proxyDocs = [
+    {
+        title: 'AWS CloudFront',
+        link: 'https://posthog.com/docs/advanced/proxy/cloudfront',
+    },
+    {
+        title: 'Caddy',
+        link: 'https://posthog.com/docs/advanced/proxy/caddy',
+    },
+    {
+        title: 'Cloudflare',
+        link: 'https://posthog.com/docs/advanced/proxy/cloudflare',
+    },
+    {
+        title: 'Kubernetes Ingress Controller',
+        link: 'https://posthog.com/docs/advanced/proxy/kubernetes-ingress-controller',
+    },
+    {
+        title: 'Netlify',
+        link: 'https://posthog.com/docs/advanced/proxy/netlify',
+    },
+    {
+        title: 'Next.js rewrites',
+        link: 'https://posthog.com/docs/advanced/proxy/nextjs',
+    },
+    {
+        title: 'Next.js middleware',
+        link: 'https://posthog.com/docs/advanced/proxy/nextjs-middleware',
+    },
+    {
+        title: 'Vercel',
+        link: 'https://posthog.com/docs/advanced/proxy/vercel',
+    },
+    {
+        title: 'Nuxt',
+        link: 'https://posthog.com/docs/advanced/proxy/nuxt',
+    },
+]
+
+export const OnboardingReverseProxy = ({ stepKey }: { stepKey: OnboardingStepKey }): JSX.Element => {
+    return (
+        <OnboardingStep
+            title="Reverse proxy (optional)"
+            stepKey={stepKey}
+            continueText="I've already done this"
+            showSkip
+        >
+            <div className="mb-6 mt-6">
+                <p>A reverse proxy allows you to send events to PostHog Cloud using your own domain.</p>
+                <p>
+                    This means that events are sent from your own domain and are less likely to be intercepted by
+                    tracking blockers. You'll be able to capture more usage data without having to self-host PostHog.
+                </p>
+                <p>
+                    Setting up a reverse proxy means setting up a service to redirect requests from a subdomain you
+                    choose (like <span className="font-mono break-keep">e.yourdomain.com</span>) to PostHog. It is best
+                    practice to use a subdomain that does not include posthog, analytics, tracking, or other similar
+                    words.
+                </p>
+                <h3>Documentation</h3>
+                <p>Here are some popular reverse proxy options:</p>
+                <ul className="list-disc list-inside ml-2">
+                    {proxyDocs.map(({ title, link }) => (
+                        <li key={title}>
+                            <Link to={link} target="_blank">
+                                {title}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+                <LemonDivider className="my-6" />
+                <h3>Need help with this step?</h3>
+                <p>Invite a team member to help you get set up.</p>
+                <div className="mt-3 w-40">
+                    <InviteMembersButton type="secondary" />
+                </div>
+            </div>
+        </OnboardingStep>
+    )
+}

frontend/src/scenes/onboarding/OnboardingStep.tsx

@@ -16,6 +16,7 @@ export const OnboardingStep = ({
     showHelpButton = false,
     onSkip,
     continueAction,
+    continueText,
     continueOverride,
     hideHeader,
 }: {
@@ -27,6 +28,7 @@ export const OnboardingStep = ({
     showHelpButton?: boolean
     onSkip?: () => void
     continueAction?: () => void
+    continueText?: string
     continueOverride?: JSX.Element
     hideHeader?: boolean
 }): JSX.Element => {
@@ -112,7 +114,7 @@ export const OnboardingStep = ({
                             }}
                             sideIcon={hasNextStep ? <IconArrowRight /> : null}
                         >
-                            {!hasNextStep ? 'Finish' : 'Next'}
+                            {continueText ? continueText : !hasNextStep ? 'Finish' : 'Next'}
                         </LemonButton>
                     )}
                 </div>

frontend/src/scenes/onboarding/onboardingLogic.tsx

@@ -24,6 +24,7 @@ export enum OnboardingStepKey {
     PLANS = 'plans',
     VERIFY = 'verify',
     PRODUCT_CONFIGURATION = 'configure',
+    REVERSE_PROXY = 'proxy',
     INVITE_TEAMMATES = 'invite_teammates',
 }
 
@@ -212,6 +213,16 @@ export const onboardingLogic = kea<onboardingLogicType>([
                 return !product?.subscribed || !hasAllAddons || subscribedDuringOnboarding
             },
         ],
+        shouldShowReverseProxyStep: [
+            (s) => [s.product, s.featureFlags],
+            (product: BillingProductV2Type | null, featureFlags: FeatureFlagsSet) => {
+                const productsWithReverseProxy = []
+                if (featureFlags[FEATURE_FLAGS.REVERSE_PROXY_ONBOARDING] === 'test') {
+                    productsWithReverseProxy.push(ProductKey.FEATURE_FLAGS)
+                }
+                return productsWithReverseProxy.includes(product?.type as ProductKey)
+            },
+        ],
         isStepKeyInvalid: [
             (s) => [s.stepKey, s.allOnboardingSteps, s.currentOnboardingStep],
             (stepKey: string, allOnboardingSteps: AllOnboardingSteps, currentOnboardingStep: React.ReactNode | null) =>