feat: added instrumentation for status page

react-frontend/configs/dev.env

@@ -1,2 +1,2 @@
 REACT_APP_LUMBERJACK_API_URL="https://lumberjack.stage.razorpay.in/v1/track"
-REACT_APP_LUMBERJACK_API_KEY='10pYUm55sa39zgTN1gzNwQzNyQjM54Cg'
+REACT_APP_LUMBERJACK_API_KEY='UHjKbQGfxNrh9p2Die2vcu06alGtijkj'

react-frontend/configs/prod.env

@@ -1,2 +1,2 @@
 REACT_APP_LUMBERJACK_API_URL="https://lumberjack.razorpay.com/v1/track"
-REACT_APP_LUMBERJACK_API_KEY='10pYUm55sa39zgTN1gzNwQzNyQjM54Cg'
+REACT_APP_LUMBERJACK_API_KEY='FsXeGGD0S8uVBnfqlgkBXE4Ht2ZH9Y9c'

react-frontend/package.json

@@ -28,7 +28,7 @@
     "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-tooltip": "^4.2.21"
   },
   "eslintConfig": {
@@ -48,9 +48,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "resolutions": {
-    "babel-loader": "8.1.0",
-    "webpack": "4.44.2"
   }
 }

react-frontend/src/components/App.jsx

