feat: working on instrumentation

react-frontend/.npmrc

@@ -0,0 +1,3 @@
+@razorpay:registry=https://npm.pkg.github.com/
+//npm.pkg.github.com/:always-auth=true
+//npm.pkg.github.com/:_authToken=${GITHUB_ACCESS_TOKEN}

react-frontend/package.json

@@ -17,6 +17,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
+    "@razorpay/universe-utils": "^5.1.2",
     "apexcharts": "^3.28.1",
     "axios": "^0.21.1",
     "date-fns": "^2.23.0",

react-frontend/public/index.html

@@ -36,4 +36,8 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script type="text/javaScript">
+    window.LUMBERJACK_API_URL = "%REACT_APP_LUMBERJACK_API_URL%";
+    window.LUMBERJACK_API_KEY = "%REACT_APP_LUMBERJACK_API_KEY%";
+  </script>
 </html>

react-frontend/src/components/App.jsx

@@ -1,12 +1,16 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "../theme";
 import ServicesPage from "./ServicesPage";
 import Navigation from "./Navbar";
+import { initLumberjack } from "../utils/trackers";
 
 const App = () => {
   console.log(`Application running on ${process.env.NODE_ENV} mode.`);
+  useEffect(() => {
+    initLumberjack();
+  }, [])
 
   return (
     <ChakraProvider theme={theme}>

react-frontend/src/components/GroupItem.jsx

@@ -10,6 +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";
 
 const GroupItem = ({ service, showPlusButton }) => {
   const [collapse, setCollapse] = useState(false);
@@ -43,6 +44,12 @@ const GroupItem = ({ service, showPlusButton }) => {
     } else {
       setCollapse(true);
     }
+
+    analyticsTrack({
+      objectName: 'Test object',
+      actionName: 'clicked',
+      screen: 'Home page'
+    })
   };
 
   const closeCollapse = () => {

react-frontend/src/utils/analytics.js

@@ -0,0 +1,84 @@
+import errorService from '@razorpay/universe-utils/errorService';
+import { titleCase } from './helper';
+
+export const sendToLumberjack = ({ eventName, properties = {} }) => {
+	const body = {
+		mode: 'live',
+		key: window.LUMBERJACK_API_KEY,
+		events: [
+			{
+				event_type: 'test_source',
+				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}`);
+
+	if (toLumberjack) {
+		sendToLumberjack({
+			eventName,
+			properties: {
+				...properties,
+				screen,
+				eventTimestamp,
+			},
+		});
+	}
+};

react-frontend/src/utils/helper.js

@@ -57,3 +57,11 @@ export const calcPer = (uptime, downtime) => {
 //   });
 //   return arrayStr.join("<br/>");
 // }
+
+/* Delimiters are space / underscore */
+export function titleCase(sentence) {
+  return (sentence || '')
+    .split(/\s+|_/)
+    .map((word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase())
+    .join(' ');
+}

react-frontend/src/utils/trackers.js

@@ -0,0 +1,9 @@
+import analyticsService from  '@razorpay/universe-utils/analytics';
+
+export const initLumberjack = () => {
+  analyticsService.init({
+    lumberjackAppName: 'test_source',
+    lumberjackApiKey: window.LUMBERJACK_API_KEY,
+    lumberjackApiUrl: "https://lumberjack.stage.razorpay.in/v1/track",
+  });
+};