feat: event tracking happy path

Author: comatory

cli/src/commands/demo/command.ts

@@ -117,6 +117,14 @@ async function cleanupFederatedGraph(
     );
   }
 
+  captureOnboardingEvent({
+    name: 'onboarding_step_completed',
+    properties: {
+      step_name: 'delete_federated_graph',
+      entry_source: 'wgc',
+    },
+  });
+
   spinner.succeed(`Federated graph ${pc.bold(graphData.graph.name)} removed.`);
 }
 
@@ -265,7 +273,10 @@ async function handleStep3(
     logPath: string;
   },
 ) {
+  let firedQueries = 0;
+
   function retryFn() {
+    firedQueries = 0;
     resetScreen(userInfo);
     return handleStep3(opts, { userInfo, routerBaseUrl, signal, logPath });
   }
@@ -316,6 +327,18 @@ async function handleStep3(
       const body = await res.json();
       querySpinner.succeed('Sample query response:');
       console.log(pc.dim(JSON.stringify(body, null, 2)));
+
+      if (firedQueries === 0) {
+        captureOnboardingEvent({
+          name: 'onboarding_step_completed',
+          properties: {
+            step_name: 'run_router_send_metrics',
+            entry_source: 'wgc',
+          },
+        });
+      }
+
+      firedQueries++;
     } catch (err) {
       querySpinner.fail(`Sample query failed: ${err instanceof Error ? err.message : String(err)}`);
     }
@@ -405,10 +428,12 @@ export default function (opts: BaseCommandOptions) {
       const userInfo = await getUserInfo(opts.client);
       updateScreenWithUserInfo(userInfo);
 
-      const onboardingUrl = `${config.webURL}/onboarding`;
+      const onboardingUrl = new URL('/onboarding', config.webURL);
 
       async function openOnboardingUrl() {
-        const process = await open(onboardingUrl);
+        const browserUrl = new URL(onboardingUrl);
+        browserUrl.searchParams.set('referrer', 'wgc');
+        const process = await open(browserUrl.toString());
         process.on('error', (error) => {
           console.log(pc.yellow(`\nCouldn't open browser: ${error.message}`));
         });
@@ -425,12 +450,28 @@ export default function (opts: BaseCommandOptions) {
 
       resetScreen(userInfo);
 
+      captureOnboardingEvent({
+        name: 'onboarding_step_completed',
+        properties: {
+          step_name: 'init',
+          entry_source: 'wgc',
+        },
+      });
+
       const onboardingCheck = await handleStep1(opts, userInfo);
 
       if (!onboardingCheck) {
         return;
       }
 
+      captureOnboardingEvent({
+        name: 'onboarding_step_completed',
+        properties: {
+          step_name: 'check_onboarding',
+          entry_source: 'wgc',
+        },
+      });
+
       const logPath = getDemoLogPath();
 
       const step2Result = await handleStep2(opts, {
@@ -445,6 +486,14 @@ export default function (opts: BaseCommandOptions) {
         return;
       }
 
+      captureOnboardingEvent({
+        name: 'onboarding_step_completed',
+        properties: {
+          step_name: 'create_federated_graph',
+          entry_source: 'wgc',
+        },
+      });
+
       const routerBaseUrl = new URL(step2Result.routingUrl).origin;
       await handleStep3(opts, { userInfo, routerBaseUrl, signal: controller.signal, logPath });
     } finally {

cli/src/commands/demo/util.ts

@@ -7,6 +7,7 @@ import ora from 'ora';
 import pc from 'picocolors';
 import { z } from 'zod';
 import { config, cacheDir } from '../../core/config.js';
+import { capture } from '../../core/telemetry.js';
 import { getDefaultPlatforms, publishPluginPipeline, readPluginFiles } from '../../core/plugin-publish.js';
 import type { BaseCommandOptions } from '../../core/types/types.js';
 import { visibleLength } from '../../utils.js';
@@ -512,3 +513,21 @@ export async function publishAllPlugins({
 
   return { error: null };
 }
+
+export function captureOnboardingEvent({
+  name,
+  properties,
+}: {
+  name: 'onboarding_step_completed';
+  properties: {
+    step_name:
+      | 'init'
+      | 'check_onboarding'
+      | 'create_federated_graph'
+      | 'delete_federated_graph'
+      | 'run_router_send_metrics';
+    entry_source: 'wgc';
+  };
+}): void {
+  capture(name, properties);
+}

studio/src/components/onboarding/onboarding-provider.tsx

@@ -40,7 +40,7 @@ export const OnboardingContext = createContext<OnboardingState>({
   resetSkipped: () => undefined,
 });
 
-const ONBOARDING_V1_LAST_STEP = 4;
+const ONBOARDING_V1_LAST_STEP = 3;
 
 export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
   const { onboarding: onboardingFlag, status: featureFlagStatus } = useContext(PostHogFeatureFlagContext);

studio/src/components/onboarding/step-1.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { usePostHog } from 'posthog-js/react';
 import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 import { useMutation } from '@connectrpc/connect-query';
@@ -8,6 +9,7 @@ import { useRouter } from 'next/router';
 import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
 import { useToast } from '../ui/use-toast';
 import { SubmitHandler, useZodForm } from '@/hooks/use-form';
+import { captureOnboardingEvent } from '@/lib/track';
 import { Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { Form } from '../ui/form';
@@ -33,10 +35,21 @@ const WhyListItem = ({ title, text }: { title: string; text: string }) => (
   </li>
 );
 
+const normalizeReferrer = (referrer: string | string[]): string => {
+  if (Array.isArray(referrer)) {
+    return referrer.join(' ');
+  }
+
+  return referrer;
+};
+
 export const Step1 = () => {
   const router = useRouter();
+  const posthog = usePostHog();
   const { toast } = useToast();
   const { setStep, setSkipped, setOnboarding, onboarding } = useOnboarding();
+  // Referrer can be `wgc` when onboarding is opened via `wgc demo` command
+  const referrer = normalizeReferrer(router.query.referrer || document.referrer);
 
   const form = useZodForm<OnboardingFormValues>({
     mode: 'onChange',
@@ -63,6 +76,15 @@ export const Step1 = () => {
         slack: formValues.channels.slack,
         email: formValues.channels.email,
       });
+      captureOnboardingEvent(posthog, {
+        name: 'onboarding_step_completed',
+        options: {
+          step_name: 'welcome',
+          channel: (Object.keys(formValues.channels) as Array<keyof typeof formValues.channels>).filter(
+            (key) => formValues.channels[key],
+          ),
+        },
+      });
       router.push('/onboarding/2');
     },
     onError: (error) => {
@@ -82,7 +104,21 @@ export const Step1 = () => {
 
   useEffect(() => {
     setStep(1);
-  }, [setStep]);
+  }, [setStep, posthog, referrer]);
+
+  useEffect(() => {
+    // We want to trigger the onboarding only for the first time when the onboarding record
+    // does not exist in the database yet. Users can navigate to this first step as well
+    // and in that case we want to ignore it.
+    if (onboarding) return;
+
+    captureOnboardingEvent(posthog, {
+      name: 'onboarding_started',
+      options: {
+        entry_source: referrer,
+      },
+    });
+  }, [onboarding, referrer, posthog]);
 
   return (
     <OnboardingContainer>
@@ -151,7 +187,15 @@ export const Step1 = () => {
       </div>
 
       <OnboardingNavigation
-        onSkip={setSkipped}
+        onSkip={() => {
+          captureOnboardingEvent(posthog, {
+            name: 'onboarding_skipped',
+            options: {
+              step_name: 'welcome',
+            },
+          });
+          setSkipped();
+        }}
         forwardLabel="Start the tour"
         forward={{
           onClick: form.handleSubmit(onSubmit),

studio/src/components/onboarding/step-2.tsx

@@ -5,7 +5,9 @@ import { getFederatedGraphByName } from '@wundergraph/cosmo-connect/dist/platfor
 import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
 import { GetFederatedGraphByNameResponse } from '@wundergraph/cosmo-connect/dist/platform/v1/platform_pb';
 import { CheckCircledIcon, InfoCircledIcon } from '@radix-ui/react-icons';
+import { usePostHog } from 'posthog-js/react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { captureOnboardingEvent } from '@/lib/track';
 import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 import { FederationAnimation } from './federation-animation';
@@ -115,6 +117,7 @@ const StatusText = ({ status, onRetry }: { status: 'pending' | 'ok' | 'fail' | '
 export const Step2 = () => {
   const { setStep, setSkipped } = useOnboarding();
   const router = useRouter();
+  const posthog = usePostHog();
   const [polling, dispatch] = useReducer(pollingReducer, { active: true, epoch: 0 });
 
   const restartPolling = useCallback(() => dispatch({ type: 'RESTART' }), []);
@@ -214,10 +217,26 @@ export const Step2 = () => {
 
       <OnboardingNavigation
         className="pt-2"
-        onSkip={setSkipped}
+        onSkip={() => {
+          captureOnboardingEvent(posthog, {
+            name: 'onboarding_skipped',
+            options: {
+              step_name: 'create_graph',
+            },
+          });
+          setSkipped();
+        }}
         backHref="/onboarding/1"
         forward={{
-          onClick: () => router.push('/onboarding/3'),
+          onClick: () => {
+            captureOnboardingEvent(posthog, {
+              name: 'onboarding_step_completed',
+              options: {
+                step_name: 'create_graph',
+              },
+            });
+            router.push('/onboarding/3');
+          },
           disabled: status !== 'ok',
         }}
       />

studio/src/components/onboarding/step-3.tsx

@@ -2,6 +2,8 @@ import { motion } from 'framer-motion';
 import { useEffect, useMemo, useReducer, useState } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
 import { useFireworks } from '@/hooks/use-fireworks';
+import { usePostHog } from 'posthog-js/react';
+import { captureOnboardingEvent } from '@/lib/track';
 import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 import { StatusIcon, type OnboardingStatus } from './status-icon';
@@ -124,6 +126,7 @@ export const Step3 = () => {
   const { toast } = useToast();
   const { setStep, setSkipped, setOnboarding } = useOnboarding();
   const currentOrg = useCurrentOrganization();
+  const posthog = usePostHog();
 
   const [polling, dispatch] = useReducer(pollingReducer, {
     routerTimedOut: false,
@@ -212,6 +215,12 @@ export const Step3 = () => {
         email: Boolean(prev?.email),
       }));
 
+      captureOnboardingEvent(posthog, {
+        name: 'onboarding_completed',
+        options: {
+          step_name: 'run_router_send_metrics',
+        },
+      });
       setIsFinished(true);
     },
     onError: (error) => {
@@ -358,7 +367,15 @@ export const Step3 = () => {
 
             <OnboardingNavigation
               className="pt-2"
-              onSkip={setSkipped}
+              onSkip={() => {
+                captureOnboardingEvent(posthog, {
+                  name: 'onboarding_skipped',
+                  options: {
+                    step_name: 'run_router_send_metrics',
+                  },
+                });
+                setSkipped();
+              }}
               backHref="/onboarding/2"
               forward={{
                 onClick: () => mutate({}),