From 84ed3a27941891c14c11f07a14f3b328ce8fa968 Mon Sep 17 00:00:00 2001 From: Rishabh Jain Date: Wed, 16 Aug 2023 01:59:13 +0530 Subject: [PATCH 1/3] Feat : Added frontend telemetry support --- .../src/app/pages/Auth/SignIn/index.js | 12 +++-- .../src/app/pages/Auth/SignUp/index.js | 14 ++++++ apps/frontend/src/main.tsx | 17 +++++++ package.json | 45 ++++++++++--------- yarn.lock | 12 +++++ 5 files changed, 75 insertions(+), 25 deletions(-) diff --git a/apps/frontend/src/app/pages/Auth/SignIn/index.js b/apps/frontend/src/app/pages/Auth/SignIn/index.js index 71aff1b2..6d58cf9b 100644 --- a/apps/frontend/src/app/pages/Auth/SignIn/index.js +++ b/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,7 @@ 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"; function onChange(checked) { console.log(`switch to ${checked}`); } @@ -18,7 +18,7 @@ const { Content } = Layout; function SignIn() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - + const posthog = usePostHog(); const navigate = useNavigate(); useEffect(() => { @@ -43,7 +43,13 @@ function SignIn() { // Set Local Storage localStorage.setItem("user-info", JSON.stringify(result)); */ - navigate("/dashboard"); + // add telemetry for Sign In + posthog.capture("User 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); } diff --git a/apps/frontend/src/app/pages/Auth/SignUp/index.js b/apps/frontend/src/app/pages/Auth/SignUp/index.js index 7f61c9d6..7c54598b 100644 --- a/apps/frontend/src/app/pages/Auth/SignUp/index.js +++ b/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"; 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,6 +38,12 @@ function SignUp() { email: email, password: password, }); + + // sent the signup event to posthog + posthog.capture('User signed Up', { + name:name, + email:email + }); try { // Get Response @@ -40,6 +51,9 @@ function SignUp() { 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 diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx index 86d8a240..d43ac3b9 100644 --- a/apps/frontend/src/main.tsx +++ b/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( + + ); diff --git a/package.json b/package.json index 82f8329d..e4d94b5f 100644 --- a/package.json +++ b/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,19 +31,32 @@ "@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", @@ -71,12 +64,20 @@ "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", diff --git a/yarn.lock b/yarn.lock index e3b9f1aa..85a0a374 100644 --- a/yarn.lock +++ b/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" From d3b5878f9558bfc4288c3aba6ab0a5fcce6b380e Mon Sep 17 00:00:00 2001 From: Rishabh Jain Date: Thu, 17 Aug 2023 22:10:54 +0530 Subject: [PATCH 2/3] Feat : Added capture events to Forms --- apps/frontend/src/app/components/Header/index.js | 3 +++ apps/frontend/src/app/pages/CreateBulkLink/index.js | 5 +++++ apps/frontend/src/app/pages/CreateLink/index.js | 6 ++++-- apps/frontend/src/app/pages/Form/LinkTagsForm/index.js | 3 ++- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/apps/frontend/src/app/components/Header/index.js b/apps/frontend/src/app/components/Header/index.js index a869725e..1ba32257 100644 --- a/apps/frontend/src/app/components/Header/index.js +++ b/apps/frontend/src/app/components/Header/index.js @@ -6,6 +6,7 @@ import "app/styles/header.css"; import { Row, Col, Breadcrumb, Button } from "antd"; 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("User Signed Out",{user:local_info}); // capture the signed out events localStorage.clear(); navigate("/signup"); } diff --git a/apps/frontend/src/app/pages/CreateBulkLink/index.js b/apps/frontend/src/app/pages/CreateBulkLink/index.js index a050a5f7..b6290674 100644 --- a/apps/frontend/src/app/pages/CreateBulkLink/index.js +++ b/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"; 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("Bulk Links Created" , {LinksData:bulkLinkData}); }; const onDownload = () => { diff --git a/apps/frontend/src/app/pages/CreateLink/index.js b/apps/frontend/src/app/pages/CreateLink/index.js index 00cd3580..e194272c 100644 --- a/apps/frontend/src/app/pages/CreateLink/index.js +++ b/apps/frontend/src/app/pages/CreateLink/index.js @@ -12,6 +12,7 @@ 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"; const { Footer } = Layout; const { Step } = Steps; const { Meta } = Card; @@ -20,7 +21,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 +43,12 @@ const FormDemo = () => { Authorization: "JWT fefege...", "Access-Control-Allow-Origin": "*", }; + posthog.capture("Link created",{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}`); }); diff --git a/apps/frontend/src/app/pages/Form/LinkTagsForm/index.js b/apps/frontend/src/app/pages/Form/LinkTagsForm/index.js index 1e78c236..36799a11 100644 --- a/apps/frontend/src/app/pages/Form/LinkTagsForm/index.js +++ b/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: "", From deb1b960b039eee0ecf5bfb0c4f476dbc612979c Mon Sep 17 00:00:00 2001 From: Rishabh Jain Date: Mon, 4 Sep 2023 23:16:27 +0530 Subject: [PATCH 3/3] Chores : Shifted Posthog event to constants --- apps/frontend/src/app/components/Header/index.js | 4 ++-- apps/frontend/src/app/constants/PosthogEvent/index.js | 8 ++++++++ apps/frontend/src/app/pages/Auth/SignIn/index.js | 3 ++- apps/frontend/src/app/pages/Auth/SignUp/index.js | 4 ++-- apps/frontend/src/app/pages/CreateBulkLink/index.js | 4 ++-- apps/frontend/src/app/pages/CreateLink/index.js | 3 ++- 6 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 apps/frontend/src/app/constants/PosthogEvent/index.js diff --git a/apps/frontend/src/app/components/Header/index.js b/apps/frontend/src/app/components/Header/index.js index 1ba32257..1c30d043 100644 --- a/apps/frontend/src/app/components/Header/index.js +++ b/apps/frontend/src/app/components/Header/index.js @@ -4,7 +4,7 @@ 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"; @@ -47,7 +47,7 @@ function Header({ name, subName, onPress }) { useEffect(() => window.scrollTo(0, 0)); function logout() { - posthog.capture("User Signed Out",{user:local_info}); // capture the signed out events + posthog.capture(Event.SIGNED_OUT,{user:local_info}); // capture the signed out events localStorage.clear(); navigate("/signup"); } diff --git a/apps/frontend/src/app/constants/PosthogEvent/index.js b/apps/frontend/src/app/constants/PosthogEvent/index.js new file mode 100644 index 00000000..986183a4 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/apps/frontend/src/app/pages/Auth/SignIn/index.js b/apps/frontend/src/app/pages/Auth/SignIn/index.js index 6d58cf9b..6526ac4c 100644 --- a/apps/frontend/src/app/pages/Auth/SignIn/index.js +++ b/apps/frontend/src/app/pages/Auth/SignIn/index.js @@ -9,6 +9,7 @@ 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}`); } @@ -44,7 +45,7 @@ function SignIn() { localStorage.setItem("user-info", JSON.stringify(result)); */ // add telemetry for Sign In - posthog.capture("User Signed In", { + posthog.capture(Event.SIGNED_IN, { // To DO: Add user info here after completing the api integration email: email, }); diff --git a/apps/frontend/src/app/pages/Auth/SignUp/index.js b/apps/frontend/src/app/pages/Auth/SignUp/index.js index 7c54598b..50f77d01 100644 --- a/apps/frontend/src/app/pages/Auth/SignUp/index.js +++ b/apps/frontend/src/app/pages/Auth/SignUp/index.js @@ -15,7 +15,7 @@ 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 @@ -40,7 +40,7 @@ function SignUp() { }); // sent the signup event to posthog - posthog.capture('User signed Up', { + posthog.capture(Event.SIGNED_UP, { name:name, email:email }); diff --git a/apps/frontend/src/app/pages/CreateBulkLink/index.js b/apps/frontend/src/app/pages/CreateBulkLink/index.js index b6290674..40a8b7bc 100644 --- a/apps/frontend/src/app/pages/CreateBulkLink/index.js +++ b/apps/frontend/src/app/pages/CreateBulkLink/index.js @@ -7,7 +7,7 @@ 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"; @@ -50,7 +50,7 @@ function Bulk() { console.log(data); }); } - posthog.capture("Bulk Links Created" , {LinksData:bulkLinkData}); + posthog.capture(Event.BULK_LINK_CREATION , {LinksData:bulkLinkData}); }; const onDownload = () => { diff --git a/apps/frontend/src/app/pages/CreateLink/index.js b/apps/frontend/src/app/pages/CreateLink/index.js index e194272c..f30023b0 100644 --- a/apps/frontend/src/app/pages/CreateLink/index.js +++ b/apps/frontend/src/app/pages/CreateLink/index.js @@ -13,6 +13,7 @@ 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; @@ -43,7 +44,7 @@ const FormDemo = () => { Authorization: "JWT fefege...", "Access-Control-Allow-Origin": "*", }; - posthog.capture("Link created",{userData:userData}); // capture the link creation events + posthog.capture(Event.LINK_CREATION,{userData:userData}); // capture the link creation events console.log(userData); axios .post(`${baseUrl}/register`, userData, { headers: headers })