Setup PostHog and Integrate with Cookie Banner Component (#2557)

* feat: Setup posthog and integrate with cookie banner component

* refactor: Improved error handling

Author: undrash

frontend/docs/components/ui/cookie-banner.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import { Button } from "./button";
 import { CookieIcon } from "@radix-ui/react-icons";
@@ -23,29 +23,37 @@ export default function CookieConsent({
   const [hide, setHide] = useState(false);
   const [consentGiven, setConsentGiven] = useState("");
 
-  const accept = () => {
+  const accept = useCallback(() => {
     setIsOpen(false);
+    // eslint-disable-next-line no-restricted-syntax
     document.cookie =
       "cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
 
     localStorage.setItem("cookie_consent", "yes");
     setConsentGiven("yes");
 
+    // Dispatch custom event to notify other components
+    window.dispatchEvent(new Event("cookie-consent-change"));
+
     setTimeout(() => {
       setHide(true);
     }, 700);
     onAcceptCallback();
-  };
+  }, [onAcceptCallback]);
 
-  const decline = () => {
+  const decline = useCallback(() => {
     setIsOpen(false);
     localStorage.setItem("cookie_consent", "no");
     setConsentGiven("no");
+
+    // Dispatch custom event to notify other components
+    window.dispatchEvent(new Event("cookie-consent-change"));
+
     setTimeout(() => {
       setHide(true);
     }, 700);
     onDeclineCallback();
-  };
+  }, [onDeclineCallback]);
 
   useEffect(() => {
     try {
@@ -70,9 +78,9 @@ export default function CookieConsent({
         }
       }
     } catch (e) {
-      // console.log("Error: ", e);
+      console.error("Error checking cookie consent:", e);
     }
-  }, []);
+  }, [accept, demo]);
 
   useEffect(() => {
     const consented = consentGiven === "yes";

frontend/docs/context/ConsentContext.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+type ConsentStatus = "yes" | "no" | "undecided";
+
+interface ConsentContextType {
+  consentStatus: ConsentStatus;
+  hasConsent: boolean;
+}
+
+const ConsentContext = createContext<ConsentContextType | undefined>(undefined);
+
+export function ConsentProvider({ children }: { children: ReactNode }) {
+  const [consentStatus, setConsentStatus] =
+    useState<ConsentStatus>("undecided");
+
+  useEffect(() => {
+    const checkConsent = () => {
+      const consent = localStorage.getItem("cookie_consent");
+      if (consent === "yes" || consent === "no") {
+        setConsentStatus(consent as ConsentStatus);
+      } else {
+        setConsentStatus("undecided");
+      }
+    };
+
+    checkConsent();
+
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === "cookie_consent") {
+        checkConsent();
+      }
+    };
+
+    const handleConsentChange = () => {
+      checkConsent();
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener("cookie-consent-change", handleConsentChange);
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("cookie-consent-change", handleConsentChange);
+    };
+  }, []);
+
+  const hasConsent = consentStatus === "yes";
+
+  return (
+    <ConsentContext.Provider value={{ consentStatus, hasConsent }}>
+      {children}
+    </ConsentContext.Provider>
+  );
+}
+
+export function useConsent() {
+  const context = useContext(ConsentContext);
+  if (context === undefined) {
+    throw new Error("useConsent must be used within a ConsentProvider");
+  }
+  return context;
+}

frontend/docs/pages/_app.tsx

@@ -1,19 +1,21 @@
 import type { AppProps } from "next/app";
-import posthog from "posthog-js";
-import { PostHogProvider } from "posthog-js/react";
 import "../styles/global.css";
 import { LanguageProvider } from "../context/LanguageContext";
+import { ConsentProvider } from "../context/ConsentContext";
 import CookieConsent from "@/components/ui/cookie-banner";
+import { PostHogProvider } from "@/providers/posthog";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <LanguageProvider>
-      <PostHogProvider client={posthog}>
-        <main>
-          <CookieConsent />
-          <Component {...pageProps} />
-        </main>
-      </PostHogProvider>
+      <ConsentProvider>
+        <PostHogProvider>
+          <main>
+            <CookieConsent />
+            <Component {...pageProps} />
+          </main>
+        </PostHogProvider>
+      </ConsentProvider>
     </LanguageProvider>
   );
 }

frontend/docs/providers/posthog.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import posthog from "posthog-js";
+import { PostHogProvider as PhProvider, usePostHog } from "posthog-js/react";
+import { useEffect, useRef } from "react";
+import { useConsent } from "@/context/ConsentContext";
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  const { hasConsent } = useConsent();
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+
+    if (!key)
+      return console.error("PostHog key is not set in environment variables");
+
+    if (!hasConsent) {
+      posthog.stopSessionRecording();
+      posthog.opt_out_capturing();
+      posthog.reset();
+
+      return;
+    }
+
+    // Initialize PostHog on first run
+    if (!initializedRef.current) {
+      posthog.init(key, {
+        api_host:
+          process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
+        person_profiles: "identified_only",
+        capture_pageleave: true,
+        capture_exceptions: {
+          capture_unhandled_errors: true,
+          capture_unhandled_rejections: true,
+          capture_console_errors: false, // handle these manually
+        },
+        session_recording: {
+          maskAllInputs: false,
+          maskInputOptions: { password: true },
+        },
+        persistence: "localStorage+cookie",
+        before_send: (event) => {
+          // You can customize exception events for better grouping
+          return event;
+        },
+      });
+      initializedRef.current = true;
+    }
+
+    posthog.opt_in_capturing();
+    posthog.startSessionRecording();
+  }, [hasConsent]);
+
+  return (
+    <PhProvider client={posthog}>
+      <PostHogPageView />
+      {children}
+    </PhProvider>
+  );
+}
+
+function PostHogPageView() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = `${url}?${searchParams.toString()}`;
+      }
+
+      posthog.capture("$pageview", { $current_url: url });
+    }
+  }, [pathname, searchParams, posthog]);
+
+  return null;
+}