@@ -9,6 +9,7 @@ import { initLumberjack } from "../utils/trackers";
 const App = () => {
   console.log(`Application running on ${process.env.NODE_ENV} mode.`);
   useEffect(() => {
+    console.log(navigator);
     initLumberjack();
   }, [])
 

react-frontend/src/components/ContentHeader.jsx

@@ -1,6 +1,15 @@
 import React from "react";
+import { analyticsTrack } from "../utils/analytics";
 
 const ContentHeader = () => {
+  const sendAnalytics = () => {
+    analyticsTrack({
+      objectName: 'Support Page',
+      actionName: 'clicked',
+      screen: 'Home page'
+    })
+  }
+
   return (
     <div className="header">
       <h1 className="header-title mt-4 mb-3 font-24 fw-700">
@@ -13,6 +22,7 @@ const ContentHeader = () => {
         real-time, operational issue with one of our products that is not
         described below, please reach out to{" "}
         <a
+          onClick={sendAnalytics}
           target="_blank"
           rel="noopener noreferrer"
           href="https://razorpay.com/support/"

react-frontend/src/components/GroupItem.jsx

@@ -46,7 +46,7 @@ const GroupItem = ({ service, showPlusButton }) => {
     }
 
     analyticsTrack({
-      objectName: 'Test object',
+      objectName: 'Service Expand',
       actionName: 'clicked',
       screen: 'Home page'
     })
@@ -54,6 +54,12 @@ const GroupItem = ({ service, showPlusButton }) => {
 
   const closeCollapse = () => {
     setCollapse(false);
+
+    analyticsTrack({
+      objectName: 'Service Collapse',
+      actionName: 'clicked',
+      screen: 'Home page'
+    })
   };
 
   const handleMouseOver = (service) => {

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

@@ -6,10 +6,20 @@ import Button from "../Button";
 
 import RzpLogo from "../../static/razorpay-logo-white.svg";
 import indiaFlagSvg from "./images/india-flag.svg";
+import { analyticsTrack } from "../../utils/analytics";
 
-const RazorpayLogoLink = () => (
+const RazorpayLogoLink = () => {
-  <Link
+  const sendAnalytics = () => {
+    analyticsTrack({
+      objectName: 'Home Page',
+      actionName: 'clicked',
+      screen: 'Home page'
+    })
+  }
+
+  return <Link
     to="https://razorpay.com/"
+    onClick={sendAnalytics}
     isExternal
     py={{ xxs: "6", lg: "7" }}
     paddingRight={{ xxs: "0", lg: "22" }}
@@ -24,7 +34,15 @@ const RazorpayLogoLink = () => (
       alt="Razorpay Logo"
     />
   </Link>
-);
+};
+
+const sendAnalytics = (event) => {
+  analyticsTrack({
+    objectName: event.target.name,
+    actionName: 'clicked',
+    screen: 'Home page'
+  })
+}
 
 const Navigation = () => {
   return (
@@ -67,7 +85,10 @@ const Navigation = () => {
           </Tooltip>
           <Button
             as={Link}
+            onClick={sendAnalytics}
+            type="button"
             size="sm"
+            name="login"
             colorScheme="link"
             to="https://dashboard.razorpay.com/#/access/signin"
           >
@@ -75,9 +96,12 @@ const Navigation = () => {
           </Button>
           <Button
             as={Link}
+            onClick={sendAnalytics}
+            type="button"
             to="https://dashboard.razorpay.com/signup"
             marginLeft={{ base: "1", xs: "4" }}
             size="sm"
+            name="signup"
             colorScheme="white"
             display={{ base: "none", xxs: "none", lg: "inline-block" }}
           >

react-frontend/src/components/ServicesPage.jsx

@@ -12,6 +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";
 
 const ServicesPage = () => {
   // const data = messages.filter((m) => inRange(m) && m.service === 0);
@@ -21,6 +22,16 @@ const ServicesPage = () => {
   const [poll, setPolling] = useState(1);
   const today = DateUtils.format(new Date(), "d MMMM yyyy, hh:mm aaa");
 
+  useEffect(() => {
+    if(!loading) {
+      analyticsTrack({
+        objectName: 'Status Page',
+        actionName: 'displayed',
+        screen: 'Home page'
+      })
+    }
+  }, [loading])
+
   useEffect(() => {
     const timer = setInterval(() => {
       setPolling((prev) => (prev += 1));

react-frontend/src/utils/analytics.js

@@ -1,5 +1,5 @@
 import errorService from '@razorpay/universe-utils/errorService';
-import { titleCase } from './helper';
+import { getCurrentBrowser, isMobile, titleCase } from './helper';
 
 export const sendToLumberjack = ({ eventName, properties = {} }) => {
 	const body = {
@@ -70,6 +70,7 @@ export const analyticsTrack = ({
 
 	const eventTimestamp = new Date().toISOString();
 	const eventName = titleCase(`${objectName} ${actionName}`);
+	const browser = getCurrentBrowser();
 
 	if (toLumberjack) {
 		sendToLumberjack({
@@ -78,6 +79,8 @@ export const analyticsTrack = ({
 				...properties,
 				screen,
 				eventTimestamp,
+				browser,
+				mobile: isMobile(),
 			},
 		});
 	}

react-frontend/src/utils/helper.js

@@ -1,15 +1,15 @@
 // import DateUtils from "./DateUtils";
 
 export function findStatus(data) {
-  if (!Array.isArray(data)) return null;
+	if (!Array.isArray(data)) return null;
-  if (data.length === 0) return null;
+	if (data.length === 0) return null;
-  const uptime = data.every((d) => d.online === true);
+	const uptime = data.every((d) => d.online === true);
-  const degraded = data.some((d) => d.online === false);
+	const degraded = data.some((d) => d.online === false);
-  const downtime = data.every((d) => d.online === false);
+	const downtime = data.every((d) => d.online === false);
-  if (uptime) return "uptime";
+	if (uptime) return 'uptime';
-  if (downtime) return "downtime";
+	if (downtime) return 'downtime';
-  if (degraded) return "degraded";
+	if (degraded) return 'degraded';
-  return "";
+	return '';
 }
 
 // export function inRange(message) {
@@ -23,23 +23,23 @@ export function findStatus(data) {
 // }
 
 export const isObject = (obj) => {
-  if (Object.prototype.toString.call(obj) === "[object Object]") {
+	if (Object.prototype.toString.call(obj) === '[object Object]') {
-    return true;
+		return true;
-  }
+	}
 
-  return false;
+	return false;
 };
 
 export const isObjectEmpty = (obj) => {
-  if (Object.keys(obj).length === 0) {
+	if (Object.keys(obj).length === 0) {
-    return true;
+		return true;
-  }
+	}
-  return false;
+	return false;
 };
 
 export const calcPer = (uptime, downtime) => {
-  const percentage = ((uptime / (uptime + downtime)) * 100).toFixed(2);
+	const percentage = ((uptime / (uptime + downtime)) * 100).toFixed(2);
-  return percentage;
+	return percentage;
 };
 
 // export function formatString(arr) {
@@ -60,8 +60,37 @@ export const calcPer = (uptime, downtime) => {
 
 /* Delimiters are space / underscore */
 export function titleCase(sentence) {
-  return (sentence || '')
+	return (sentence || '')
-    .split(/\s+|_/)
+		.split(/\s+|_/)
-    .map((word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase())
+		.map((word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase())
-    .join(' ');
+		.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';
+	}
+
+	return browserName;
+}
+
+// Check for mobile devices.
+export function isMobile() {
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+		navigator.userAgent
+	);
 }

react-frontend/src/utils/trackers.js

@@ -1,9 +1,9 @@
-import analyticsService from  '@razorpay/universe-utils/analytics';
+import analyticsService from '@razorpay/universe-utils/analytics';
 
 export const initLumberjack = () => {
-  analyticsService.init({
+	analyticsService.init({
-    lumberjackAppName: 'website',
+		lumberjackAppName: 'website',
-    lumberjackApiKey: window.LUMBERJACK_API_KEY,
+		lumberjackApiKey: window.LUMBERJACK_API_KEY,
-    lumberjackApiUrl: window.LUMBERJACK_API_URL,
+		lumberjackApiUrl: window.LUMBERJACK_API_URL,
-  });
+	});
 };