fix: add app client id uuid for mixpanel client id

README.md

@@ -44,6 +44,8 @@ MP_PROJECT_ENV=<...>
 NICENODE_ENV=development
 ```
 
+`SENTRY_DSN` and `MP_PROJECT_TOKEN` should be fake unless testing. Contact Johns, @jgresham, if you want to test new error or event reporting code.
+
 ## Packaging for Production
 
 To package apps for the local platform:

src/main/ipc.ts

@@ -69,6 +69,7 @@ import {
   stopNodePackage,
 } from './nodePackageManager';
 import { checkPorts } from './ports';
+import { getAppClientId } from './state/eventReporting';
 
 // eslint-disable-next-line import/prefer-default-export
 export const initialize = () => {
@@ -205,6 +206,7 @@ export const initialize = () => {
     return getSetHasSeenAlphaModal(hasSeen);
   });
   ipcMain.handle('getSettings', getSettings);
+  ipcMain.handle('getAppClientId', getAppClientId);
   ipcMain.handle('setLanguage', (_event, languageCode: string) => {
     return setLanguage(languageCode);
   });

src/main/preload.ts

@@ -126,6 +126,7 @@ contextBridge.exposeInMainWorld('electron', {
   getSetHasSeenAlphaModal: (hasSeen?: boolean) =>
     ipcRenderer.invoke('getSetHasSeenAlphaModal', hasSeen),
   getSettings: () => ipcRenderer.invoke('getSettings'),
+  getAppClientId: () => ipcRenderer.invoke('getAppClientId'),
   setLanguage: (languageCode: string) => {
     ipcRenderer.invoke('setLanguage', languageCode);
   },

src/main/state/eventReporting.ts

@@ -0,0 +1,43 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import logger from '../logger';
+
+import store from './store';
+
+// export type EventReportingState = Record<string, string | object | boolean>;
+const EVENT_REPORTING_KEY = 'eventReporting';
+const CLIENT_ID_KEY = 'clientId';
+
+export type EventReportingState = {
+  [CLIENT_ID_KEY]?: string;
+};
+
+/**
+ * Called on app launch.
+ * Initializes internal data structures for readiness.
+ */
+const initialize = () => {
+  logger.info('Intializing store settings key');
+  let eventReporting = store.get(EVENT_REPORTING_KEY);
+  if (!eventReporting || typeof eventReporting !== 'object') {
+    // create the default settings if no settings are saved yet
+    logger.info(
+      'No eventReporting state found. Creating a new instance and with a new clientId.',
+    );
+    eventReporting = {
+      [CLIENT_ID_KEY]: uuidv4(),
+    };
+    store.set(EVENT_REPORTING_KEY, eventReporting);
+  } else if (eventReporting?.[CLIENT_ID_KEY] === undefined) {
+    eventReporting = {
+      ...eventReporting,
+      [CLIENT_ID_KEY]: uuidv4(),
+    };
+    store.set(EVENT_REPORTING_KEY, eventReporting);
+  }
+};
+initialize();
+
+export const getAppClientId = (): boolean => {
+  return store.get(`${EVENT_REPORTING_KEY}.${CLIENT_ID_KEY}`);
+};

src/renderer/__mocks__/custom-preload-mock.ts

@@ -148,6 +148,9 @@ export const getSettings = () => {
     appThemeSetting: 'auto',
   };
 };
+export const getAppClientId = () => {
+  return 'random-unique-uuidv4';
+};
 export const getSetHasSeenSplashscreen = () => true;
 export const getSetHasSeenAlphaModal = () => true;
 export const getIsPodmanInstalled = () => true;

src/renderer/events/reportEvent.ts

@@ -1,6 +1,8 @@
 import mixpanel from 'mixpanel-browser';
+
 import { MP_PROJECT_ENV, MP_PROJECT_TOKEN } from './environment';
 import { NNEvent } from './events';
+import electron from '../electronGlobal';
 
 /**
  * Enable or disable remote event reporting service from in the front-end.
@@ -43,7 +45,7 @@ export const reportEvent = (
   mixpanel.track(event, properties);
 };
 
-export const initialize = () => {
+export const initialize = async () => {
   if (MP_PROJECT_ENV === 'dev') {
     return;
   }
@@ -54,7 +56,9 @@ export const initialize = () => {
       track_pageview: true,
       persistence: 'localStorage',
     });
-    mixpanel.identify('johns');
+    const appClientId = await electron.getAppClientId();
+    console.log('event reporting: appClientId: ', appClientId);
+    mixpanel.identify(appClientId);
   } else {
     console.error('MP_PROJECT_TOKEN not found!');
   }

src/renderer/preload.d.ts

@@ -103,6 +103,7 @@ declare global {
       getSetHasSeenSplashscreen(hasSeen?: boolean): boolean;
       getSetHasSeenAlphaModal(hasSeen?: boolean): boolean;
       getSettings(): Settings;
+      getAppClientId(): string;
       setLanguage(languageCode: string): void;
       setThemeSetting(theme: ThemeSetting): void;
       setIsOpenOnStartup(isOpenOnStartup: boolean): void;