feat: enrich datadog user recordings attributes

RonenMars · RonenMars · commit 0936a10beb95 · 2025-09-28T12:03:41.000+03:00
diff --git a/src/components/organisms/deployments/sessions/table/table.tsx b/src/components/organisms/deployments/sessions/table/table.tsx
@@ -15,8 +15,13 @@ import { PopoverListItem } from "@src/interfaces/components/popover.interface";
 import { Session, SessionStateKeyType } from "@src/interfaces/models";
 import { useCacheStore, useModalStore, useSharedBetweenProjectsStore, useToastStore } from "@src/store";
 import { SessionStatsFilterType } from "@src/types/components";
-import { calculateDeploymentSessionsStats, getShortId, initialSessionCounts } from "@src/utilities";
-import { ClarityUtils } from "@src/utilities/clarity.utils";
+import {
+	calculateDeploymentSessionsStats,
+	getShortId,
+	initialSessionCounts,
+	ClarityUtils,
+	DatadogUtils,
+} from "@src/utilities";
 
 import { Frame, IconSvg, Loader, ResizeButton, THead, Table, Th, Tr } from "@components/atoms";
 import { RefreshButton } from "@components/molecules";
@@ -137,6 +142,7 @@ export const SessionsTable = () => {
 
 				if (deploymentId) {
 					ClarityUtils.setDeploymentId(deploymentId);
+					DatadogUtils.setDeploymentId(deploymentId);
 				}
 				const deploymentStats = calculateDeploymentSessionsStats([deployment]);
 				if (isEqual(deploymentStats.sessionStats, sessionStats.sessionStats)) return;
diff --git a/src/components/organisms/deployments/sessions/viewer.tsx b/src/components/organisms/deployments/sessions/viewer.tsx
@@ -22,8 +22,7 @@ import { EventListenerName, SessionState } from "@src/enums";
 import { triggerEvent, useEventListener } from "@src/hooks";
 import { ViewerSession } from "@src/interfaces/models/session.interface";
 import { useActivitiesCacheStore, useOutputsCacheStore, useToastStore } from "@src/store";
-import { copyToClipboard } from "@src/utilities";
-import { ClarityUtils } from "@src/utilities/clarity.utils";
+import { copyToClipboard, ClarityUtils, DatadogUtils } from "@src/utilities";
 
 import { Button, Frame, IconSvg, Loader, LogoCatLarge, Tab, Tooltip } from "@components/atoms";
 import { Accordion, IdCopyButton, ValueRenderer } from "@components/molecules";
@@ -127,6 +126,7 @@ export const SessionViewer = () => {
 		fetchSessionInfo();
 		if (sessionId) {
 			ClarityUtils.setSessionId(sessionId);
+			DatadogUtils.setSessionId(sessionId);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [sessionId]);
diff --git a/src/components/organisms/topbar/project/buttons.tsx b/src/components/organisms/topbar/project/buttons.tsx
@@ -17,8 +17,7 @@ import {
 	useToastStore,
 	useTourStore,
 } from "@src/store";
-import { validateEntitiesName } from "@src/utilities";
-import { ClarityUtils } from "@utilities/clarity.utils";
+import { validateEntitiesName, ClarityUtils, DatadogUtils } from "@src/utilities";
 
 import { Button, IconSvg, Loader, Spinner } from "@components/atoms";
 import { DropdownButton } from "@components/molecules";
@@ -210,6 +209,10 @@ export const ProjectTopbarButtons = () => {
 					projectId,
 					buildId,
 				});
+				DatadogUtils.trackEvent("project_validated", {
+					projectId,
+					buildId,
+				});
 			}
 		} finally {
 			setActionInProcess(ProjectActions.build, false);
@@ -266,6 +269,10 @@ export const ProjectTopbarButtons = () => {
 					deploymentId,
 					projectId,
 				});
