Merge pull request #10153 from gitbutlerapp/onboarding-posthog-events

Add custom PostHog events for onboarding flow

Author: estib-vega

apps/desktop/src/components/AnalyticsConfirmation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import AnalyticsSettings from '$components/AnalyticsSettings.svelte';
 	import { initAnalyticsIfEnabled } from '$lib/analytics/analytics';
-	import { POSTHOG_WRAPPER } from '$lib/analytics/posthog';
+	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { APP_SETTINGS } from '$lib/config/appSettings';
 	import { inject } from '@gitbutler/core/context';
 	import { Button, TestId } from '@gitbutler/ui';
@@ -23,6 +23,7 @@
 			onclick={() => {
 				$analyticsConfirmed = true;
 				initAnalyticsIfEnabled(appSettings, posthog);
+				posthog.captureOnboarding(OnboardingEvent.ConfirmedAnalytics);
 			}}
 		>
 			Continue

apps/desktop/src/components/CloneForm.svelte

@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import InfoMessage, { type MessageStyle } from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
-	import { POSTHOG_WRAPPER } from '$lib/analytics/posthog';
+	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { BACKEND } from '$lib/backend';
 	import { GIT_SERVICE } from '$lib/git/gitService';
 	import { handleAddProjectOutcome } from '$lib/project/project';
@@ -87,17 +87,21 @@
 
 			await gitService.cloneRepo(repositoryUrl, targetDir);
 
-			posthog.capture('Repository Cloned', { protocol: remoteUrl.protocol });
+			posthog.captureOnboarding(OnboardingEvent.ClonedProject);
 			const outcome = await projectsService.addProject(targetDir);
 			if (!outcome) {
+				posthog.captureOnboarding(
+					OnboardingEvent.ClonedProjectFailed,
+					'Failed to add project after cloning'
+				);
 				throw new Error('Failed to add project after cloning.');
 			}
 
 			handleAddProjectOutcome(outcome, (project) => goto(projectPath(project.id)));
 		} catch (e) {
 			Sentry.captureException(e);
 			const errorMessage = getErrorMessage(e);
-			posthog.capture('Repository Clone Failure', { error: errorMessage });
+			posthog.captureOnboarding(OnboardingEvent.ClonedProjectFailed, e);
 			errors.push({
 				label: errorMessage
 			});

apps/desktop/src/components/ProjectSetup.svelte

@@ -4,7 +4,7 @@
 	import KeysForm from '$components/KeysForm.svelte';
 	import ProjectSetupTarget from '$components/ProjectSetupTarget.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import { POSTHOG_WRAPPER } from '$lib/analytics/posthog';
+	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import newProjectSvg from '$lib/assets/illustrations/new-project.svg?raw';
 	import { BACKEND } from '$lib/backend';
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
@@ -38,9 +38,10 @@
 				branch: selectedBranch[0],
 				pushRemote: selectedBranch[1]
 			});
+			posthog.captureOnboarding(OnboardingEvent.SetTargetBranch);
 			goto(`/${projectId}/`, { invalidateAll: true });
-		} finally {
-			posthog.capture('Project Setup Complete');
+		} catch (e: unknown) {
+			posthog.captureOnboarding(OnboardingEvent.SetTargetBranchFailed, e);
 		}
 	}
 

apps/desktop/src/components/Welcome.svelte

@@ -3,6 +3,7 @@
 	import IconLink from '$components/IconLink.svelte';
 	import WelcomeAction from '$components/WelcomeAction.svelte';
 	import WelcomeSigninAction from '$components/WelcomeSigninAction.svelte';
+	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import cloneRepoSvg from '$lib/assets/welcome/clone-repo.svg?raw';
 	import newProjectSvg from '$lib/assets/welcome/new-local-project.svg?raw';
 	import { handleAddProjectOutcome } from '$lib/project/project';
@@ -11,6 +12,7 @@
 	import { TestId } from '@gitbutler/ui';
 
 	const projectsService = inject(PROJECTS_SERVICE);
