add posthog

.env.example

@@ -33,4 +33,8 @@ STRIPE_PRICE_ID=""
 STRIPE_WEBHOOK_SECRET=""
 
 # crisp.chat
-NEXT_PUBLIC_CRISP_WEBSITE_ID=04bebe30-8177-46bd-8e3f-cfd7c54e984e
+NEXT_PUBLIC_CRISP_WEBSITE_ID=""
+
+# posthog
+NEXT_PUBLIC_POSTHOG_KEY=""
+NEXT_PUBLIC_POSTHOG_HOST=""

package-lock.json

@@ -35,6 +35,7 @@
         "micro-cors": "^0.1.1",
         "next": "^13.3.0",
         "next-auth": "^4.21.0",
+        "posthog-js": "^1.53.4",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-media-recorder": "^1.6.6",
@@ -4056,6 +4057,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5843,6 +5849,15 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/posthog-js": {
+      "version": "1.53.4",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.53.4.tgz",
+      "integrity": "sha512-aaQ9S+/eDuBl2XTuU/lMyMtX7eeNAQ/+53O0O+I05FwX7e5NDN1nVqlnkMP0pfZlFcnsPaVqm8N3HoYj+b7Eow==",
+      "dependencies": {
+        "fflate": "^0.4.1",
+        "rrweb-snapshot": "^1.1.14"
+      }
+    },
     "node_modules/preact": {
       "version": "10.13.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.2.tgz",
@@ -6269,6 +6284,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rrweb-snapshot": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz",
+      "integrity": "sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -10187,6 +10207,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -11417,6 +11442,15 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "posthog-js": {
+      "version": "1.53.4",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.53.4.tgz",
+      "integrity": "sha512-aaQ9S+/eDuBl2XTuU/lMyMtX7eeNAQ/+53O0O+I05FwX7e5NDN1nVqlnkMP0pfZlFcnsPaVqm8N3HoYj+b7Eow==",
+      "requires": {
+        "fflate": "^0.4.1",
+        "rrweb-snapshot": "^1.1.14"
+      }
+    },
     "preact": {
       "version": "10.13.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.2.tgz",
@@ -11673,6 +11707,11 @@
         "glob": "^7.1.3"
       }
     },
+    "rrweb-snapshot": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz",
+      "integrity": "sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ=="
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",

package.json

@@ -43,6 +43,7 @@
     "micro-cors": "^0.1.1",
     "next": "^13.3.0",
     "next-auth": "^4.21.0",
+    "posthog-js": "^1.53.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-media-recorder": "^1.6.6",

src/env.mjs

@@ -42,6 +42,8 @@ const client = z.object({
   // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(),
   NEXT_PUBLIC_CRISP_WEBSITE_ID: z.string(),
+  NEXT_PUBLIC_POSTHOG_KEY: z.string(),
+  NEXT_PUBLIC_POSTHOG_HOST: z.string(),
 });
 
 /**
@@ -72,6 +74,8 @@ const processEnv = {
   STRIPE_MONTHLY_PRICE_ID: process.env.STRIPE_MONTHLY_PRICE_ID,
   STRIPE_ANNUAL_PRICE_ID: process.env.STRIPE_ANNUAL_PRICE_ID,
   NEXT_PUBLIC_CRISP_WEBSITE_ID: process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID,
+  NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+  NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
 };
 
 // Don't touch the part below

src/pages/_app.tsx

@@ -6,6 +6,20 @@ import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 import CrispChat from "~/components/CrispChat";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { env } from "~/env.mjs";
+
+// Check that PostHog is client-side (used to handle Next.js SSR)
+if (typeof window !== "undefined") {
+  posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: env.NEXT_PUBLIC_POSTHOG_HOST || "https://app.posthog.com",
+    // Enable debug mode in development
+    loaded: (posthog) => {
+      if (process.env.NODE_ENV === "development") posthog.debug();
+    },
+  });
+}
 
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
@@ -13,8 +27,10 @@ const MyApp: AppType<{ session: Session | null }> = ({
 }) => {
   return (
     <SessionProvider session={session}>
+      <PostHogProvider client={posthog}>
         <Component {...pageProps} />
         <CrispChat />
+      </PostHogProvider>
     </SessionProvider>
   );
 };