feat: add posthog analytics

apps/web/src/env.ts

@@ -79,6 +79,8 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_KAN_ENV: z.string().optional(),
     NEXT_PUBLIC_UMAMI_ID: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_HOST: z.string().optional(),
     NEXT_PUBLIC_BASE_URL: z.string().url(),
     NEXT_PUBLIC_STORAGE_URL: z.string().url().optional(),
     NEXT_PUBLIC_AVATAR_BUCKET_NAME: z.string().optional(),
@@ -105,6 +107,8 @@ export const env = createEnv({
     NEXT_PUBLIC_KAN_ENV: process.env.NEXT_PUBLIC_KAN_ENV,
     NODE_ENV: process.env.NODE_ENV,
     NEXT_PUBLIC_UMAMI_ID: process.env.NEXT_PUBLIC_UMAMI_ID,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+    NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
     NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
     NEXT_PUBLIC_STORAGE_URL: process.env.NEXT_PUBLIC_STORAGE_URL,
     NEXT_PUBLIC_AVATAR_BUCKET_NAME: process.env.NEXT_PUBLIC_AVATAR_BUCKET_NAME,

apps/web/src/pages/_app.tsx

@@ -2,7 +2,11 @@ import "~/styles/globals.css";
 
 import type { AppType } from "next/app";
 import { Plus_Jakarta_Sans } from "next/font/google";
+import Script from "next/script";
 import { env } from "next-runtime-env";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
 
 import { ModalProvider } from "~/providers/modal";
 import { PopupProvider } from "~/providers/popup";
@@ -21,6 +25,21 @@ export const metadata = {
 };
 
 const MyApp: AppType = ({ Component, pageProps }) => {
+  const posthogKey = env("NEXT_PUBLIC_POSTHOG_KEY");
+
+  useEffect(() => {
+    if (posthogKey) {
+      posthog.init(posthogKey, {
+        api_host: env("NEXT_PUBLIC_POSTHOG_HOST"),
+        person_profiles: "identified_only",
+        defaults: "2025-05-24",
+        loaded: (posthog) => {
+          if (process.env.NODE_ENV === "development") posthog.debug();
+        },
+      });
+    }
+  }, [posthogKey]);
+
   return (
     <>
       <style jsx global>{`
@@ -32,7 +51,7 @@ const MyApp: AppType = ({ Component, pageProps }) => {
         }
       `}</style>
       {env("NEXT_PUBLIC_UMAMI_ID") && (
-        <script
+        <Script
           defer
           src="https://cloud.umami.is/script.js"
           data-website-id={env("NEXT_PUBLIC_UMAMI_ID")}
@@ -43,7 +62,13 @@ const MyApp: AppType = ({ Component, pageProps }) => {
         <ThemeProvider>
           <ModalProvider>
             <PopupProvider>
-              <Component {...pageProps} />
+              {posthogKey ? (
+                <PostHogProvider client={posthog}>
+                  <Component {...pageProps} />
+                </PostHogProvider>
+              ) : (
+                <Component {...pageProps} />
+              )}
             </PopupProvider>
           </ModalProvider>
         </ThemeProvider>