feat: posthog

apps/frontend/src/app/layout.tsx

@@ -11,6 +11,7 @@ import PlausibleProvider from 'next-plausible';
 import clsx from 'clsx';
 import { VariableContextComponent } from '@gitroom/react/helpers/variable.context';
 import { Fragment } from 'react';
+import { PHProvider } from '@gitroom/react/helpers/posthog';
 
 const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] });
 
@@ -44,7 +45,12 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
           <Plausible
             domain={!!process.env.IS_GENERAL ? 'postiz.com' : 'gitroom.com'}
           >
-            <LayoutContext>{children}</LayoutContext>
+            <PHProvider
+              key={process.env.NEXT_PUBLIC_POSTHOG_KEY}
+              host={process.env.NEXT_PUBLIC_POSTHOG_HOST}
+            >
+              <LayoutContext>{children}</LayoutContext>
+            </PHProvider>
           </Plausible>
         </VariableContextComponent>
       </body>

libraries/helpers/src/utils/use.fire.events.ts

@@ -1,14 +1,19 @@
 import { usePlausible } from 'next-plausible';
 import { useCallback } from 'react';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
+import { usePostHog } from 'posthog-js/react';
 
 export const useFireEvents = () => {
   const { billingEnabled } = useVariables();
   const plausible = usePlausible();
+  const posthog = usePostHog();
+
   return useCallback((name: string, props?: any) => {
     if (!billingEnabled) {
       return;
     }
+
+    posthog.capture(name, props);
     plausible(name, { props });
   }, []);
 };

libraries/react-shared-libraries/src/helpers/posthog.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+import { FC, ReactNode, useEffect } from 'react';
+
+export const PHProvider: FC<{
+  children: ReactNode;
+  key?: string;
+  host?: string;
+}> = ({ children, key, host }) => {
+  useEffect(() => {
+    if (!key || !host) {
+      return;
+    }
+
+    posthog.init(key, {
+      api_host: host,
+      person_profiles: 'identified_only',
+      capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+    });
+  }, []);
+
+  if (!key || !host) {
+    return <>{children}</>;
+  }
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+};

package-lock.json

@@ -99,6 +99,7 @@
         "nx": "19.7.2",
         "openai": "^4.47.1",
         "polotno": "^2.10.5",
+        "posthog-js": "^1.178.0",
         "react": "18.3.1",
         "react-colorful": "^5.6.1",
         "react-dnd": "^16.0.1",
@@ -17001,6 +17002,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.38.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
@@ -32488,6 +32499,22 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/posthog-js": {
+      "version": "1.178.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.178.0.tgz",
+      "integrity": "sha512-ILD4flNh72d5dycc4ZouKORlaVr+pDzl5TlZr1JgP0NBAoduHjhE7XZYwk7zdYkry7u0qAIpfv2306zJCW2vGg==",
+      "dependencies": {
+        "core-js": "^3.38.1",
+        "fflate": "^0.4.8",
+        "preact": "^10.19.3",
+        "web-vitals": "^4.2.0"
+      }
+    },
+    "node_modules/posthog-js/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/preact": {
       "version": "10.24.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.2.tgz",
@@ -38817,6 +38844,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/web-vitals": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",

package.json

@@ -121,6 +121,7 @@
     "nx": "19.7.2",
     "openai": "^4.47.1",
     "polotno": "^2.10.5",
+    "posthog-js": "^1.178.0",
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dnd": "^16.0.1",