From 9c9f007ecb0d10d54e9613f40805a47425317aa0 Mon Sep 17 00:00:00 2001 From: MarconLP <13001502+MarconLP@users.noreply.github.com> Date: Sat, 22 Apr 2023 06:27:14 +0200 Subject: [PATCH] add posthog --- .env.example | 6 +++++- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/env.mjs | 4 ++++ src/pages/_app.tsx | 20 ++++++++++++++++++-- 5 files changed, 67 insertions(+), 3 deletions(-) diff --git a/.env.example b/.env.example index 26d5a16..830caab 100644 --- a/.env.example +++ b/.env.example @@ -33,4 +33,8 @@ STRIPE_PRICE_ID="" STRIPE_WEBHOOK_SECRET="" # crisp.chat -NEXT_PUBLIC_CRISP_WEBSITE_ID=04bebe30-8177-46bd-8e3f-cfd7c54e984e \ No newline at end of file +NEXT_PUBLIC_CRISP_WEBSITE_ID="" + +# posthog +NEXT_PUBLIC_POSTHOG_KEY="" +NEXT_PUBLIC_POSTHOG_HOST="" \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9b96e1f..eb83625 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 98ff8f5..9067ab7 100644 --- a/package.json +++ b/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", diff --git a/src/env.mjs b/src/env.mjs index 7fe4e37..02dca20 100644 --- a/src/env.mjs +++ b/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 diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a29ace1..bd39139 100644 --- a/src/pages/_app.tsx +++ b/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 ( - - + + + + ); };