Merge pull request #3627 from gitbutlerapp/fix-analytics-early-initialization

fix-analytics-early-initialization

app/src/lib/analytics/analytics.ts

@@ -0,0 +1,34 @@
+import { initPostHog } from '$lib/analytics/posthog';
+import { initSentry } from '$lib/analytics/sentry';
+import { appAnalyticsConfirmed } from '$lib/config/appSettings';
+import {
+	appMetricsEnabled,
+	appErrorReportingEnabled,
+	appNonAnonMetricsEnabled
+} from '$lib/config/appSettings';
+import posthog from 'posthog-js';
+
+export function initAnalyticsIfEnabled() {
+	const analyticsConfirmed = appAnalyticsConfirmed();
+	analyticsConfirmed.onDisk().then((confirmed) => {
+		if (confirmed) {
+			appErrorReportingEnabled()
+				.onDisk()
+				.then((enabled) => {
+					if (enabled) initSentry();
+				});
+			appMetricsEnabled()
+				.onDisk()
+				.then((enabled) => {
+					if (enabled) initPostHog();
+				});
+			appNonAnonMetricsEnabled()
+				.onDisk()
+				.then((enabled) => {
+					enabled
+						? posthog.capture('nonAnonMetricsEnabled')
+						: posthog.capture('nonAnonMetricsDisabled');
+				});
+		}
+	});
+}

app/src/lib/components/AnalyticsConfirmation.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import AnalyticsSettings from './AnalyticsSettings.svelte';
 	import Button from './Button.svelte';
+	import { initAnalyticsIfEnabled } from '$lib/analytics/analytics';
 	import type { Writable } from 'svelte/store';
 
 	export let analyticsConfirmed: Writable<boolean>;
@@ -17,6 +18,7 @@
 			icon="chevron-right-small"
 			on:click={() => {
 				$analyticsConfirmed = true;
+				initAnalyticsIfEnabled();
 			}}
 		>
 			Continue

app/src/lib/components/AnalyticsSettings.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
-	import InfoMessage from './InfoMessage.svelte';
 	import Link from './Link.svelte';
 	import SectionCard from './SectionCard.svelte';
 	import Toggle from './Toggle.svelte';
-	import { appErrorReportingEnabled, appMetricsEnabled } from '$lib/config/appSettings';
+	import {
+		appErrorReportingEnabled,
+		appMetricsEnabled,
+		appNonAnonMetricsEnabled
+	} from '$lib/config/appSettings';
 
 	const errorReportingEnabled = appErrorReportingEnabled();
 	const metricsEnabled = appMetricsEnabled();
-	let updatedTelemetrySettings = false;
+	const nonAnonMetricsEnabled = appNonAnonMetricsEnabled();
 
 	function toggleErrorReporting() {
 		$errorReportingEnabled = !$errorReportingEnabled;
-		updatedTelemetrySettings = true;
 	}
 
 	function toggleMetrics() {
 		$metricsEnabled = !$metricsEnabled;
-		updatedTelemetrySettings = true;
+	}
+
+	function toggleNonAnonMetrics() {
+		$nonAnonMetricsEnabled = !$nonAnonMetricsEnabled;
 	}
 </script>
 
@@ -24,7 +29,13 @@
 	<div class="analytics-settings__content">
 		<p class="text-base-body-13 analytics-settings__text">
 			GitButler uses telemetry strictly to help us improve the client. We do not collect any
-			personal information.
+			personal information (<Link
+				target="_blank"
+				rel="noreferrer"
+				href="https://gitbutler.com/privacy"
+			>
+				privacy policy
+			</Link>).
 		</p>
 		<p class="text-base-body-13 analytics-settings__text">
 			We kindly ask you to consider keeping these settings enabled as it helps us catch issues more
@@ -61,13 +72,19 @@
 			</svelte:fragment>
 		</SectionCard>
 
-		{#if updatedTelemetrySettings}
-			<InfoMessage>
-				<svelte:fragment slot="content"
-					>Changes will take effect on the next application start.</svelte:fragment
-				>
-			</InfoMessage>
-		{/if}
+		<SectionCard labelFor="metricsEnabledToggle" on:click={toggleMetrics} orientation="row">
+			<svelte:fragment slot="title">Non-anonymous usage metrics</svelte:fragment>
+			<svelte:fragment slot="caption"
+				>Toggle sharing of identifiable usage statistics.</svelte:fragment
+			>
+			<svelte:fragment slot="actions">
+				<Toggle
+					id="nonAnonMetricsEnabledToggle"
+					checked={$nonAnonMetricsEnabled}
+					on:change={toggleNonAnonMetrics}
+				/>
+			</svelte:fragment>
+		</SectionCard>
 	</div>
 </section>
 

app/src/lib/config/appSettings.ts

@@ -35,6 +35,15 @@ export function appErrorReportingEnabled() {
 	return persisted(true, 'appErrorReportingEnabled');
 }
 
+/**
+ * Provides a writable store for obtaining or setting the current state of non-anonemous application metrics.
+ * The setting can be enabled or disabled by setting the value of the store to true or false.
+ * @returns A writable store with the appNonAnonMetricsEnabled config.
+ */
+export function appNonAnonMetricsEnabled() {
+	return persisted(false, 'appNonAnonMetricsEnabled');
+}
+
 function persisted<T>(initial: T, key: string): Writable<T> & { onDisk: () => Promise<T> } {
 	async function setAndPersist(value: T, set: (value: T) => void) {
 		await store.set(key, value);

app/src/routes/+layout.ts

@@ -1,13 +1,11 @@
 import { AIService } from '$lib/ai/service';
-import { initPostHog } from '$lib/analytics/posthog';
-import { initSentry } from '$lib/analytics/sentry';
+import { initAnalyticsIfEnabled } from '$lib/analytics/analytics';
 import { AuthService } from '$lib/backend/auth';
 import { GitConfigService } from '$lib/backend/gitConfigService';
 import { HttpClient } from '$lib/backend/httpClient';
 import { ProjectService } from '$lib/backend/projects';
 import { PromptService } from '$lib/backend/prompt';
 import { UpdaterService } from '$lib/backend/updater';
-import { appMetricsEnabled, appErrorReportingEnabled } from '$lib/config/appSettings';
 import { GitHubService } from '$lib/github/service';
 import { UserService } from '$lib/stores/user';
 import lscache from 'lscache';
@@ -24,16 +22,7 @@ export const prerender = false;
 export const csr = true;
 
 export async function load() {
-	appErrorReportingEnabled()
-		.onDisk()
-		.then((enabled) => {
-			if (enabled) initSentry();
-		});
-	appMetricsEnabled()
-		.onDisk()
-		.then((enabled) => {
-			if (enabled) initPostHog();
-		});
+	initAnalyticsIfEnabled();
 
 	// TODO: Find a workaround to avoid this dynamic import
 	// https://github.com/sveltejs/kit/issues/905