[FEQ] Jim/FEQ-1824/use remote config data to toggle datadog on or off

packages/bot-skeleton/src/services/api/__tests__/datadog-middleware.spec.ts

@@ -43,6 +43,7 @@ describe('APIMiddleware', () => {
                 clearMarks,
             },
         });
+        Object.defineProperty(window, 'is_datadog_logging_enabled', { value: true });
 
         api_middleware = new APIMiddleware();
         process.env.DATADOG_CLIENT_TOKEN_LOGS = '123';
@@ -69,7 +70,6 @@ describe('APIMiddleware', () => {
         };
 
         const spyDatalogsInfo = jest.spyOn(datadogLogs.logger, 'info');
-
         api_middleware.log([datadog_logs], false);
 
         expect(spyDatalogsInfo).toHaveBeenCalledWith(datadog_logs.name, { ...measure_object });

packages/bot-skeleton/src/services/api/api-middleware.js

@@ -1,34 +1,4 @@
 import { datadogLogs } from '@datadog/browser-logs';
-import { formatDate, formatTime } from '@deriv/shared';
-
-const DATADOG_CLIENT_TOKEN_LOGS = process.env.DATADOG_CLIENT_TOKEN_LOGS ?? '';
-const isProduction = process.env.NODE_ENV === 'production';
-const isStaging = process.env.NODE_ENV === 'staging';
-let dataDogSessionSampleRate = 0;
-
-dataDogSessionSampleRate = +process.env.DATADOG_SESSION_SAMPLE_RATE_LOGS ?? 1;
-let dataDogVersion = '';
-let dataDogEnv = '';
-
-if (isProduction) {
-    dataDogVersion = `deriv-app-${process.env.REF_NAME}`;
-    dataDogEnv = 'production';
-} else if (isStaging) {
-    dataDogVersion = `deriv-app-staging-v${formatDate(new Date(), 'YYYYMMDD')}-${formatTime(Date.now(), 'HH:mm')}`;
-    dataDogEnv = 'staging';
-}
-
-if (DATADOG_CLIENT_TOKEN_LOGS) {
-    datadogLogs.init({
-        clientToken: DATADOG_CLIENT_TOKEN_LOGS,
-        site: 'datadoghq.com',
-        forwardErrorsToLogs: false,
-        service: 'Dbot',
-        sessionSampleRate: dataDogSessionSampleRate,
-        version: dataDogVersion,
-        env: dataDogEnv,
-    });
-}
 
 export const REQUESTS = [
     'active_symbols',
@@ -59,7 +29,7 @@ class APIMiddleware {
     };
 
     log = (measures = [], is_bot_running) => {
-        if (measures && measures.length) {
+        if (window.is_datadog_logging_enabled && measures && measures.length) {
             measures.forEach(measure => {
                 datadogLogs.logger.info(measure.name, {
                     name: measure.name,

packages/bot-web-ui/package.json

@@ -73,6 +73,7 @@
         "@deriv/deriv-charts": "^2.0.5",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
+        "@deriv/api": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "classnames": "^2.2.6",
         "crc-32": "^1.2.0",

packages/bot-web-ui/src/pages/bot-builder/bot-builder.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Analytics } from '@deriv-com/analytics'; //BotTAction will add ones that PR gets merged
+import { useRemoteConfig } from '@deriv/api';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
+import { Analytics } from '@deriv-com/analytics'; //BotTAction will add ones that PR gets merged
 import BotSnackbar from 'Components/bot-snackbar';
 import { DBOT_TABS } from 'Constants/bot-contents';
+import initDatadogLogs from 'Utils/datadog-logs';
 import LoadModal from '../../components/load-modal';
 import { useDBotStore } from '../../stores/useDBotStore';
 import SaveModal from '../dashboard/load-bot-preview/save-modal';
@@ -23,6 +25,12 @@ const BotBuilder = observer(() => {
     const { is_mobile } = ui;
     const { onMount, onUnmount } = app;
     const el_ref = React.useRef<HTMLInputElement | null>(null);
+    const { data: remote_config_data } = useRemoteConfig();
+
+    React.useEffect(() => {
+        initDatadogLogs(remote_config_data.tracking_datadog);
+        window.is_datadog_logging_enabled = remote_config_data.tracking_datadog; // This will be used in the middleware inside of bot-skeleton to check if datadog is enabled before logging
+    }, [remote_config_data]);
 
     React.useEffect(() => {
         const is_bot_builder = active_tab === DBOT_TABS.BOT_BUILDER;

packages/bot-web-ui/src/types/global.d.ts

@@ -1,6 +1,7 @@
 declare global {
     interface Window {
         sendRequestsStatistic: (is_running: boolean) => void;
+        is_datadog_logging_enabled: boolean;
     }
 }
 

packages/bot-web-ui/src/utils/datadog-logs.ts

@@ -0,0 +1,42 @@
+import { datadogLogs } from '@datadog/browser-logs';
+import { formatDate, formatTime } from '@deriv/shared';
+
+/**
+ * Initializes Datadog Logs for production or staging environments, conditionally based on environment variables.
+ *
+ * @param {boolean} is_datadog_enabled - The parameter to enable or disable datadog tracking.
+ * @example initDatadogLogs(true);
+ * @returns {void}
+ * **/
+const initDatadogLogs = (is_datadog_enabled: boolean) => {
+    const DATADOG_CLIENT_TOKEN_LOGS = is_datadog_enabled ? process.env.DATADOG_CLIENT_TOKEN_LOGS ?? '' : '';
+    const isProduction = process.env.NODE_ENV === 'production';
+    const isStaging = process.env.NODE_ENV === 'staging';
+    let dataDogSessionSampleRate = 0;
+
+    dataDogSessionSampleRate = Number(process.env.DATADOG_SESSION_SAMPLE_RATE_LOGS ?? 1);
+    let dataDogVersion = '';
+    let dataDogEnv = '';
+
+    if (isProduction) {
+        dataDogVersion = `deriv-app-${process.env.REF_NAME}`;
+        dataDogEnv = 'production';
+    } else if (isStaging) {
+        dataDogVersion = `deriv-app-staging-v${formatDate(new Date(), 'YYYYMMDD')}-${formatTime(Date.now(), 'HH:mm')}`;
+        dataDogEnv = 'staging';
+    }
+
+    if (isProduction || isStaging) {
+        datadogLogs.init({
+            clientToken: DATADOG_CLIENT_TOKEN_LOGS,
+            site: 'datadoghq.com',
+            forwardErrorsToLogs: false,
+            service: 'Dbot',
+            sessionSampleRate: dataDogSessionSampleRate,
+            version: dataDogVersion,
+            env: dataDogEnv,
+        });
+    }
+};
+
+export default initDatadogLogs;

packages/core/src/App/AppContent.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Cookies from 'js-cookie';
-
 import { useRemoteConfig } from '@deriv/api';
 import { DesktopWrapper } from '@deriv/components';
 import { useFeatureFlags } from '@deriv/hooks';
@@ -21,6 +20,7 @@ import AppModals from './Containers/Modals';
 import PlatformContainer from './Containers/PlatformContainer/PlatformContainer.jsx';
 import Routes from './Containers/Routes/routes.jsx';
 import Devtools from './Devtools';
+import initDatadog from '../Utils/Datadog';
 
 const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }) => {
     const { is_next_wallet_enabled } = useFeatureFlags();
@@ -29,6 +29,7 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
     const { data } = useRemoteConfig();
 
     React.useEffect(() => {
+        initDatadog(data.tracking_datadog);
         if (process.env.RUDDERSTACK_KEY) {
             const config = {
                 growthbookKey: data.marketing_growthbook ? process.env.GROWTHBOOK_CLIENT_KEY : undefined,

packages/core/src/Utils/Datadog/index.ts

@@ -1,10 +1,5 @@
 import { datadogRum } from '@datadog/browser-rum';
 
-const DATADOG_APP_ID = process.env.DATADOG_APPLICATION_ID ?? '';
-const DATADOG_CLIENT_TOKEN = process.env.DATADOG_CLIENT_TOKEN ?? '';
-const isProduction = process.env.NODE_ENV === 'production';
-const isStaging = process.env.NODE_ENV === 'staging';
-
 function getAcct1Value(url: string) {
     const start = url.indexOf('acct1=') + 6; // 6 is the length of 'acct1='
     const end = url.indexOf('&', start); // Find the end of the parameter value
@@ -14,59 +9,92 @@ function getAcct1Value(url: string) {
     return url.substring(start, end); // Get the substring between 'acct1=' and the '&'
 }
 
-let dataDogSessionSampleRate = 0;
-let dataDogSessionReplaySampleRate = 0;
-let dataDogVersion = '';
-let dataDogEnv = '';
-let serviceName = '';
+/**
+ * Gets the configuration values for datadog based on the environment.
+ * It returns null if the environment is not staging or production.
+ * @param {string} environment - The environment to get the configuration values for.
+ * @example getConfigValues('staging');
+ * @returns {object|null} - The configuration values for datadog.
+ * **/
+const getConfigValues = (environment: string) => {
+    if (environment === 'production') {
+        return {
+            serviceName: 'app.deriv.com',
+            dataDogVersion: `deriv-app-${process.env.REF_NAME}`,
+            dataDogSessionReplaySampleRate: Number(process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE ?? 1),
+            dataDogSessionSampleRate: Number(process.env.DATADOG_SESSION_SAMPLE_RATE ?? 10),
+            dataDogEnv: 'production',
+        };
+    } else if (environment === 'staging') {
+        return {
+            serviceName: 'staging-app.deriv.com',
+            dataDogVersion: `deriv-app-staging-v${process.env.REF_NAME}`,
+            dataDogSessionReplaySampleRate: 100,
+            dataDogSessionSampleRate: 100,
+            dataDogEnv: 'staging',
+        };
+    }
+};
+
+/**
+ * Initializes datadog for tracking user interactions, resources, long tasks, and frustrations on production or staging environments, conditionally based on environment variables.
+ * It also masks user input and redacts sensitive data from the URL.
+ *
+ * @param {boolean} is_datadog_enabled - The parameter to enable or disable datadog tracking.
+ * @example initDatadog(true);
+ * @returns {void}
+ * **/
+const initDatadog = (is_datadog_enabled: boolean) => {
+    const DATADOG_APP_ID = is_datadog_enabled ? process.env.DATADOG_APPLICATION_ID ?? '' : '';
+    const DATADOG_CLIENT_TOKEN = is_datadog_enabled ? process.env.DATADOG_CLIENT_TOKEN ?? '' : '';
+    const isProduction = process.env.NODE_ENV === 'production';
+    const isStaging = process.env.NODE_ENV === 'staging';
 
-if (isProduction) {
-    serviceName = 'app.deriv.com';
-    dataDogVersion = `deriv-app-${process.env.REF_NAME}`;
-    dataDogSessionReplaySampleRate = +process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE! ?? 1;
-    dataDogSessionSampleRate = +process.env.DATADOG_SESSION_SAMPLE_RATE! ?? 10;
-    dataDogEnv = 'production';
-} else if (isStaging) {
-    serviceName = 'staging-app.deriv.com';
-    dataDogVersion = `deriv-app-staging-v${process.env.REF_NAME}`;
-    dataDogSessionReplaySampleRate = 100;
-    dataDogSessionSampleRate = 100;
-    dataDogEnv = 'staging';
-}
-// we do it in order avoid error "application id is not configured, no RUM data will be collected"
-// for test-links where application ID has not been configured and therefore RUM data will not be collected
-if (isProduction || isStaging) {
-    datadogRum.init({
-        applicationId: isStaging || isProduction ? DATADOG_APP_ID : '',
-        clientToken: isStaging || isProduction ? DATADOG_CLIENT_TOKEN : '',
-        site: 'datadoghq.com',
-        service: serviceName,
-        env: dataDogEnv,
-        sessionSampleRate: dataDogSessionSampleRate,
-        sessionReplaySampleRate: dataDogSessionReplaySampleRate,
-        trackUserInteractions: true,
-        trackResources: true,
-        trackLongTasks: true,
-        defaultPrivacyLevel: 'mask-user-input',
-        version: dataDogVersion,
-        trackFrustrations: true,
-        enableExperimentalFeatures: ['clickmap'],
-        beforeSend: event => {
-            if (event.type === 'resource') {
-                event.resource.url = event.resource.url.replace(
-                    /^https:\/\/api.telegram.org.*$/,
-                    'telegram token=REDACTED'
-                );
+    const {
+        dataDogSessionSampleRate = 0,
+        dataDogSessionReplaySampleRate = 0,
+        dataDogVersion = '',
+        dataDogEnv = '',
+        serviceName = '',
+    } = getConfigValues(process.env.NODE_ENV ?? '') ?? {};
 
-                if (event.resource.url.match(/^https:\/\/eu.deriv.com\/ctrader-login.*$/)) {
-                    const url = event.resource.url;
-                    const accnt = getAcct1Value(url);
+    // we do it in order avoid error "application id is not configured, no RUM data will be collected"
+    // for test-links where application ID has not been configured and therefore RUM data will not be collected
+    if (isProduction || isStaging) {
+        datadogRum.init({
+            applicationId: isStaging || isProduction ? DATADOG_APP_ID : '',
+            clientToken: isStaging || isProduction ? DATADOG_CLIENT_TOKEN : '',
+            site: 'datadoghq.com',
+            service: serviceName,
+            env: dataDogEnv,
+            sessionSampleRate: dataDogSessionSampleRate,
+            sessionReplaySampleRate: dataDogSessionReplaySampleRate,
+            trackUserInteractions: true,
+            trackResources: true,
+            trackLongTasks: true,
+            defaultPrivacyLevel: 'mask-user-input',
+            version: dataDogVersion,
+            trackFrustrations: true,
+            enableExperimentalFeatures: ['clickmap'],
+            beforeSend: event => {
+                if (event.type === 'resource') {
                     event.resource.url = event.resource.url.replace(
-                        /^https:\/\/eu.deriv.com\/ctrader-login.*$/,
-                        `https://eu.deriv.com/ctrader-login?acct1=${accnt}&token1=redacted`
+                        /^https:\/\/api.telegram.org.*$/,
+                        'telegram token=REDACTED'
                     );
+
+                    if (event.resource.url.match(/^https:\/\/eu.deriv.com\/ctrader-login.*$/)) {
+                        const url = event.resource.url;
+                        const accnt = getAcct1Value(url);
+                        event.resource.url = event.resource.url.replace(
+                            /^https:\/\/eu.deriv.com\/ctrader-login.*$/,
+                            `https://eu.deriv.com/ctrader-login?acct1=${accnt}&token1=redacted`
+                        );
+                    }
                 }
-            }
-        },
-    });
-}
+            },
+        });
+    }
+};
+
+export default initDatadog;

packages/core/src/index.tsx

@@ -10,7 +10,6 @@ import initStore from 'App/initStore';
 import App from 'App/app.jsx';
 import { checkAndSetEndpointFromUrl } from '@deriv/shared';
 import AppNotificationMessages from './App/Containers/app-notification-messages.jsx';
-import './Utils/Datadog'; // to enable datadog
 
 if (
     !!window?.localStorage.getItem?.('debug_service_worker') || // To enable local service worker related development