feat(UI-1898): datadog screen session replays - mention pr comments

Author: RonenMars

src/components/organisms/topbar/project/buttons.tsx

@@ -17,7 +17,7 @@ import {
 	useToastStore,
 	useTourStore,
 } from "@src/store";
-import { validateEntitiesName, ClarityUtils, DatadogUtils } from "@src/utilities";
+import { validateEntitiesName, UserTrackingUtils } from "@src/utilities";
 
 import { Button, IconSvg, Loader, Spinner } from "@components/atoms";
 import { DropdownButton } from "@components/molecules";
@@ -205,11 +205,7 @@ export const ProjectTopbarButtons = () => {
 			LoggerService.info(namespaces.projectUI, t("topbar.buildProjectSuccessExtended", { buildId }));
 
 			if (buildId) {
-				ClarityUtils.trackEvent("project_validated", {
-					projectId,
-					buildId,
-				});
-				DatadogUtils.trackEvent("project_validated", {
+				UserTrackingUtils.trackEvent("project_validated", {
 					projectId,
 					buildId,
 				});
@@ -265,11 +261,7 @@ export const ProjectTopbarButtons = () => {
 			LoggerService.info(namespaces.projectUI, t("topbar.deployedProjectSuccessExtended", { deploymentId }));
 
 			if (deploymentId) {
-				ClarityUtils.trackEvent("deployment_created", {
-					deploymentId,
-					projectId,
-				});
-				DatadogUtils.trackEvent("deployment_created", {
+				UserTrackingUtils.trackEvent("deployment_created", {
 					deploymentId,
 					projectId,
 				});

src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx

@@ -9,7 +9,7 @@ import { namespaces, ProjectActions, tourStepsHTMLIds } from "@src/constants";
 import { emptySelectItem } from "@src/constants/forms";
 import { DrawerName } from "@src/enums/components";
 import { useCacheStore, useDrawerStore, useManualRunStore, useProjectStore, useToastStore } from "@src/store/";
-import { ClarityUtils, DatadogUtils } from "@utilities";
+import { UserTrackingUtils } from "@utilities";
 
 import { Button, IconSvg, Spinner } from "@components/atoms";
 import { ManualRunSuccessToastMessage } from "@components/organisms/topbar/project";
@@ -77,13 +77,7 @@ export const ManualRunButtons = () => {
 			});
 
 			if (sessionId) {
-				ClarityUtils.trackEvent("manual_run_executed", {
-					sessionId,
-					projectId,
-					deploymentId: activeDeploymentStore?.deploymentId,
-					entrypoint: entrypointFunction?.value,
-				});
-				DatadogUtils.trackEvent("manual_run_executed", {
+				UserTrackingUtils.trackEvent("manual_run_executed", {
 					sessionId,
 					projectId,
 					deploymentId: activeDeploymentStore?.deploymentId,

src/hooks/useProjectActions.tsx

@@ -16,7 +16,7 @@ import { ModalName } from "@src/enums/components";
 import { fileOperations } from "@src/factories";
 import { Manifest } from "@src/interfaces/models";
 import { FileStructure } from "@src/interfaces/utilities";
-import { unpackFileZip, ClarityUtils, DatadogUtils } from "@src/utilities";
+import { unpackFileZip, UserTrackingUtils } from "@src/utilities";
 
 import { useConnectionStore, useModalStore, useProjectStore, useToastStore } from "@store";
 
@@ -65,11 +65,7 @@ export const useProjectActions = () => {
 		const projectId = data?.projectId;
 
 		if (projectId) {
-			ClarityUtils.trackEvent("project_created", {
-				projectId,
-				projectName: name,
-			});
-			DatadogUtils.trackEvent("project_created", {
+			UserTrackingUtils.trackEvent("project_created", {
 				projectId,
 				projectName: name,
 			});

src/main.tsx

@@ -5,8 +5,8 @@ import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
 import ReactDOM from "react-dom/client";
 
-import { appMode } from "@constants";
 import {
+	appMode,
 	applicationId,
 	clientToken,
 	site,
@@ -16,15 +16,15 @@ import {
 	sessionReplaySampleRate,
 	allowedTracingUrls,
 	defaultPrivacyLevel,
-} from "@constants/datadog.constants";
+} from "@constants";
 import { MainApp } from "@src/mainApp";
 
 import "./assets/index.css";
 import "./i18n";
 
 TimeAgo.addDefaultLocale(en);
 
-if (!applicationId || !clientToken || !datadogVersion) {
+if (applicationId && clientToken && datadogVersion) {
 	datadogRum.init({
 		applicationId,
 		clientToken,

src/utilities/index.ts

@@ -73,3 +73,4 @@ export {
 export { getTextareaHeight } from "@utilities/htmlElements.utils";
 export { ClarityUtils } from "@utilities/clarity.utils";
 export { DatadogUtils } from "@utilities/datadog.utils";
+export { UserTrackingUtils } from "@utilities/userTracking.utils";

src/utilities/userTracking.utils.ts

@@ -0,0 +1,50 @@
+import { Organization, Project, User } from "@src/types/models";
+import { ClarityUtils } from "@utilities/clarity.utils";
+import { DatadogUtils } from "@utilities/datadog.utils";
+
+export const UserTrackingUtils = {
+	setUser: (userId: string, userInfo: User) => {
+		ClarityUtils.setUser(userId, userInfo);
+		DatadogUtils.setUser(userId, userInfo);
+	},
+
+	setOrg: (orgId: string, orgInfo: Organization) => {
+		ClarityUtils.setOrg(orgId, orgInfo);
+		DatadogUtils.setOrg(orgId, orgInfo);
+	},
+
+	setProject: (projectId: string, projectInfo: Project) => {
+		ClarityUtils.setProject(projectId, projectInfo);
+		DatadogUtils.setProject(projectId, projectInfo);
+	},
+
+	setUserRole: (role: string) => {
+		ClarityUtils.setUserRole(role);
+		DatadogUtils.setUserRole(role);
+	},
+
+	setPlanType: (planType: string) => {
+		ClarityUtils.setPlanType(planType);
+		DatadogUtils.setPlanType(planType);
+	},
+
+	setDeploymentId: (deploymentId: string) => {
+		ClarityUtils.setDeploymentId(deploymentId);
+		DatadogUtils.setDeploymentId(deploymentId);
+	},
+
+	trackEvent: (eventName: string, properties?: Record<string, any>) => {
+		ClarityUtils.trackEvent(eventName, properties);
+		DatadogUtils.trackEvent(eventName, properties);
+	},
+
+	setSessionId: (sessionId: string) => {
+		ClarityUtils.setSessionId(sessionId);
+		DatadogUtils.setSessionId(sessionId);
+	},
+
+	setEventId: (eventId: string) => {
+		ClarityUtils.setEventId(eventId);
+		DatadogUtils.setEventId(eventId);
+	},
+};