feat: added and stored random userid in local for instrumentation

react-frontend/src/components/App.jsx

@@ -5,11 +5,15 @@ import theme from "../theme";
 import ServicesPage from "./ServicesPage";
 import Navigation from "./Navbar";
 import { initLumberjack } from "../utils/trackers";
+import { generateUUID, getUserId, setUerId } from "../utils/helper";
 
 const App = () => {
   console.log(`Application running on ${process.env.NODE_ENV} mode.`);
   useEffect(() => {
-    console.log(navigator);
+    if(!getUserId()) {
+      setUerId(generateUUID(14));
+    }
+
     initLumberjack();
   }, [])
 

react-frontend/src/components/ContentHeader.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { analyticsTrack } from "../utils/analytics";
+import { analyticsTrack } from "../utils/trackers";
 
 const ContentHeader = () => {
   const sendAnalytics = () => {

react-frontend/src/components/GroupItem.jsx

@@ -10,7 +10,7 @@ import SubServiceCard from "./SubServiceCard";
 // import ServiceLoader from "./ServiceLoader";
 // import DateUtils from "../utils/DateUtils";
 import infoIcon from "../static/info.svg";
-import { analyticsTrack } from "../utils/analytics";
+import { analyticsTrack } from "../utils/trackers";
 
 const GroupItem = ({ service, showPlusButton }) => {
   const [collapse, setCollapse] = useState(false);
@@ -31,7 +31,7 @@ const GroupItem = ({ service, showPlusButton }) => {
     setCollapse(true);
   };
 
-  const openCollapse = () => {
+  const openCollapse = (event) => {
     if (subServices.length === 0) {
       setLoading(true);
       try {
@@ -48,17 +48,23 @@ const GroupItem = ({ service, showPlusButton }) => {
     analyticsTrack({
       objectName: 'Service Expand',
       actionName: 'clicked',
-      screen: 'Home page'
+      screen: 'Home page',
+      properties:{
+        serviceName: event.target.name,
+      }
     })
   };
 
-  const closeCollapse = () => {
+  const closeCollapse = (event) => {
     setCollapse(false);
 
     analyticsTrack({
       objectName: 'Service Collapse',
       actionName: 'clicked',
-      screen: 'Home page'
+      screen: 'Home page',
+      properties:{
+        serviceName: event.target.name,
+      }
     })
   };
 
@@ -76,9 +82,9 @@ const GroupItem = ({ service, showPlusButton }) => {
           {!loading && showPlusButton && (
             <>
               {collapse ? (
-                <button className="square-minus" onClick={closeCollapse} />
+                <button className="square-minus" name={service.name} onClick={closeCollapse} />
               ) : (
-                <button className="square-plus" onClick={openCollapse} />
+                <button className="square-plus" name={service.name} onClick={openCollapse} />
               )}
             </>
           )}

react-frontend/src/components/Navbar/index.js

@@ -3,20 +3,21 @@ import { Box, Tooltip } from "@chakra-ui/react";
 import Link from "../Link";
 import Image from "../Image";
 import Button from "../Button";
+import analyticsService from '@razorpay/universe-utils/analytics';
 
 import RzpLogo from "../../static/razorpay-logo-white.svg";
 import indiaFlagSvg from "./images/india-flag.svg";
-import { analyticsTrack } from "../../utils/analytics";
+import { analyticsTrack } from "../../utils/trackers";
 
-const RazorpayLogoLink = () => {
-  const sendAnalytics = () => {
+const sendAnalytics = (event) => {
   analyticsTrack({
-      objectName: 'Home Page',
+    objectName: event.target.name || 'home page',
     actionName: 'clicked',
     screen: 'Home page'
   })
 }
 
+const RazorpayLogoLink = () => {
   return <Link
     to="https://razorpay.com/"
     onClick={sendAnalytics}
@@ -36,14 +37,6 @@ const RazorpayLogoLink = () => {
   </Link>
 };
 
-const sendAnalytics = (event) => {
-  analyticsTrack({
-    objectName: event.target.name,
-    actionName: 'clicked',
-    screen: 'Home page'
-  })
-}
-
 const Navigation = () => {
   return (
     <Box

react-frontend/src/components/ServicesPage.jsx

@@ -12,7 +12,7 @@ import ServiceLoader from "./ServiceLoader";
 import API from "../config/API";
 import { STATUS_COLOR, STATUS_ICON, STATUS_TEXT } from "../utils/constants";
 import { findStatus } from "../utils/helper";
-import { analyticsTrack } from "../utils/analytics";
+import { analyticsTrack } from "../utils/trackers";
 
 const ServicesPage = () => {
   // const data = messages.filter((m) => inRange(m) && m.service === 0);

react-frontend/src/utils/analytics.js

@@ -1,87 +0,0 @@
-import errorService from '@razorpay/universe-utils/errorService';
-import { getCurrentBrowser, isMobile, titleCase } from './helper';
-
-export const sendToLumberjack = ({ eventName, properties = {} }) => {
-	const body = {
-		mode: 'live',
-		key: window.LUMBERJACK_API_KEY,
-		events: [
-			{
-				event_type: 'website',
-				event: eventName,
-				event_version: 'v1',
-				timestamp: new Date().getTime(),
-				properties: {
-					...properties,
-				},
-			},
-		],
-	};
-
-	fetch(window.LUMBERJACK_API_URL, {
-		method: 'post',
-		body: JSON.stringify(body),
-		headers: {
-			'Content-Type': 'application/json',
-		},
-	}).catch((error) => {
-		throwAnalyticsException(error);
-	});
-};
-
-const throwAnalyticsException = (errorMessage) => {
-	const error = new Error(errorMessage);
-	errorService.captureError(error);
-};
-
-export const analyticsTrack = ({
-	objectName,
-	actionName,
-	screen,
-	properties = {},
-	toLumberjack = true,
-}) => {
-	if (!objectName) {
-		const errorMessage = '[analytics]: objectName cannot be empty';
-		throwAnalyticsException(errorMessage);
-	}
-
-	if (!actionName) {
-		const errorMessage = '[analytics]: actionName cannot be empty';
-		throwAnalyticsException(errorMessage);
-	}
-
-	if (!screen) {
-		const errorMessage = '[analytics]: screen cannot be empty';
-		throwAnalyticsException(errorMessage);
-	}
-
-	if (/_/g.test(objectName)) {
-		const errorMessage = `[analytics]: expected objectName: ${objectName} to not have '_'`;
-		throwAnalyticsException(errorMessage);
-		return;
-	}
-
-	if (/_/g.test(actionName)) {
-		const errorMessage = `[analytics]: expected actionName: ${actionName} to not have '_'`;
-		throwAnalyticsException(errorMessage);
-		return;
-	}
-
-	const eventTimestamp = new Date().toISOString();
-	const eventName = titleCase(`${objectName} ${actionName}`);
-	const browser = getCurrentBrowser();
-
-	if (toLumberjack) {
-		sendToLumberjack({
-			eventName,
-			properties: {
-				...properties,
-				screen,
-				eventTimestamp,
-				browser,
-				mobile: isMobile(),
-			},
-		});
-	}
-};

react-frontend/src/utils/helper.js

@@ -66,31 +66,14 @@ export function titleCase(sentence) {
 		.join(' ');
 }
 
-// Check for browser.
-export function getCurrentBrowser() {
-	const userAgent = navigator.userAgent;
-	let browserName;
-
-	if (userAgent.match(/chrome|chromium|crios/i)) {
-		browserName = 'chrome';
-	} else if (userAgent.match(/firefox|fxios/i)) {
-		browserName = 'firefox';
-	} else if (userAgent.match(/safari/i)) {
-		browserName = 'safari';
-	} else if (userAgent.match(/opr\//i)) {
-		browserName = 'opera';
-	} else if (userAgent.match(/edg/i)) {
-		browserName = 'edge';
-	} else {
-		browserName = 'No browser detection';
+export const setUerId = (id) => {
+  localStorage.setItem('stat_user_id',id);
 }
 
-	return browserName;
+export const getUserId = () => {
+  return localStorage.getItem('stat_user_id');
 }
 
-// Check for mobile devices.
-export function isMobile() {
-	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-		navigator.userAgent
-	);
+export const generateUUID = (length) => {
+  return Array.from(Array(length), () => Math.floor(Math.random() * 36).toString(36)).join('')
 }

react-frontend/src/utils/trackers.js

@@ -1,9 +1,20 @@
 import analyticsService from '@razorpay/universe-utils/analytics';
+import { getUserId } from './helper';
 
 export const initLumberjack = () => {
 	analyticsService.init({
-		lumberjackAppName: 'website',
+		lumberjackAppName: 'external_status_page',
 		lumberjackApiKey: window.LUMBERJACK_API_KEY,
 		lumberjackApiUrl: window.LUMBERJACK_API_URL,
 	});
 };
+
+export const analyticsTrack = (trackObj) => {
+  analyticsService.track({
+    ...trackObj,
+    properties: {
+      ...trackObj.properties,
+      userId: getUserId()
+    }
+  })
+}