Feat : Added frontend telemetry support

apps/frontend/src/app/components/Header/index.js

@@ -4,8 +4,9 @@ import { Space } from "antd";
 import { useNavigate } from "react-router-dom";
 import "app/styles/header.css";
 import { Row, Col, Breadcrumb, Button } from "antd";
-
+import Event from "app/constants/PosthogEvent";
 import { NavLink, Link } from "react-router-dom";
+import { usePostHog } from "posthog-js/react";
 
 // TO DO: Shift these to constants file
 const profile = [
@@ -39,12 +40,14 @@ const toggler = [
 ];
 
 function Header({ name, subName, onPress }) {
+  const posthog = usePostHog();
   const local_info = JSON.parse(localStorage.getItem("user-info"));
   const navigate = useNavigate();
 
   useEffect(() => window.scrollTo(0, 0));
 
   function logout() {
+    posthog.capture(Event.SIGNED_OUT,{user:local_info});  // capture the signed out events
     localStorage.clear();
     navigate("/signup");
   }

apps/frontend/src/app/constants/PosthogEvent/index.js

@@ -0,0 +1,8 @@
+const Event = {
+    SIGNED_OUT:"User Signed Out",
+    SIGNED_IN :"User Signed In",
+    SIGNED_UP: "User signed Up",
+    BULK_LINK_CREATION :"Bulk Links Created",
+    LINK_CREATION :"Link Created",
+}
+export default Event;

apps/frontend/src/app/pages/Auth/SignIn/index.js

@@ -1,6 +1,5 @@
 // prettier-ignore
 import { Layout, Menu, Button, Row, Col, Typography, Form, Input, Switch } from "antd";
-
 import signinbg from "app/assets/images/img-signin.jpg";
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -9,6 +8,8 @@ import { onFinish, onFinishFailed } from "app/utils/outputResponse.js";
 import Navbar from "app/components/Navbar";
 import Footer from "app/components/Footer";
 import { mockUser } from "app/constants/mockData"; // TODO: Remove this line
+import { usePostHog } from "posthog-js/react";
+import Event from "app/constants/PosthogEvent";
 function onChange(checked) {
   console.log(`switch to ${checked}`);
 }
@@ -18,7 +19,7 @@ const { Content } = Layout;
 function SignIn() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-
+  const posthog = usePostHog();
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -43,7 +44,13 @@ function SignIn() {
         // Set Local Storage
         localStorage.setItem("user-info", JSON.stringify(result));
       */
-      navigate("/dashboard");
+      // add telemetry for Sign In
+      posthog.capture(Event.SIGNED_IN, {
+        // To DO: Add user info here after completing the api integration
+        email: email,
+      });
+      console.log("User Signed In");
+      navigate("/dashboard"); 
     } catch (e) {
       console.log(e);
     }

apps/frontend/src/app/pages/Auth/SignUp/index.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Navigate, useNavigate, Link } from "react-router-dom";
+// import posthog from 'posthog-js';
 
 // prettier-ignore
 import { Layout, Menu, Button, Typography, Form, Input,Checkbox,Card } from "antd";
@@ -13,10 +14,14 @@ import routes from "app/constants/Routes";
 const { Title } = Typography;
 const { Content } = Layout;
 import Footer from "app/components/Footer";
-
+import { usePostHog } from "posthog-js/react";
+import Event from "app/constants/PosthogEvent";
 function SignUp() {
   const history = useNavigate();
+  const posthog = usePostHog(); // posthog instance
   useEffect(() => {
+    // console.log(posthog);
+    // posthog.capture('$pageview');  // sent the pageview to posthog
     if (localStorage.getItem("user-info")) {
       history.push("/dashboard");
     }
@@ -33,13 +38,22 @@ function SignUp() {
       email: email,
       password: password,
     });
+
+    // sent the signup event to posthog
+    posthog.capture(Event.SIGNED_UP, {   
+         name:name,
+         email:email
+    }); 
 
     try {
       // Get Response
       const result = await apiUtil.getResponse(
         routes.AUTH_BASE_URL + "/user/registration", // TO DO: shift to constants
         reqBody
       );
+
+      // posthog.capture('User signed Up', { userInfo: result }); // sent the signup event to posthog
+
       // Set Local Storage
       localStorage.setItem("user-info", JSON.stringify(result));
       // Navigate to Dashboard

apps/frontend/src/app/pages/CreateBulkLink/index.js

@@ -6,11 +6,13 @@ import { Table } from "antd";
 import { nanoid } from "nanoid";
 import { Excel } from "antd-table-saveas-excel";
 import { Form, Button } from "antd";
-
+import { usePostHog } from "posthog-js/react";
+import Event from "app/constants/PosthogEvent";
 function Bulk() {
   const [form] = Form.useForm();
   const baseUrl = " https://yaus.xyz";
   const [data, setdata] = useState([]);
+  const posthog = usePostHog();
   const [excelData, setExcelData] = useState(null);
   const len = 0;
   const [state, setState] = useState({
@@ -21,6 +23,7 @@ function Bulk() {
   });
 
   const handleSubmit = (e) => {
+    let bulkLinkData = [];
     for (let i = 0; i < data.length; i++) {
       const customId = nanoid(6);
       const userData = {
@@ -35,6 +38,7 @@ function Bulk() {
         "Access-Control-Allow-Origin": "*",
       };
       console.log(userData);
+      bulkLinkData.push(userData);
       /*  console.log(baseUrl+{customHashId});   */
       axios
         .post(`${baseUrl}/register`, userData, { headers: headers })
@@ -46,6 +50,7 @@ function Bulk() {
           console.log(data);
         });
     }
+    posthog.capture(Event.BULK_LINK_CREATION , {LinksData:bulkLinkData});
   };
 
   const onDownload = () => {

apps/frontend/src/app/pages/CreateLink/index.js

@@ -12,6 +12,8 @@ import FormAnalyticsPage from "app/pages/Form/LinkAnalyticsForm";
 import FormRedirectPage from "app/pages/Form/LinkRedirectsForm";
 import FormLinkDataPage from "app/pages/Form/LinkDataForm";
 import FormTagsPage from "app/pages/Form/LinkTagsForm";
+import { usePostHog } from "posthog-js/react";
+import Event from "app/constants/PosthogEvent";
 const { Footer } = Layout;
 const { Step } = Steps;
 const { Meta } = Card;
@@ -20,7 +22,7 @@ const FormDemo = () => {
   const baseUrl = " https://yaus.xyz";
   const [formLayout, setFormLayout] = useState("vertical");
   const [modal1Visible, setModal1Visible] = useState(false);
-
+  const posthog = usePostHog();
   const [state, setState] = useState({
     userID: "0fe6ff38-fc46-11ec-b939-0242ac120001",
     url: "",
@@ -42,11 +44,12 @@ const FormDemo = () => {
       Authorization: "JWT fefege...",
       "Access-Control-Allow-Origin": "*",
     };
+    posthog.capture(Event.LINK_CREATION,{userData:userData}); // capture the link creation events
     console.log(userData);
     axios
       .post(`${baseUrl}/register`, userData, { headers: headers })
       .then((response) => {
-        console.log(response.status);
+        console.log("response"+response.status);
         console.log(response.data.token);
         console.log(`${baseUrl}/${state.customHashId}`);
       });

apps/frontend/src/app/pages/Form/LinkTagsForm/index.js

@@ -18,6 +18,7 @@ import { InfoCircleOutlined } from "@ant-design/icons";
 import Interaction from "app/components/Interaction";
 import { LinkPreview } from "@dhaiwat10/react-link-preview";
 import { nanoid } from "nanoid";
+import { usePostHog } from "posthog-js/react";
 const { Meta } = Card;
 const { Footer } = Layout;
 const props = {
@@ -40,7 +41,7 @@ const props = {
 function FormTagsPage() {
   const [selectedMenuItem, setSelectedMenuItem] = useState("useUrl");
   const [isModalVisible, setIsModalVisible] = useState(false);
-
+  const posthog  = usePostHog();
   const [state, setState] = useState({
     userID: "0fe6ff38-fc46-11ec-b939-0242ac120001",
     url: "",

apps/frontend/src/main.tsx

@@ -1,19 +1,36 @@
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { PostHogProvider} from 'posthog-js/react'
+import posthog from 'posthog-js'
+
 import "antd/dist/antd.css";
 import "app/styles/main.css";
 import "app/styles/responsive.css";
 
 import App from "app/app";
 
+const posthogKey = process.env['NX_REACT_APP_PUBLIC_POSTHOG_KEY'];
+const posthogHost = process.env['NX_REACT_APP_PUBLIC_POSTHOG_HOST'];
+
+if (posthogKey && posthogHost) {
+  posthog.init(posthogKey, {
+    api_host: posthogHost,
+  });
+} else {
+  console.error("Missing PostHog environment variables");
+}
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
+
 root.render(
   <StrictMode>
     <BrowserRouter>
+    <PostHogProvider client={posthog}>
       <App />
+    </PostHogProvider>
     </BrowserRouter>
   </StrictMode>
 );

package.json

@@ -16,28 +16,8 @@
     "@ant-design/charts": "^1.4.2",
     "@ant-design/icons": "^4.6.2",
     "@ant-design/plots": "^1.1.1",
-    "@dhaiwat10/react-link-preview": "^1.14.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "antd": "^4.16.6",
-    "antd-onboarding": "^0.1.0",
-    "antd-table-saveas-excel": "^2.2.1",
-    "apexcharts": "^3.27.1",
-    "axios": "^0.27.2",
-    "cors": "^2.8.5",
-    "express": "^4.18.1",
-    "install": "^0.13.0",
-    "nanoid": "^4.0.0",
-    "react-apexcharts": "^1.3.9",
-    "react-axios": "^2.0.6",
-    "react-export-table-to-excel": "^1.0.3",
-    "react-script": "^2.0.5",
-    "react-scripts": "^4.0.3",
-    "styled-components": "^5.3.0",
-    "web-vitals": "^1.1.2",
-    "xlsx": "^0.18.5",
     "@apollo/client": "^3.6.5",
+    "@dhaiwat10/react-link-preview": "^1.14.2",
     "@golevelup/ts-jest": "^0.3.3",
     "@liaoliaots/nestjs-redis": "^8.2.1",
     "@nestjs/axios": "^0.0.8",
@@ -51,32 +31,53 @@
     "@nestjs/swagger": "^5.2.1",
     "@nestjs/terminus": "^8.0.6",
     "@prisma/client": "^3.14.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
     "@types/cron": "^2.0.0",
     "@types/uuid": "^8.3.4",
     "amqp-connection-manager": "^4.1.3",
     "amqplib": "^0.9.1",
+    "antd": "^4.16.6",
+    "antd-onboarding": "^0.1.0",
+    "antd-table-saveas-excel": "^2.2.1",
+    "apexcharts": "^3.27.1",
+    "axios": "^0.27.2",
     "core-js": "^3.6.5",
+    "cors": "^2.8.5",
+    "express": "^4.18.1",
     "fastify-swagger": "^5.2.0",
     "graphql": "^16.5.0",
     "hashids": "^2.2.10",
     "husky": "^8.0.1",
+    "install": "^0.13.0",
     "ioredis": "^5.0.6",
     "isomorphic-fetch": "^3.0.0",
+    "nanoid": "^4.0.0",
     "nestjs-posthog": "^1.1.2",
     "nestjs-redis": "^1.3.3",
+    "posthog-js": "^1.76.0",
     "posthog-node": "^1.3.0",
     "prisma": "^3.14.0",
     "prop-types": "^15.8.1",
     "ra-data-hasura": "^0.4.1",
     "ra-data-json-server": "^4.1.0",
     "react": "18.1.0",
     "react-admin": "^4.1.0",
+    "react-apexcharts": "^1.3.9",
+    "react-axios": "^2.0.6",
     "react-dom": "18.1.0",
+    "react-export-table-to-excel": "^1.0.3",
     "react-router-dom": "6.3.0",
+    "react-script": "^2.0.5",
+    "react-scripts": "^4.0.3",
     "reflect-metadata": "^0.1.13",
     "regenerator-runtime": "0.13.7",
     "rxjs": "^7.0.0",
-    "tslib": "^2.3.0"
+    "styled-components": "^5.3.0",
+    "tslib": "^2.3.0",
+    "web-vitals": "^1.1.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@nestjs/schematics": "^8.0.0",

yarn.lock

@@ -10921,6 +10921,11 @@ fecha@~4.2.0:
   resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd"
   integrity sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==
 
+fflate@^0.4.1:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -17141,6 +17146,13 @@ postcss@^8.2.13, postcss@^8.3.5, postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+posthog-js@^1.76.0:
+  version "1.76.0"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.76.0.tgz#f0f052edbe941c5af848406f921065eeaa8eaea5"
+  integrity sha512-C/+M+uVQ+CAEUz0ZAENMobw0fYcXGNomUXd8irelT7cQ9fsDSRgfyF5wwqaX0UXcIBD+iFXTOtK93T8NnFODyg==
+  dependencies:
+    fflate "^0.4.1"
+
 posthog-node@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/posthog-node/-/posthog-node-1.3.0.tgz#804ed2f213a2f05253f798bf9569d55a9cad94f7"