feat: add posthog analytics

apps/web/package.json

@@ -42,6 +42,7 @@
     "next-runtime-env": "^1.7.2",
     "nextjs-cors": "^2.2.0",
     "pino": "^9.6.0",
+    "posthog-js": "^1.254.0",
     "react": "catalog:react18",
     "react-beautiful-dnd": "^13.1.1",
     "react-contenteditable": "^3.3.7",

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>

docker-compose-old.yml

@@ -73,6 +73,8 @@ services:
       - NEXT_PUBLIC_UMAMI_ID=${NEXT_PUBLIC_UMAMI_ID}
       - NEXT_PUBLIC_ALLOW_CREDENTIALS=${NEXT_PUBLIC_ALLOW_CREDENTIALS}
       - NEXT_PUBLIC_DISABLE_SIGN_UP=${NEXT_PUBLIC_DISABLE_SIGN_UP}
+      - NEXT_PUBLIC_POSTHOG_KEY=${NEXT_PUBLIC_POSTHOG_KEY}
+      - NEXT_PUBLIC_POSTHOG_HOST=${NEXT_PUBLIC_POSTHOG_HOST}
 networks:
   dokploy-network:
     external: true

docker-compose.yml

@@ -87,6 +87,8 @@ services:
       - NEXT_PUBLIC_UMAMI_ID=${NEXT_PUBLIC_UMAMI_ID}
       - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY}
       - STRIPE_WEBHOOK_SECRET=${STRIPE_WEBHOOK_SECRET}
+      - NEXT_PUBLIC_POSTHOG_KEY=${NEXT_PUBLIC_POSTHOG_KEY}
+      - NEXT_PUBLIC_POSTHOG_HOST=${NEXT_PUBLIC_POSTHOG_HOST}
     depends_on:
       - postgres
     restart: unless-stopped

pnpm-lock.yaml

@@ -159,6 +159,9 @@ importers:
       pino:
         specifier: ^9.6.0
         version: 9.6.0
+      posthog-js:
+        specifier: ^1.254.0
+        version: 1.254.0
       react:
         specifier: catalog:react18
         version: 18.3.1
@@ -3064,6 +3067,9 @@ packages:
   core-js-pure@3.39.0:
     resolution: {integrity: sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg==}
 
+  core-js@3.43.0:
+    resolution: {integrity: sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==}
+
   cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
@@ -3664,6 +3670,9 @@ packages:
     resolution: {integrity: sha512-k/2rVBRIRzOeom3wI9jBPaSEvoTSQEW4iM0EveBmBBKFxO8mSyyRWtDlfC3VnEfu0avmjrMzy8/ZFPSe6F71Hw==}
     engines: {node: '>=14.0.0'}
 
+  fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
   figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -5199,6 +5208,20 @@ packages:
     resolution: {integrity: sha512-cDWgoah1Gez9rN3H4165peY9qfpEo+SA61oQv65O3cRUE1pOEoJWwddwcqKE8XZYjbblOJlYDlLV4h67HrEVDg==}
     engines: {node: '>=12'}
 
+  posthog-js@1.254.0:
+    resolution: {integrity: sha512-ISJEsYTIx8FJ0W78q2lfueSrrcuNKCjGfgk9LLuRhAfxRJ+N5ljyGreeEWVrkli2QJBAWje0qYUcregBcIs33A==}
+    peerDependencies:
+      '@rrweb/types': 2.0.0-alpha.17
+      rrweb-snapshot: 2.0.0-alpha.17
+    peerDependenciesMeta:
+      '@rrweb/types':
+        optional: true
+      rrweb-snapshot:
+        optional: true
+
+  preact@10.26.9:
+    resolution: {integrity: sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -6250,6 +6273,9 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
+  web-vitals@4.2.4:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -9375,6 +9401,8 @@ snapshots:
 
   core-js-pure@3.39.0: {}
 
+  core-js@3.43.0: {}
+
   cors@2.8.5:
     dependencies:
       object-assign: 4.1.1
@@ -10079,6 +10107,8 @@ snapshots:
       sharp: 0.33.5
       xml2js: 0.6.2
 
+  fflate@0.4.8: {}
+
   figures@3.2.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -12078,6 +12108,15 @@ snapshots:
   postgres@3.4.5:
     optional: true
 
+  posthog-js@1.254.0:
+    dependencies:
+      core-js: 3.43.0
+      fflate: 0.4.8
+      preact: 10.26.9
+      web-vitals: 4.2.4
+
+  preact@10.26.9: {}
+
   prelude-ls@1.2.1: {}
 
   prettier-plugin-tailwindcss@0.6.9(@ianvs/prettier-plugin-sort-imports@4.4.0(prettier@3.4.2))(prettier@3.4.2):
@@ -13320,6 +13359,8 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
+  web-vitals@4.2.4: {}
+
   webidl-conversions@3.0.1: {}
 
   whatwg-url@5.0.0: