feat(UI-1898): datadog screen session replays

Author: RonenMars

.env.example

@@ -1,9 +1,14 @@
+VITE_APP_VERSION=1.0.0
 VITE_HOST_URL=http://localhost:1234
 VITE_DESCOPE_PROJECT_ID=descopeProjectId
 TESTS_JWT_AUTH_TOKEN=jwtAuthTokenToRunE2ETests
 OPEN_AI_KEY=openAiKey
 
 # Akbot Integration
 VITE_AKBOT_URL=http://localhost:9980/ai
-# Akbot Integration
-VITE_AKBOT_ORIGIN=http://localhost:3000
+VITE_AKBOT_ORIGIN=http://localhost:3000
+
+# Datadog RUM Configuration
+VITE_DATADOG_APPLICATION_ID=your-datadog-app-id
+VITE_DATADOG_CLIENT_TOKEN=your-datadog-client-token
+VITE_DATADOG_SITE=datadoghq.com

package-lock.json

@@ -36,6 +36,8 @@
 	},
 	"dependencies": {
 		"@bufbuild/protobuf": "^1.10.0",
+		"@datadog/browser-rum": "^6.21.1",
+		"@datadog/browser-rum-react": "^6.21.1",
 		"@descope/react-sdk": "^2.16.1",
 		"@estruyf/github-actions-reporter": "^1.9.2",
 		"@floating-ui/react": "^0.27.2",

package.json

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 
+import { datadogRum } from "@datadog/browser-rum";
 import * as Sentry from "@sentry/react";
 import ga4 from "react-ga4";
 import { useTranslation } from "react-i18next";
@@ -64,10 +65,17 @@ export const App = () => {
 
 	useEffect(() => {
 		const path = location.pathname + location.search;
+
 		ga4.send({
 			hitType: "pageview",
 			page: path,
 		});
+
+		datadogRum.startView(path);
+
+		datadogRum.setGlobalContextProperty("page.path", location.pathname);
+		datadogRum.setGlobalContextProperty("page.search", location.search);
+		datadogRum.setGlobalContextProperty("page.hash", location.hash);
 	}, [location]);
 
 	if (isProduction) {

src/app.tsx

@@ -0,0 +1,21 @@
+import type { Site } from "@datadog/browser-core";
+import type { PropagatorType } from "@datadog/browser-rum";
+
+import { isProduction } from "@constants/global.constants";
+import { VersionService } from "@src/services/version.service";
+
+export const applicationId: string = import.meta.env.VITE_DATADOG_APPLICATION_ID;
+export const clientToken: string = import.meta.env.VITE_DATADOG_CLIENT_TOKEN;
+export const site: Site = (import.meta.env.VITE_DATADOG_SITE || "localhost") as Site;
+export const datadogVersion: string = VersionService.getCurrentVersion();
+export const service = "autokitteh-web-platform";
+
+export const sessionSampleRate = isProduction ? 10 : 100;
+export const sessionReplaySampleRate = isProduction ? 5 : 100;
+
+export const allowedTracingUrls = [
+	{ match: /^https?:\/\/localhost:\d+\//, propagatorTypes: ["datadog" as PropagatorType] },
+	{ match: /^https?:\/\/[^/]*\.autokitteh\.com\//, propagatorTypes: ["datadog" as PropagatorType] },
+];
+
+export const defaultPrivacyLevel = "mask-user-input" as const;

src/constants/datadog.constants.ts

@@ -5,6 +5,7 @@ import packageJson from "../../package.json";
 
 export const isDevelopment = import.meta.env.VITE_NODE_ENV === "development";
 export const isProduction = import.meta.env.VITE_NODE_ENV === "production";
+export const appMode = import.meta.env.VITE_NODE_ENV;
 export const descopeProjectId: string = import.meta.env.VITE_DESCOPE_PROJECT_ID;
 export const hubSpotPortalId: string = import.meta.env.VITE_HUBSPOT_PORTAL_ID;
 export const hubSpotFormId: string = import.meta.env.VITE_HUBSPOT_FORM_ID;

src/constants/global.constants.ts

@@ -34,6 +34,7 @@ export {
 	sessionTerminationDelay,
 	defaultManifestFileName,
 	optionalManifestFileName,
+	appMode,
 } from "@constants/global.constants";
 export { integrationToEditComponent } from "@constants/connections/editComponentsMapping.constants";
 export { formsPerIntegrationsMapping } from "@constants/connections/formsPerIntegrationsMapping.constants";
@@ -105,3 +106,14 @@ export { ActivityState } from "@src/constants/activities.constants";
 export { getBillingPlanFeatures } from "@constants/lists";
 export { billingUpgradeFetchUrlRetries } from "@src/constants/billing.constants";
 export { lintViolationRules } from "@constants/project.constants";
+export {
+	applicationId,
+	clientToken,
+	site,
+	datadogVersion,
+	service,
+	sessionSampleRate,
+	sessionReplaySampleRate,
+	allowedTracingUrls,
+	defaultPrivacyLevel,
+} from "@constants/datadog.constants";

src/constants/index.ts

@@ -1,14 +1,46 @@
 import React from "react";
 
+import { datadogRum } from "@datadog/browser-rum";
 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 {
+	applicationId,
+	clientToken,
+	site,
+	datadogVersion,
+	service,
+	sessionSampleRate,
+	sessionReplaySampleRate,
+	allowedTracingUrls,
+	defaultPrivacyLevel,
+} from "@constants/datadog.constants";
 import { MainApp } from "@src/mainApp";
 
 import "./assets/index.css";
 import "./i18n";
 
 TimeAgo.addDefaultLocale(en);
 
+if (!applicationId || !clientToken || !datadogVersion) {
+	datadogRum.init({
+		applicationId,
+		clientToken,
+		site,
+		service,
+		env: appMode || "development",
+		version: datadogVersion,
+		sessionSampleRate,
+		sessionReplaySampleRate,
+		trackResources: true,
+		trackLongTasks: true,
+		trackUserInteractions: true,
+		enablePrivacyForActionName: true,
+		allowedTracingUrls,
+		defaultPrivacyLevel,
+	});
+}
+
 ReactDOM.createRoot(document.getElementById("root")!).render(<MainApp />);

src/main.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from "react";
 
-import "@utilities/getApiBaseUrl.utils";
-
+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";
@@ -21,6 +22,23 @@ export const MainApp = () => {
 		VersionService.initializeVersionTracking();
 	}, []);
 
+	useEffect(() => {
+		if (user?.id) {
+			datadogRum.setUser({
+				id: user.id,
+				email: user.email,
+				name: user.name,
+			});
+		}
+	}, [user]);
+
+	useEffect(() => {
+		if (currentOrganization?.id) {
+			datadogRum.setGlobalContextProperty("organization.id", currentOrganization.id);
+			datadogRum.setGlobalContextProperty("organization.name", currentOrganization.displayName);
+		}
+	}, [currentOrganization]);
+
 	return (
 		<BrowserRouter>
 			<ClarityProvider>

src/mainApp.tsx

@@ -28,6 +28,9 @@ interface ImportMetaEnv {
 	readonly VITE_AKBOT_ORIGIN: string;
 	readonly VITE_AKBOT_URL: string;
 	readonly VITE_DISPLAY_BILLING: boolean;
+	readonly VITE_DATADOG_APPLICATION_ID: string;
+	readonly VITE_DATADOG_CLIENT_TOKEN: string;
+	readonly VITE_DATADOG_SITE: string;
 }
 
 interface ImportMeta {