Add posthog to builder/manager (#3495)

* add posthog to builder * add ph to manager * fix lock/rebase errors * fix builder
gitcoinco · Jun 18, 2024 · 0ccd4d0 · 0ccd4d0
1 parent 9af0952
commit 0ccd4d0
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 119 deletions.
diff --git a/packages/builder/.env.test b/packages/builder/.env.test
@@ -10,3 +10,6 @@ REACT_APP_PASSPORT_API_KEY="test-key"
 REACT_APP_PASSPORT_AVALANCHE_API_KEY="test-key"
 REACT_APP_PASSPORT_API_COMMUNITY_ID="0000"
 REACT_APP_PASSPORT_API_COMMUNITY_ID_AVALANCHE="0000"
+
+REACT_APP_POSTHOG_KEY=""
+REACT_APP_POSTHOG_HOST=""
diff --git a/packages/builder/package.json b/packages/builder/package.json
@@ -66,6 +66,7 @@
     "os-browserify": "^0.3.0",
     "pnpm": "7",
     "postcss": "^8.4.14",
+    "posthog-js": "^1.132.0",
     "process": "^0.11.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/packages/builder/src/index.tsx b/packages/builder/src/index.tsx
@@ -1,6 +1,7 @@
 import "./browserPatches";
 
 import { QueryClientProvider } from "@tanstack/react-query";
+import { PostHogProvider } from "posthog-js/react";
 import { ChakraProvider } from "@chakra-ui/react";
 import { datadogRum } from "@datadog/browser-rum";
 import { ReduxRouter } from "@lagunovsky/redux-react-router";
@@ -31,6 +32,7 @@ import "./styles/index.css";
 import initDatadog from "./utils/datadog";
 import queryClient, { config } from "./utils/wagmi";
 import initTagmanager from "./tagmanager";
+import { initPosthog } from "./utils/posthog";
 
 const dataLayerConfig = new DataLayer({
   search: {
@@ -57,6 +59,9 @@ initTagmanager();
 
 datadogRum.addAction("Init");
 
+// Initialize posthog
+const posthog = initPosthog();
+
 const queryString = new URLSearchParams(window?.location?.search);
 
 // Twitter oauth will attach code & state in oauth procedure
@@ -103,44 +108,52 @@ if (pathname && pathname !== window.location.pathname) {
 
 root.render(
   <ErrorBoundary>
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider>
-          <ChakraProvider resetCSS={false}>
-            <Provider store={store}>
-              <AlloWrapper>
-                <DataLayerProvider client={dataLayerConfig}>
-                  <ReduxRouter history={history} store={store}>
-                    <Layout>
-                      <Routes>
-                        <Route
-                          path={slugs.root}
-                          element={<Navigate to={slugs.grants} />}
-                        />
-                        <Route path={slugs.grants} element={<ProjectsList />} />
-                        <Route path={slugs.project} element={<Project />} />
-                        <Route path={slugs.newGrant} element={<NewProject />} />
-                        <Route path={slugs.edit} element={<EditProject />} />
-                        <Route path={slugs.round} element={<RoundShow />} />
-                        <Route
-                          path={slugs.roundApplication}
-                          element={<RoundApply />}
-                        />
-                        <Route
-                          path={slugs.roundApplicationView}
-                          element={<ViewApplication />}
-                        />
-                        <Route path="*" element={<PageNotFound />} />
-                      </Routes>
-                    </Layout>
-                  </ReduxRouter>
-                </DataLayerProvider>
-              </AlloWrapper>
-            </Provider>
-          </ChakraProvider>
-        </RainbowKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <PostHogProvider client={posthog}>
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <RainbowKitProvider>
+            <ChakraProvider resetCSS={false}>
+              <Provider store={store}>
+                <AlloWrapper>
+                  <DataLayerProvider client={dataLayerConfig}>
+                    <ReduxRouter history={history} store={store}>
+                      <Layout>
+                        <Routes>
+                          <Route
+                            path={slugs.root}
+                            element={<Navigate to={slugs.grants} />}
+                          />
+                          <Route
+                            path={slugs.grants}
+                            element={<ProjectsList />}
+                          />
+                          <Route path={slugs.project} element={<Project />} />
+                          <Route
+                            path={slugs.newGrant}
+                            element={<NewProject />}
+                          />
+                          <Route path={slugs.edit} element={<EditProject />} />
+                          <Route path={slugs.round} element={<RoundShow />} />
+                          <Route
+                            path={slugs.roundApplication}
+                            element={<RoundApply />}
+                          />
+                          <Route
+                            path={slugs.roundApplicationView}
+                            element={<ViewApplication />}
+                          />
+                          <Route path="*" element={<PageNotFound />} />
+                        </Routes>
+                      </Layout>
+                    </ReduxRouter>
+                  </DataLayerProvider>
+                </AlloWrapper>
+              </Provider>
+            </ChakraProvider>
+          </RainbowKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </PostHogProvider>
   </ErrorBoundary>
 );
 

diff --git a/packages/builder/src/utils/posthog.ts b/packages/builder/src/utils/posthog.ts
@@ -0,0 +1,21 @@
+import posthog from "posthog-js";
+
+export const initPosthog = () => {
+  console.log("Initializing Posthog");
+  if (process.env.REACT_APP_POSTHOG_KEY && process.env.REACT_APP_POSTHOG_HOST) {
+    posthog.init(process.env.REACT_APP_POSTHOG_KEY, {
+      api_host: process.env.REACT_APP_POSTHOG_HOST,
+      session_recording: {
+        maskTextSelector: '[data-testid="rk-account-button"]',
+      },
+    });
+
+    console.log("Posthog initialized");
+
+    return posthog;
+  }
+
+  console.log("Posthog not initialized");
+
+  return undefined;
+};
diff --git a/packages/round-manager/.env.test b/packages/round-manager/.env.test
@@ -4,4 +4,6 @@ REACT_APP_PINATA_BASE_URL=http://localhost
 REACT_APP_PASSPORT_API_KEY="test-key"
 REACT_APP_PASSPORT_AVALANCHE_API_KEY="test-key"
 REACT_APP_PASSPORT_API_COMMUNITY_ID="0000"
-REACT_APP_PASSPORT_API_COMMUNITY_ID_AVALANCHE="0000"
+REACT_APP_PASSPORT_API_COMMUNITY_ID_AVALANCHE="0000"
+REACT_APP_POSTHOG_KEY=""
+REACT_APP_POSTHOG_HOST=""
diff --git a/packages/round-manager/package.json b/packages/round-manager/package.json
@@ -74,6 +74,7 @@
     "moment": "^2.29.3",
     "os-browserify": "^0.3.0",
     "papaparse": "^5.4.1",
+    "posthog-js": "^1.138.1",
     "process": "^0.11.10",
     "react": "^18.1.0",
     "react-datetime": "^3.1.1",

diff --git a/packages/round-manager/src/index.tsx b/packages/round-manager/src/index.tsx
@@ -30,11 +30,13 @@ import CreateRound from "./features/round/CreateRoundPage";
 import ViewApplication from "./features/round/ViewApplicationPage";
 import ViewRoundPage from "./features/round/ViewRoundPage";
 import { initSentry } from "./sentry";
+import { PostHogProvider } from "posthog-js/react";
 import { UpdateRoundProvider } from "./context/round/UpdateRoundContext";
 import { UpdateRolesProvider } from "./context/round/UpdateRolesContext";
 import AlloWrapper from "./features/api/AlloWrapper";
 import { DataLayer, DataLayerProvider } from "data-layer";
 import { getConfig } from "common/src/config";
+import { initPosthog } from "./posthog";
 
 // Initialize sentry
 initSentry();
@@ -45,6 +47,9 @@ initDatadog();
 // Initialize tagmanager
 initTagmanager();
 
+// Initialize PostHog
+const posthog = initPosthog();
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
@@ -63,91 +68,96 @@ const dataLayerConfig = new DataLayer({
 
 root.render(
   <React.StrictMode>
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider>
-          <AlloWrapper>
-            <DataLayerProvider client={dataLayerConfig}>
-              <HashRouter>
-                <Routes>
-                  {/* Protected Routes */}
-                  <Route element={<Auth />}>
-                    {/* Default Route */}
-                    <Route
-                      path="/"
-                      element={
-                        <ReadProgramProvider>
-                          <Program />
-                        </ReadProgramProvider>
-                      }
-                    />
-
-                    {/* Round Routes */}
-                    <Route
-                      path="/round/create"
-                      element={
-                        <ReadProgramProvider>
-                          <CreateRound />
-                        </ReadProgramProvider>
-                      }
-                    />
-                    <Route
-                      path="/round/:id"
-                      element={
-                        <RoundProvider>
-                          <BulkUpdateGrantApplicationProvider>
-                            <FinalizeRoundProvider>
-                              <FundContractProvider>
-                                <ReclaimFundsProvider>
-                                  <UpdateRoundProvider>
-                                    <UpdateRolesProvider>
-                                      <ViewRoundPage />
-                                    </UpdateRolesProvider>
-                                  </UpdateRoundProvider>
-                                </ReclaimFundsProvider>
-                              </FundContractProvider>
-                            </FinalizeRoundProvider>
-                          </BulkUpdateGrantApplicationProvider>
-                        </RoundProvider>
-                      }
-                    />
-                    <Route
-                      path="/round/:roundId/application/:id"
-                      element={
-                        <RoundProvider>
-                          <BulkUpdateGrantApplicationProvider>
-                            <ViewApplication />
-                          </BulkUpdateGrantApplicationProvider>
-                        </RoundProvider>
-                      }
-                    />
+    <PostHogProvider client={posthog}>
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <RainbowKitProvider>
+            <AlloWrapper>
+              <DataLayerProvider client={dataLayerConfig}>
+                <HashRouter>
+                  <Routes>
+                    {/* Protected Routes */}
+                    <Route element={<Auth />}>
+                      {/* Default Route */}
+                      <Route
+                        path="/"
+                        element={
+                          <ReadProgramProvider>
+                            <Program />
+                          </ReadProgramProvider>
+                        }
+                      />
 
-                    {/* Program Routes */}
-                    <Route path="/program/create" element={<CreateProgram />} />
-                    <Route
-                      path="/program/:id"
-                      element={
-                        <RoundProvider>
+                      {/* Round Routes */}
+                      <Route
+                        path="/round/create"
+                        element={
                           <ReadProgramProvider>
-                            <ViewProgram />
+                            <CreateRound />
                           </ReadProgramProvider>
-                        </RoundProvider>
-                      }
-                    />
+                        }
+                      />
+                      <Route
+                        path="/round/:id"
+                        element={
+                          <RoundProvider>
+                            <BulkUpdateGrantApplicationProvider>
+                              <FinalizeRoundProvider>
+                                <FundContractProvider>
+                                  <ReclaimFundsProvider>
+                                    <UpdateRoundProvider>
+                                      <UpdateRolesProvider>
+                                        <ViewRoundPage />
+                                      </UpdateRolesProvider>
+                                    </UpdateRoundProvider>
+                                  </ReclaimFundsProvider>
+                                </FundContractProvider>
+                              </FinalizeRoundProvider>
+                            </BulkUpdateGrantApplicationProvider>
+                          </RoundProvider>
+                        }
+                      />
+                      <Route
+                        path="/round/:roundId/application/:id"
+                        element={
+                          <RoundProvider>
+                            <BulkUpdateGrantApplicationProvider>
+                              <ViewApplication />
+                            </BulkUpdateGrantApplicationProvider>
+                          </RoundProvider>
+                        }
+                      />
+
+                      {/* Program Routes */}
+                      <Route
+                        path="/program/create"
+                        element={<CreateProgram />}
+                      />
+                      <Route
+                        path="/program/:id"
+                        element={
+                          <RoundProvider>
+                            <ReadProgramProvider>
+                              <ViewProgram />
+                            </ReadProgramProvider>
+                          </RoundProvider>
+                        }
+                      />
 
-                    {/* Access Denied */}
-                    <Route path="/access-denied" element={<AccessDenied />} />
+                      {/* Access Denied */}
+                      <Route path="/access-denied" element={<AccessDenied />} />
 
-                    {/* 404 */}
-                    <Route path="*" element={<NotFound />} />
-                  </Route>
-                </Routes>
-              </HashRouter>
-            </DataLayerProvider>
-          </AlloWrapper>
-        </RainbowKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+                      {/* 404 */}
+                      <Route path="*" element={<NotFound />} />
+                    </Route>
+                  </Routes>
+                </HashRouter>
+              </DataLayerProvider>
+            </AlloWrapper>
+          </RainbowKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </PostHogProvider>
   </React.StrictMode>
 );
 

diff --git a/packages/round-manager/src/posthog.ts b/packages/round-manager/src/posthog.ts
@@ -0,0 +1,21 @@
+import posthog from "posthog-js";
+
+export const initPosthog = () => {
+  console.log("Initializing Posthog");
+  if (process.env.REACT_APP_POSTHOG_KEY && process.env.REACT_APP_POSTHOG_HOST) {
+    posthog.init(process.env.REACT_APP_POSTHOG_KEY, {
+      api_host: process.env.REACT_APP_POSTHOG_HOST,
+      session_recording: {
+        maskTextSelector: '[data-testid="rk-account-button"]',
+      },
+    });
+
+    console.log("Posthog initialized");
+
+    return posthog;
+  }
+
+  console.log("Posthog not initialized");
+
+  return undefined;
+};