github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: added and stored random userid in local for instrumentation

pull/1097/head
smit95tpatel 2022-05-12 13:22:04 +05:30
parent 95c6811707
commit 1f1b823f60
8 changed files with 50 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
react-frontend/src/components/App.jsx
View File

@ -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();
}, [])

2
react-frontend/src/components/ContentHeader.jsx
View File

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

20
react-frontend/src/components/GroupItem.jsx
View File

@ -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} />
)}
</>
)}

19
react-frontend/src/components/Navbar/index.js vendored
View File

@ -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

2
react-frontend/src/components/ServicesPage.jsx
View File

@ -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);

87
react-frontend/src/utils/analytics.js vendored
View File

@ -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(),
},
});
}
};

33
react-frontend/src/utils/helper.js vendored
View File

@ -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';
}
return browserName;
export const setUerId = (id) => {
localStorage.setItem('stat_user_id',id);
}
// Check for mobile devices.
export function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
export const getUserId = () => {
return localStorage.getItem('stat_user_id');
}
export const generateUUID = (length) => {
return Array.from(Array(length), () => Math.floor(Math.random() * 36).toString(36)).join('')
}

13
react-frontend/src/utils/trackers.js vendored
View File

@ -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()
}
})
}