Improve posthog (#1290)

cartridge-gg · Jan 17, 2025 · f3dcab4 · f3dcab4
1 parent ff7f2f3
commit f3dcab4
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 34 deletions.
diff --git a/packages/keychain/src/components/home.tsx b/packages/keychain/src/components/home.tsx
@@ -23,17 +23,6 @@ export function Home() {
   >(undefined);
   const posthog = usePostHog();
 
-  useEffect(() => {
-    if (
-      typeof window !== "undefined" &&
-      !window.location.hostname.includes("localhost")
-    ) {
-      if (import.meta.env.DEV) {
-        posthog.debug();
-      }
-    }
-  }, [context?.origin]);
-
   useEffect(() => {
     if (controller && policies) {
       controller.isRequestedSession(policies).then((isRequestedSession) => {
@@ -68,7 +57,7 @@ export function Home() {
 
   switch (context.type) {
     case "connect": {
-      posthog.capture("Call Connect");
+      posthog?.capture("Call Connect");
 
       // if no policies, we can connect immediately
       if (
@@ -110,12 +99,12 @@ export function Home() {
     }
 
     case "logout": {
-      posthog.capture("Call Logout");
+      posthog?.capture("Call Logout");
 
       return <Logout />;
     }
     case "sign-message": {
-      posthog.capture("Call Sign Message");
+      posthog?.capture("Call Sign Message");
 
       const ctx = context as SignMessageCtx;
       return (
@@ -134,7 +123,7 @@ export function Home() {
     }
 
     case "execute": {
-      posthog.capture("Call Execute");
+      posthog?.capture("Call Execute");
 
       const ctx = context as ExecuteCtx;
       if (!hasSessionForPolicies) {
@@ -173,7 +162,7 @@ export function Home() {
     }
 
     case "deploy": {
-      posthog.capture("Call Deploy");
+      posthog?.capture("Call Deploy");
 
       const ctx = context as DeployCtx;
       return (
@@ -188,12 +177,12 @@ export function Home() {
       );
     }
     case "open-settings": {
-      posthog.capture("Call Open Settings");
+      posthog?.capture("Call Open Settings");
 
       return <Settings />;
     }
     case "open-purchase-credits": {
-      posthog.capture("Call Purchase Credits");
+      posthog?.capture("Call Purchase Credits");
 
       return <PurchaseCredits />;
     }

diff --git a/packages/keychain/src/context/posthog.tsx b/packages/keychain/src/context/posthog.tsx
@@ -1,10 +1,68 @@
-import { createContext, useContext, PropsWithChildren, useEffect } from "react";
+import { createContext, useContext, PropsWithChildren } from "react";
 import PostHog from "posthog-js-lite";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Properties = Record<string, any>;
 
 class PostHogWrapper extends PostHog {
+  isLocal =
+    typeof window !== "undefined" &&
+    window.location.hostname.includes("localhost");
+
+  override capture(eventName: string, properties?: Properties): void {
+    if (this.isLocal) {
+      console.log("[PostHog Event]", {
+        event: eventName,
+        properties,
+      });
+      return;
+    }
+    super.capture(eventName, properties);
+  }
+
+  override identify(distinctId: string, properties?: Properties): void {
+    if (this.isLocal) {
+      console.log("[PostHog Identify]", {
+        distinctId,
+        properties,
+      });
+      return;
+    }
+    super.identify(distinctId, properties);
+  }
+
+  override group(
+    groupType: string,
+    groupKey: string,
+    properties?: Properties,
+  ): void {
+    if (this.isLocal) {
+      console.log("[PostHog Group]", {
+        groupType,
+        groupKey,
+        properties,
+      });
+      return;
+    }
+    super.group(groupType, groupKey, properties);
+  }
+
+  override reset(): void {
+    if (this.isLocal) {
+      console.log("[PostHog Reset]");
+      return;
+    }
+    super.reset();
+  }
+
+  override debug(): void {
+    if (this.isLocal) {
+      console.log("[PostHog Debug Mode Enabled]");
+      return;
+    }
+    super.debug();
+  }
+
   captureException(error: Error, additionalProperties?: Properties): void {
     const properties: Properties = {
       $exception_level: "error",
@@ -38,17 +96,6 @@ export function PostHogProvider({ children }: PropsWithChildren) {
     autocapture: false,
   });
 
-  useEffect(() => {
-    if (
-      typeof window !== "undefined" &&
-      !window.location.hostname.includes("localhost")
-    ) {
-      if (import.meta.env.DEV) {
-        posthog.debug();
-      }
-    }
-  }, []);
-
   return (
     <PostHogContext.Provider value={{ posthog }}>
       {children}
@@ -59,7 +106,7 @@ export function PostHogProvider({ children }: PropsWithChildren) {
 export function usePostHog() {
   const context = useContext(PostHogContext);
   if (!context) {
-    throw new Error("usePostHog must be used within a PostHogProvider");
+    return undefined;
   }
   return context.posthog;
 }
diff --git a/packages/keychain/src/hooks/connection.ts b/packages/keychain/src/hooks/connection.ts
@@ -88,13 +88,13 @@ export function useConnectionValue() {
   const setController = useCallback(
     (controller?: Controller) => {
       if (controller) {
-        posthog.identify(controller.username(), {
+        posthog?.identify(controller.username(), {
           address: controller.address,
           class: controller.classHash(),
           chainId: controller.chainId,
         });
       } else {
-        posthog.reset();
+        posthog?.reset();
       }
 
       setControllerRaw(controller);
@@ -104,7 +104,7 @@ export function useConnectionValue() {
 
   useEffect(() => {
     if (origin) {
-      posthog.group("company", origin);
+      posthog?.group("company", origin);
     }
   }, [origin, posthog]);