[ENG-428] Embed app version and commit hash for telemetry (#1456)

* embed build info into telemetry

* fix mobile too

* use actual data and not the bridge query 💀

apps/mobile/src/App.tsx

@@ -23,6 +23,7 @@ import {
 	NotificationContextProvider,
 	P2PContextProvider,
 	RspcProvider,
+	useBridgeQuery,
 	useClientContext,
 	useInvalidateQuery,
 	usePlausibleEvent,
@@ -42,7 +43,6 @@ dayjs.extend(advancedFormat);
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
 
-initPlausible({ platformType: 'mobile' });
 // changeTwTheme(getThemeStore().theme);
 // TODO: Use above when light theme is ready
 changeTwTheme('dark');
@@ -50,6 +50,9 @@ changeTwTheme('dark');
 function AppNavigation() {
 	const { libraries, library } = useClientContext();
 	const plausibleEvent = usePlausibleEvent();
+	const buildInfo = useBridgeQuery(['buildInfo']);
+
+	initPlausible({ platformType: 'mobile', buildInfo: buildInfo?.data });
 
 	// TODO: Make sure library has actually been loaded by this point - precache with useCachedLibraries?
 	// if (library === undefined) throw new Error("Tried to render AppNavigation before libraries fetched!")

interface/app/$libraryId/Layout/index.tsx

@@ -1,10 +1,11 @@
 import clsx from 'clsx';
-import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Suspense, useEffect, useMemo, useRef } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import {
 	ClientContextProvider,
 	initPlausible,
 	LibraryContextProvider,
+	useBridgeQuery,
 	useClientContext,
 	usePlausibleEvent,
 	usePlausiblePageViewMonitor,
@@ -23,11 +24,13 @@ const Layout = () => {
 	const { libraries, library } = useClientContext();
 	const os = useOperatingSystem();
 	const plausibleEvent = usePlausibleEvent();
+	const buildInfo = useBridgeQuery(['buildInfo']);
 
 	const layoutRef = useRef<HTMLDivElement>(null);
 
 	initPlausible({
-		platformType: usePlatform().platform === 'tauri' ? 'desktop' : 'web'
+		platformType: usePlatform().platform === 'tauri' ? 'desktop' : 'web',
+		buildInfo: buildInfo?.data
 	});
 
 	const { rawPath } = useRootContext();

packages/client/src/hooks/usePlausible.tsx

@@ -1,14 +1,14 @@
 import Plausible, { PlausibleOptions as PlausibleTrackerOptions } from 'plausible-tracker';
 import { useCallback, useEffect, useRef } from 'react';
 
+import { BuildInfo } from '../core';
 import { useDebugState } from './useDebugState';
 import { PlausiblePlatformType, telemetryStore, useTelemetryState } from './useTelemetryState';
 
 /**
  * This should be in sync with the Core's version.
  */
-const CORE_VERSION = '0.1.0'; // This will need to be embedded accordingly
-const APP_VERSION = '0.1.0'; // This is specific to desktop/web/mobile and will need to be embedded accordingly
+
 const DOMAIN = 'app.spacedrive.com';
 const MOBILE_DOMAIN = 'mobile.spacedrive.com';
 
@@ -117,7 +117,7 @@ interface PlausibleTrackerEvent {
 		platform: PlausiblePlatformType;
 		fullTelemetry: boolean;
 		coreVersion: string;
-		appVersion: string;
+		commitHash: string;
 		debug: boolean;
 	};
 	options: PlausibleTrackerOptions;
@@ -156,6 +156,10 @@ interface SubmitEventProps {
 		shareFullTelemetry: boolean;
 		telemetryLogging: boolean;
 	};
+	/**
+	 * The app's build info
+	 */
+	buildInfo: BuildInfo | undefined; // TODO(brxken128): ensure this is populated *always*
 }
 
 /**
@@ -195,8 +199,8 @@ const submitPlausibleEvent = async ({ event, debugState, ...props }: SubmitEvent
 		props: {
 			platform: props.platformType,
 			fullTelemetry: props.shareFullTelemetry,
-			coreVersion: CORE_VERSION,
-			appVersion: APP_VERSION,
+			coreVersion: props.buildInfo?.version ?? '0.1.0', // TODO(brxken128): clean this up
+			commitHash: props.buildInfo?.commit ?? '0.1.0',
 			debug: debugState.enabled
 		},
 		options: {
@@ -281,6 +285,7 @@ export const usePlausibleEvent = () => {
 				debugState,
 				shareFullTelemetry: telemetryState.shareFullTelemetry,
 				platformType: telemetryState.platform,
+				buildInfo: telemetryState.buildInfo,
 				...props
 			});
 		},
@@ -361,7 +366,14 @@ export const usePlausiblePingMonitor = ({ currentPath }: PlausibleMonitorProps)
 	}, [currentPath, plausibleEvent]);
 };
 
-export const initPlausible = ({ platformType }: { platformType: PlausiblePlatformType }) => {
+export const initPlausible = ({
+	platformType,
+	buildInfo
+}: {
+	platformType: PlausiblePlatformType;
+	buildInfo: BuildInfo | undefined;
+}) => {
 	telemetryStore.platform = platformType;
+	telemetryStore.buildInfo = buildInfo;
 	return;
 };

packages/client/src/hooks/useTelemetryState.tsx

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
 
+import { BuildInfo } from '../core';
 import { valtioPersist } from '../lib';
 
 /**
@@ -13,11 +14,13 @@ export type PlausiblePlatformType = 'web' | 'mobile' | 'desktop' | 'unknown';
 type TelemetryState = {
 	shareFullTelemetry: boolean;
 	platform: PlausiblePlatformType;
+	buildInfo: BuildInfo | undefined;
 };
 
 export const telemetryStore = valtioPersist<TelemetryState>('sd-telemetryStore', {
 	shareFullTelemetry: false, // false by default
-	platform: 'unknown'
+	platform: 'unknown',
+	buildInfo: undefined
 });
 
 export function useTelemetryState() {