+				DatadogUtils.trackEvent("deployment_created", {
+					deploymentId,
+					projectId,
+				});
 			}
 		} finally {
 			setActionInProcess(ProjectActions.deploy, false);
diff --git a/src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx b/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 } from "@utilities/clarity.utils";
+import { ClarityUtils, DatadogUtils } from "@utilities";
 
 import { Button, IconSvg, Spinner } from "@components/atoms";
 import { ManualRunSuccessToastMessage } from "@components/organisms/topbar/project";
@@ -83,6 +83,12 @@ export const ManualRunButtons = () => {
 					deploymentId: activeDeploymentStore?.deploymentId,
 					entrypoint: entrypointFunction?.value,
 				});
+				DatadogUtils.trackEvent("manual_run_executed", {
+					sessionId,
+					projectId,
+					deploymentId: activeDeploymentStore?.deploymentId,
+					entrypoint: entrypointFunction?.value,
+				});
 			}
 
 			setTimeout(() => {
diff --git a/src/components/pages/project.tsx b/src/components/pages/project.tsx
@@ -15,7 +15,7 @@ import {
 	useSharedBetweenProjectsStore,
 	useTourStore,
 } from "@src/store";
-import { ClarityUtils, calculatePathDepth, cn } from "@src/utilities";
+import { ClarityUtils, DatadogUtils, calculatePathDepth, cn } from "@src/utilities";
 
 import { IconButton, IconSvg, PageTitle, Tab } from "@components/atoms";
 import { PopoverTrigger } from "@components/molecules";
@@ -73,6 +73,7 @@ export const Project = () => {
 		}
 		if (project) {
 			ClarityUtils.setProject(project.id, project);
+			DatadogUtils.setProject(project.id, project);
 		}
 		setPageTitle(t("template", { page: project!.name }));
 	};
diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts
@@ -9,7 +9,7 @@ import { DeploymentStateVariant } from "@src/enums";
 import { SelectOption } from "@src/interfaces/components";
 import { useProjectStore } from "@src/store";
 import { EnrichedEvent } from "@src/types/models";
-import { ClarityUtils } from "@src/utilities/clarity.utils";
+import { ClarityUtils, DatadogUtils } from "@utilities";
 
 export const useEvent = (eventId?: string) => {
 	const { t: tErrors } = useTranslation("errors");
@@ -101,6 +101,7 @@ export const useEvent = (eventId?: string) => {
 		setIsLoading(false);
 		if (eventId) {
 			ClarityUtils.setEventId(eventId);
+			DatadogUtils.setEventId(eventId);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [eventId]);
diff --git a/src/hooks/useProjectActions.tsx b/src/hooks/useProjectActions.tsx
@@ -16,8 +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 } from "@src/utilities";
-import { ClarityUtils } from "@utilities/clarity.utils";
+import { unpackFileZip, ClarityUtils, DatadogUtils } from "@src/utilities";
 
 import { useConnectionStore, useModalStore, useProjectStore, useToastStore } from "@store";
 
@@ -70,6 +69,10 @@ export const useProjectActions = () => {
 				projectId,
 				projectName: name,
 			});
+			DatadogUtils.trackEvent("project_created", {
+				projectId,
+				projectName: name,
+			});
 		}
 
 		navigate(`/projects/${projectId}/code`, {
diff --git a/src/mainApp.tsx b/src/mainApp.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect } from "react";
 
-import { datadogRum } from "@datadog/browser-rum";
 import { BrowserRouter } from "react-router-dom";
 
 import "@utilities/getApiBaseUrl.utils";
 
 import { App } from "./app";
 import { descopeProjectId } from "@constants";
 import { VersionService } from "@services";
+import { DatadogUtils } from "@utilities";
 
 import { useOrganizationStore } from "@store";
 
@@ -24,18 +24,13 @@ export const MainApp = () => {
 
 	useEffect(() => {
 		if (user?.id) {
-			datadogRum.setUser({
-				id: user.id,
-				email: user.email,
-				name: user.name,
-			});
+			DatadogUtils.setUser(user.id, user);
 		}
 	}, [user]);
 
 	useEffect(() => {
 		if (currentOrganization?.id) {
-			datadogRum.setGlobalContextProperty("organization.id", currentOrganization.id);
-			datadogRum.setGlobalContextProperty("organization.name", currentOrganization.displayName);
+			DatadogUtils.setOrg(currentOrganization.id, currentOrganization);
 		}
 	}, [currentOrganization]);
 
diff --git a/src/store/useOrganizationStore.ts b/src/store/useOrganizationStore.ts
@@ -10,7 +10,7 @@ import { AuthService, BillingService, LoggerService, OrganizationsService, Users
 import { namespaces, cookieRefreshInterval } from "@src/constants";
 import { EnrichedMember, EnrichedOrganization, Organization, User } from "@src/types/models";
 import { OrganizationStore, OrganizationStoreState } from "@src/types/stores";
-import { requiresRefresh, retryAsyncOperation, ClarityUtils } from "@src/utilities";
+import { requiresRefresh, retryAsyncOperation, ClarityUtils, DatadogUtils } from "@src/utilities";
 
 const defaultState: OrganizationStoreState = {
 	organizations: {},
@@ -643,6 +643,7 @@ const store: StateCreator<OrganizationStore> = (set, get) => ({
 		}
 
 		ClarityUtils.setPlanType(userUsage.data.plan);
+		DatadogUtils.setPlanType(userUsage.data.plan);
 
 		const { error: errorEnrichedOrganization } = await get().getEnrichedOrganizations(true);
 
diff --git a/src/utilities/datadog.utils.ts b/src/utilities/datadog.utils.ts
@@ -0,0 +1,54 @@
+import { datadogRum } from "@datadog/browser-rum";
+
+import { Organization, Project, User } from "@src/types/models";
+
+export const DatadogUtils = {
+	setUser: (userId: string, userInfo: User) => {
+		datadogRum.setUser({
+			id: userId,
+			email: userInfo.email,
+			name: userInfo.name,
+		});
+		datadogRum.setGlobalContextProperty("user.id", userId);
+		datadogRum.setGlobalContextProperty("user.email", userInfo.email);
+		datadogRum.setGlobalContextProperty("user.name", userInfo.name);
+	},
+
+	setOrg: (orgId: string, orgInfo: Organization) => {
+		datadogRum.setGlobalContextProperty("organization.id", orgId);
+		datadogRum.setGlobalContextProperty("organization.name", orgInfo.displayName);
+		datadogRum.setGlobalContextProperty("organization.uniqueName", orgInfo.uniqueName);
+	},
+
+	setProject: (projectId: string, projectInfo: Project) => {
+		datadogRum.setGlobalContextProperty("project.id", projectId);
+		datadogRum.setGlobalContextProperty("project.name", projectInfo.name);
+		if (projectInfo.organizationId) {
+			datadogRum.setGlobalContextProperty("project.organizationId", projectInfo.organizationId);
+		}
+	},
+
+	setUserRole: (role: string) => {
+		datadogRum.setGlobalContextProperty("user.role", role);
+	},
+
+	setPlanType: (planType: string) => {
+		datadogRum.setGlobalContextProperty("billing.planType", planType);
+	},
+
+	setDeploymentId: (deploymentId: string) => {
+		datadogRum.setGlobalContextProperty("deployment.id", deploymentId);
+	},
+
+	trackEvent: (eventName: string, properties?: Record<string, any>) => {
+		datadogRum.addAction(eventName, properties);
+	},
+
+	setSessionId: (sessionId: string) => {
+		datadogRum.setGlobalContextProperty("session.id", sessionId);
+	},
+
+	setEventId: (eventId: string) => {
+		datadogRum.setGlobalContextProperty("event.id", eventId);
+	},
+};
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
@@ -72,3 +72,4 @@ export {
 } from "@utilities/lintViolationCheckLevelConverter.utils";
 export { getTextareaHeight } from "@utilities/htmlElements.utils";
 export { ClarityUtils } from "@utilities/clarity.utils";
+export { DatadogUtils } from "@utilities/datadog.utils";
