From e3e35cfe1a5a39718eac79684b7818acc40fb902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Gran=C3=A1t?=
 <granat.stepan@gmail.com>
Date: Wed, 18 Sep 2024 12:53:48 +0200
Subject: [PATCH] fix: posthog record only when user is logged in (#2470)

---
 .../src/component/MandatoryDataProvider.tsx   | 37 +-----------
 webapp/src/hooks/usePosthog.ts                | 56 +++++++++++++++++++
 2 files changed, 58 insertions(+), 35 deletions(-)
 create mode 100644 webapp/src/hooks/usePosthog.ts

diff --git a/webapp/src/component/MandatoryDataProvider.tsx b/webapp/src/component/MandatoryDataProvider.tsx
index a32edb417b..79d3e5d2f0 100644
--- 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
new file mode 100644
index 0000000000..02f7069a9e
--- /dev/null
+++ 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]);
+}