fix: mixpanel issues (#6840)

packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx

@@ -9,8 +9,6 @@ import bytes from 'bytes';
 import { useAtom, useSetAtom } from 'jotai';
 import { useCallback, useEffect, useMemo } from 'react';
 
-import { mixpanel } from '../../../utils';
-
 export const CloudQuotaModal = () => {
   const t = useAFFiNEI18N();
   const currentWorkspace = useService(WorkspaceService).workspace;
@@ -93,14 +91,6 @@ export const CloudQuotaModal = () => {
     };
   }, [currentWorkspace.engine.blob, setOpen, workspaceQuota]);
 
-  useEffect(() => {
-    if (userQuota?.name) {
-      mixpanel.people.set({
-        plan: userQuota.name,
-      });
-    }
-  }, [userQuota?.name]);
-
   return (
     <ConfirmModal
       open={open}

packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/tracker.ts

@@ -1,5 +1,4 @@
 import { mixpanel } from '@affine/core/utils';
-import { DebugLogger } from '@affine/debug';
 import type { EditorHost } from '@blocksuite/block-std';
 import type { ElementModel } from '@blocksuite/blocks';
 import { AIProvider } from '@blocksuite/presets';
@@ -58,8 +57,6 @@ type BlocksuiteActionEvent = Parameters<
   Parameters<typeof AIProvider.slots.actions.on>[0]
 >[0];
 
-const logger = new DebugLogger('affine:ai-tracker');
-
 const trackAction = ({
   eventName,
   properties,
@@ -67,7 +64,6 @@ const trackAction = ({
   eventName: AIActionEventName;
   properties: AIActionEventProperties;
 }) => {
-  logger.debug('trackAction', eventName, properties);
   mixpanel.track(eventName, properties);
 };
 

packages/frontend/core/src/modules/cloud/services/user-quota.ts

@@ -1,10 +1,23 @@
-import { OnEvent, Service } from '@toeverything/infra';
+import type { QuotaQuery } from '@affine/graphql';
+import { createEvent, OnEvent, Service } from '@toeverything/infra';
 
 import { UserQuota } from '../entities/user-quota';
 import { AccountChanged } from './auth';
 
+type UserQuotaInfo = NonNullable<QuotaQuery['currentUser']>['quota'];
+
+export const UserQuotaChanged = createEvent<UserQuotaInfo>('UserQuotaChanged');
+
 @OnEvent(AccountChanged, e => e.onAccountChanged)
 export class UserQuotaService extends Service {
+  constructor() {
+    super();
+
+    this.quota.quota$.distinctUntilChanged().subscribe(q => {
+      this.eventBus.emit(UserQuotaChanged, q);
+    });
+  }
+
   quota = this.framework.createEntity(UserQuota);
 
   private onAccountChanged() {

packages/frontend/core/src/modules/telemetry/services/telemetry.ts

@@ -1,4 +1,5 @@
 import { mixpanel } from '@affine/core/utils';
+import type { QuotaQuery } from '@affine/graphql';
 import { ApplicationStarted, OnEvent, Service } from '@toeverything/infra';
 
 import {
@@ -6,10 +7,15 @@ import {
   type AuthAccountInfo,
   type AuthService,
 } from '../../cloud';
+import { UserQuotaChanged } from '../../cloud/services/user-quota';
 
 @OnEvent(ApplicationStarted, e => e.onApplicationStart)
 @OnEvent(AccountChanged, e => e.onAccountChanged)
+@OnEvent(UserQuotaChanged, e => e.onUserQuotaChanged)
 export class TelemetryService extends Service {
+  private prevQuota: NonNullable<QuotaQuery['currentUser']>['quota'] | null =
+    null;
+
   constructor(private readonly auth: AuthService) {
     super();
   }
@@ -22,9 +28,7 @@ export class TelemetryService extends Service {
       });
     }
     const account = this.auth.session.account$.value;
-    if (account) {
+    this.onAccountChanged(account);
-      mixpanel.identify(account.id);
-    }
   }
 
   onAccountChanged(account: AuthAccountInfo | null) {
@@ -33,6 +37,22 @@ export class TelemetryService extends Service {
     } else {
       mixpanel.reset();
       mixpanel.identify(account.id);
+      mixpanel.people.set({
+        $email: account.email,
+        $name: account.label,
+        $avatar: account.avatar,
+      });
     }
   }
+
+  onUserQuotaChanged(quota: NonNullable<QuotaQuery['currentUser']>['quota']) {
+    const plan = quota?.humanReadable.name;
+    // only set when plan is not empty and changed
+    if (plan !== this.prevQuota?.humanReadable.name && plan) {
+      mixpanel.people.set({
+        plan: quota?.humanReadable.name,
+      });
+    }
+    this.prevQuota = quota;
+  }
 }

packages/frontend/core/src/router.tsx

@@ -30,6 +30,7 @@ function RootRouter() {
       environment: runtimeConfig.appBuildType,
       editorVersion: runtimeConfig.editorVersion,
       isSelfHosted: Boolean(runtimeConfig.isSelfHosted),
+      isDesktop: environment.isDesktop,
     });
   }, [location]);
   return (

packages/frontend/core/src/utils/mixpanel.ts

@@ -1,6 +1,9 @@
+import { DebugLogger } from '@affine/debug';
 import type { OverridedMixpanel } from 'mixpanel-browser';
 import mixpanelBrowser from 'mixpanel-browser';
 
+const logger = new DebugLogger('affine:mixpanel');
+
 export const mixpanel = process.env.MIXPANEL_TOKEN
   ? mixpanelBrowser
   : new Proxy(
@@ -10,15 +13,19 @@ export const mixpanel = process.env.MIXPANEL_TOKEN
 
 function createProxyHandler(property?: string | symbol) {
   const handler = {
-    get: (_target, property) => {
+    get: (_target, childProperty) => {
+      const path = property
+        ? String(property) + '.' + String(childProperty)
+        : String(childProperty);
       return new Proxy(
         function () {} as unknown as OverridedMixpanel,
-        createProxyHandler(property)
+        createProxyHandler(path)
       );
     },
     apply: (_target, _thisArg, args) => {
-      console.info(
+      logger.debug(
-        `Mixpanel is not initialized, calling ${property ? String(property) : 'mixpanel'} with args: ${JSON.stringify(args)}`
+        `mixpanel.${property ? String(property) : 'mixpanel'}`,
+        ...args
       );
     },
   } as ProxyHandler<OverridedMixpanel>;

tools/cli/src/webpack/config.ts

@@ -349,7 +349,9 @@ export const createConfiguration: (
         ),
         'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN),
         'process.env.BUILD_TYPE': JSON.stringify(process.env.BUILD_TYPE),
-        'process.env.MIXPANEL_TOKEN': `"${process.env.MIXPANEL_TOKEN}"`,
+        'process.env.MIXPANEL_TOKEN': JSON.stringify(
+          process.env.MIXPANEL_TOKEN
+        ),
         runtimeConfig: JSON.stringify(runtimeConfig),
       }),
       new CopyPlugin({