From 917ad1965aff9b521c5612b5a35b48025a62e90c Mon Sep 17 00:00:00 2001 From: pengx17 Date: Thu, 9 May 2024 07:50:14 +0000 Subject: [PATCH] fix: mixpanel issues (#6840) --- .../quota-reached-modal/cloud-quota-modal.tsx | 10 ------- .../block-suite-editor/ai/tracker.ts | 4 --- .../src/modules/cloud/services/user-quota.ts | 15 ++++++++++- .../modules/telemetry/services/telemetry.ts | 26 ++++++++++++++++--- packages/frontend/core/src/router.tsx | 1 + packages/frontend/core/src/utils/mixpanel.ts | 15 ++++++++--- tools/cli/src/webpack/config.ts | 4 ++- 7 files changed, 52 insertions(+), 23 deletions(-) diff --git a/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx b/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx index 45a79a752..fbb636353 100644 --- a/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx +++ b/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 ( [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); }; diff --git a/packages/frontend/core/src/modules/cloud/services/user-quota.ts b/packages/frontend/core/src/modules/cloud/services/user-quota.ts index 585b7c6f8..6980856d8 100644 --- a/packages/frontend/core/src/modules/cloud/services/user-quota.ts +++ b/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['quota']; + +export const UserQuotaChanged = createEvent('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() { diff --git a/packages/frontend/core/src/modules/telemetry/services/telemetry.ts b/packages/frontend/core/src/modules/telemetry/services/telemetry.ts index 9919bb55e..da55a8e04 100644 --- a/packages/frontend/core/src/modules/telemetry/services/telemetry.ts +++ b/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['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) { - mixpanel.identify(account.id); - } + this.onAccountChanged(account); } 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['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; + } } diff --git a/packages/frontend/core/src/router.tsx b/packages/frontend/core/src/router.tsx index afcbf89fe..eb53d49eb 100644 --- a/packages/frontend/core/src/router.tsx +++ b/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 ( diff --git a/packages/frontend/core/src/utils/mixpanel.ts b/packages/frontend/core/src/utils/mixpanel.ts index 10ebfc1b0..20bb74a26 100644 --- a/packages/frontend/core/src/utils/mixpanel.ts +++ b/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( - `Mixpanel is not initialized, calling ${property ? String(property) : 'mixpanel'} with args: ${JSON.stringify(args)}` + logger.debug( + `mixpanel.${property ? String(property) : 'mixpanel'}`, + ...args ); }, } as ProxyHandler; diff --git a/tools/cli/src/webpack/config.ts b/tools/cli/src/webpack/config.ts index 082cddecf..baf25787b 100644 --- a/tools/cli/src/webpack/config.ts +++ b/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({