fix: posthog record only when user is logged in (#2470)

tolgee · Sep 18, 2024 · e3e35cf · e3e35cf
1 parent bef8218
commit e3e35cf
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 35 deletions.
diff --git a/webapp/src/component/MandatoryDataProvider.tsx b/webapp/src/component/MandatoryDataProvider.tsx
@@ -2,13 +2,11 @@ import { useGlobalContext } from 'tg.globalContext/GlobalContext';
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/browser';
 import { useGlobalLoading } from './GlobalLoading';
-import { PostHog } from 'posthog-js';
-import { getUtmParams } from 'tg.fixtures/utmCookie';
 import { useIdentify } from 'tg.hooks/useIdentify';
 import { useIsFetching, useIsMutating } from 'react-query';
 import { useConfig, useUser } from 'tg.globalContext/helpers';
+import { usePosthog } from 'tg.hooks/usePosthog';
 
-const POSTHOG_INITIALIZED_WINDOW_PROPERTY = 'postHogInitialized';
 export const MandatoryDataProvider = (props: any) => {
  const userData = useUser();
  const config = useConfig();
@@ -36,38 +34,7 @@ export const MandatoryDataProvider = (props: any) => {
  }
  }, [config?.clientSentryDsn]);
 
- function initPostHog() {
- let postHogPromise: Promise<PostHog> | undefined;
- if (!window[POSTHOG_INITIALIZED_WINDOW_PROPERTY]) {
- const postHogAPIKey = config?.postHogApiKey;
- if (postHogAPIKey) {
- window[POSTHOG_INITIALIZED_WINDOW_PROPERTY] = true;
- postHogPromise = import('posthog-js').then((m) => m.default);
- postHogPromise.then((posthog) => {
- posthog.init(postHogAPIKey, {
- api_host: config?.postHogHost || undefined,
- });
- if (userData) {
- posthog.identify(userData.id.toString(), {
- name: userData.username,
- email: userData.username,
- ...getUtmParams(),
- });
- }
- });
- }
- }
- return () => {
- postHogPromise?.then((ph) => {
- ph.reset();
- });
- window[POSTHOG_INITIALIZED_WINDOW_PROPERTY] = false;
- };
- }
-
- useEffect(() => {
- return initPostHog();
- }, [userData?.id, config?.postHogApiKey]);
+ usePosthog();
 
  useEffect(() => {
  if (userData) {

diff --git a/webapp/src/hooks/usePosthog.ts b/webapp/src/hooks/usePosthog.ts
@@ -0,0 +1,56 @@
+import { PostHog } from 'posthog-js';
+import { useEffect } from 'react';
+import { getUtmParams } from 'tg.fixtures/utmCookie';
+import { useConfig, useUser } from 'tg.globalContext/helpers';
+
+const POSTHOG_INSTANCE_WINDOW_PROPERTY = 'posthogInstance';
+
+const IGNORED_USER_DOMAINS = ['tolgee.io'];
+
+async function loadPosthog() {
+ return (await import('posthog-js')).default;
+}
+
+export function usePosthog() {
+ const userData = useUser();
+ const config = useConfig();
+
+ useEffect(() => {
+ if (
+ config?.postHogApiKey &&
+ userData?.id !== undefined &&
+ IGNORED_USER_DOMAINS.every(
+ (domain) => !userData.username.endsWith(domain)
+ )
+ ) {
+ let cancelled = false;
+ const postHogAPIKey = config?.postHogApiKey;
+ if (postHogAPIKey) {
+ Promise.resolve(
+ window[POSTHOG_INSTANCE_WINDOW_PROPERTY] || loadPosthog()
+ ).then((posthog: PostHog) => {
+ window[POSTHOG_INSTANCE_WINDOW_PROPERTY] = posthog;
+ if (!cancelled) {
+ posthog.init(postHogAPIKey, {
+ api_host: config?.postHogHost || undefined,
+ disable_session_recording: true,
+ });
+ posthog.identify(userData.id.toString(), {
+ name: userData.username,
+ email: userData.username,
+ ...getUtmParams(),
+ });
+ }
+ });
+ }
+
+ return () => {
+ cancelled = true;
+ const ph = window[POSTHOG_INSTANCE_WINDOW_PROPERTY] as
+ | PostHog
+ | undefined;
+ ph?.reset();
+ };
+ }
+ }, [userData?.id, config?.postHogApiKey]);
+}