FEAT - Integrated PostHog (#169)

Integrated PostHog

frontend/package.json

@@ -28,6 +28,7 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.45",
     "pdfjs-dist": "^3.4.120",
+    "posthog-js": "^1.116.5",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import { THEME } from "./helpers/GetStaticData.js";
 import { Router } from "./routes/Router.jsx";
 import { useAlertStore } from "./store/alert-store.js";
 import { useSessionStore } from "./store/session-store.js";
+import PostHogPageviewTracker from "./PostHogPageviewTracker.js";
 
 function App() {
   const [messageApi, contextHolder] = message.useMessage();
@@ -32,6 +33,7 @@ function App() {
       }}
     >
       <BrowserRouter>
+        <PostHogPageviewTracker />
         {contextHolder}
         <Router />
       </BrowserRouter>

frontend/src/PostHogPageviewTracker.js

@@ -0,0 +1,18 @@
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const PostHogPageviewTracker = () => {
+  const location = useLocation();
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (posthog) {
+      posthog.capture("$pageview");
+    }
+  }, [location, posthog]);
+
+  return null;
+};
+
+export default PostHogPageviewTracker;

frontend/src/index.js

@@ -1,25 +1,35 @@
-// import React from "react";
+import React from "react";
 import ReactDOM from "react-dom/client";
 
 import { Logo64 } from "./assets";
 import { LazyLoader } from "./components/widgets/lazy-loader/LazyLoader.jsx";
 import { SocketProvider } from "./helpers/SocketContext.js";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 import "./index.css";
 
+const API_KEY = "phc_f1kLKkipCK3kBtA9bT0SfAChvFrlUxYSMD91GBNbwr1";
+const API_HOST = "https://app.posthog.com";
+posthog.init(API_KEY, {
+  api_host: API_HOST,
+  capture_pageview: false,
+});
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  // <React.StrictMode>
-
-  <SocketProvider>
-    <LazyLoader
-      loader={
-        <div className="center">
-          <Logo64 />
-        </div>
-      }
-      component={() => import("./App.jsx")}
-      componentName="App"
-    />
-  </SocketProvider>
-  // </React.StrictMode>
+  <React.StrictMode>
+    <PostHogProvider client={posthog}>
+      <SocketProvider>
+        <LazyLoader
+          loader={
+            <div className="center">
+              <Logo64 />
+            </div>
+          }
+          component={() => import("./App.jsx")}
+          componentName="App"
+        />
+      </SocketProvider>
+    </PostHogProvider>
+  </React.StrictMode>
 );