+	const posthog = inject(POSTHOG_WRAPPER);
 
 	let newProjectLoading = $state(false);
 	let directoryInputElement = $state<HTMLInputElement | undefined>();
@@ -21,9 +23,12 @@
 			const testDirectoryPath = directoryInputElement?.value;
 			const outcome = await projectsService.addProject(testDirectoryPath ?? '');
 
+			posthog.captureOnboarding(OnboardingEvent.AddLocalProject);
 			if (outcome) {
 				handleAddProjectOutcome(outcome);
 			}
+		} catch (e: unknown) {
+			posthog.captureOnboarding(OnboardingEvent.AddLocalProjectFailed, e);
 		} finally {
 			newProjectLoading = false;
 		}

apps/desktop/src/components/WelcomeSigninAction.svelte

@@ -28,6 +28,7 @@
 		loading={$loading}
 		onclick={async () => {
 			$aborted = false;
+			// TODO: Track login calls
 			await userService.login(aborted);
 		}}
 		rowReverse

apps/desktop/src/lib/analytics/posthog.ts

@@ -1,3 +1,4 @@
+import { parseQueryError } from '$lib/error/error';
 import { InjectionToken } from '@gitbutler/core/context';
 import { PostHog, posthog, type Properties } from 'posthog-js';
 import type { EventContext } from '$lib/analytics/eventContext';
@@ -23,6 +24,18 @@ export class PostHogWrapper {
 		this._instance?.capture(eventName, newProperties);
 	}
 
+	captureOnboarding(event: OnboardingEvent, error?: unknown) {
+		const context = this.eventContext.getAll();
+		const parsedError = parseQueryError(error);
+		const properties = {
+			...context,
+			error_title: parsedError.name,
+			error_message: parsedError.message,
+			error_code: parsedError.code
+		};
+		this._instance?.capture(event, properties);
+	}
+
 	async init() {
 		const appInfo = await this.backend.getAppInfo();
 		this._instance = posthog.init(PUBLIC_POSTHOG_API_KEY, {
@@ -78,3 +91,15 @@ export class PostHogWrapper {
 		}
 	}
 }
+
+export enum OnboardingEvent {
+	ConfirmedAnalytics = 'onboarding_confirmed_analytics',
+	AddLocalProject = 'onboarding_add_local_project',
+	AddLocalProjectFailed = 'onboarding_add_local_project_failed',
+	ClonedProject = 'onboarding_cloned_project',
+	ClonedProjectFailed = 'onboarding_cloned_project_failed',
+	SetTargetBranch = 'onboarding_set_target_branch',
+	SetTargetBranchFailed = 'onboarding_set_target_branch_failed',
+	SetProjectActive = 'onboarding_set_project_active',
+	SetProjectActiveFailed = 'onboarding_set_project_active_failed'
+}

apps/desktop/src/routes/[projectId]/+layout.svelte

@@ -10,7 +10,7 @@
 	import ProblemLoadingRepo from '$components/ProblemLoadingRepo.svelte';
 	import ProjectSettingsMenuAction from '$components/ProjectSettingsMenuAction.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import { POSTHOG_WRAPPER } from '$lib/analytics/posthog';
+	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
 	import { BRANCH_SERVICE } from '$lib/branches/branchService.svelte';
 	import { SETTINGS_SERVICE } from '$lib/config/appSettingsV2';
@@ -261,6 +261,7 @@
 		const dontShowAgainKey = `git-filters--dont-show-again--${projectId}`;
 		try {
 			const info = await projectsService.setActiveProject(projectId);
+			posthog.captureOnboarding(OnboardingEvent.SetProjectActive);
 
 			if (!info) return;
 
@@ -285,6 +286,7 @@
 				});
 			}
 		} catch (error: unknown) {
+			posthog.captureOnboarding(OnboardingEvent.SetProjectActiveFailed);
 			showError('Failed to set the project active', error);
 		}
 	}