From 10d5b2ee3fee01dd04bf4ac1779f85a5b0361778 Mon Sep 17 00:00:00 2001
From: Tarrence van As <tarrence@vanas.family>
Date: Thu, 14 Nov 2024 13:07:30 -0500
Subject: [PATCH] Conditionally initialize posthog

---
 .../src/components/Provider/index.tsx         | 37 ++++++-------------
 packages/keychain/src/pages/index.tsx         | 15 ++++++++
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/keychain/src/components/Provider/index.tsx b/packages/keychain/src/components/Provider/index.tsx
index 990dcd3a2..2f800fec0 100644
--- a/packages/keychain/src/components/Provider/index.tsx
+++ b/packages/keychain/src/components/Provider/index.tsx
@@ -11,19 +11,8 @@ import { useConnectionValue } from "hooks/connection";
 import { ConnectionProvider } from "./connection";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
 import { ENDPOINT } from "utils/graphql";
-import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
-
-if (typeof window !== "undefined") {
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-    person_profiles: "always",
-    enable_recording_console_log: true,
-    loaded: (posthog) => {
-      if (process.env.NODE_ENV === "development") posthog.debug();
-    },
-  });
-}
+import posthog from "posthog-js";
 
 export function Provider({ children }: PropsWithChildren) {
   const preset = useControllerThemePreset();
@@ -43,19 +32,17 @@ export function Provider({ children }: PropsWithChildren) {
   const connection = useConnectionValue();
 
   return (
-    <PostHogProvider client={posthog}>
-      <ChakraProvider theme={chakraTheme}>
-        <CartridgeAPIProvider url={ENDPOINT}>
-          <QueryClientProvider client={queryClient}>
-            <ControllerThemeProvider value={controllerTheme}>
-              <ConnectionProvider value={connection}>
-                {children}
-              </ConnectionProvider>
-            </ControllerThemeProvider>
-          </QueryClientProvider>
-        </CartridgeAPIProvider>
-      </ChakraProvider>
-    </PostHogProvider>
+    <ChakraProvider theme={chakraTheme}>
+      <CartridgeAPIProvider url={ENDPOINT}>
+        <QueryClientProvider client={queryClient}>
+          <ControllerThemeProvider value={controllerTheme}>
+            <ConnectionProvider value={connection}>
+              <PostHogProvider client={posthog}>{children}</PostHogProvider>
+            </ConnectionProvider>
+          </ControllerThemeProvider>
+        </QueryClientProvider>
+      </CartridgeAPIProvider>
+    </ChakraProvider>
   );
 }
 
diff --git a/packages/keychain/src/pages/index.tsx b/packages/keychain/src/pages/index.tsx
index f942e3774..d779651cc 100644
--- a/packages/keychain/src/pages/index.tsx
+++ b/packages/keychain/src/pages/index.tsx
@@ -15,11 +15,26 @@ import { ErrorPage } from "components/ErrorBoundary";
 import { Settings } from "components/Settings";
 import { Upgrade } from "components/connect/Upgrade";
 import { PurchaseCredits } from "components/Funding/PurchaseCredits";
+import posthog from "posthog-js";
+import { useEffect } from "react";
 
 function Home() {
   const { context, controller, setController, error, policies, upgrade } =
     useConnection();
 
+  useEffect(() => {
+    if (context?.origin) {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        person_profiles: "always",
+        enable_recording_console_log: true,
+        loaded: (posthog) => {
+          if (process.env.NODE_ENV === "development") posthog.debug();
+        },
+      });
+    }
+  }, [context?.origin]);
+
   if (window.self === window.top || !context?.origin) {
     return <></>;
   }