diff --git a/src/applications/ivc-champva/10-10D/containers/App.jsx b/src/applications/ivc-champva/10-10D/containers/App.jsx
index 4e8a283aa698..a9b2828824d4 100644
--- a/src/applications/ivc-champva/10-10D/containers/App.jsx
+++ b/src/applications/ivc-champva/10-10D/containers/App.jsx
@@ -3,12 +3,13 @@ import {
DowntimeNotification,
externalServices,
} from '@department-of-veterans-affairs/platform-monitoring/DowntimeNotification';
+import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
import PropTypes from 'prop-types';
import RoutedSavableApp from 'platform/forms/save-in-progress/RoutedSavableApp';
-import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
import { Toggler } from 'platform/utilities/feature-toggles';
import formConfig from '../config/form';
import WIP from '../../shared/components/WIP';
+import { useBrowserMonitoring } from '../helpers/useBrowserMonitoring';
import { addStyleToShadowDomOnPages } from '../../shared/utilities';
const breadcrumbList = [
@@ -38,6 +39,9 @@ export default function App({ location, children }) {
);
});
+ // Add Datadog RUM to the app
+ useBrowserMonitoring();
+
return (
diff --git a/src/applications/ivc-champva/10-10D/helpers/useBrowserMonitoring.jsx b/src/applications/ivc-champva/10-10D/helpers/useBrowserMonitoring.jsx
new file mode 100644
index 000000000000..04c69d35463a
--- /dev/null
+++ b/src/applications/ivc-champva/10-10D/helpers/useBrowserMonitoring.jsx
@@ -0,0 +1,53 @@
+import { useEffect, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { datadogRum } from '@datadog/browser-rum';
+
+import environment from '@department-of-veterans-affairs/platform-utilities/environment';
+import { makeSelectFeatureToggles } from '../selectors/feature-toggles';
+
+const initializeRealUserMonitoring = () => {
+ // Prevent RUM from re-initializing the SDK OR running on local/CI environments.
+ if (
+ !environment.BASE_URL.includes('localhost') &&
+ !window.DD_RUM?.getInitConfiguration()
+ ) {
+ datadogRum.init({
+ applicationId: 'cca24a05-9ea0-49ea-aaa9-0d1e04a17ba0',
+ clientToken: 'puba5e0866f8008f60a6bc8b09ae555dd92',
+ site: 'ddog-gov.com',
+ service: '10-10d',
+ env: environment.vspEnvironment(),
+ sessionSampleRate: 100,
+ sessionReplaySampleRate: 100,
+ trackUserInteractions: true,
+ trackFrustrations: true,
+ trackResources: true,
+ trackLongTasks: true,
+ defaultPrivacyLevel: 'mask-user-input',
+ });
+
+ // If sessionReplaySampleRate > 0, we need to manually start the recording
+ datadogRum.startSessionReplayRecording();
+ }
+};
+
+const useBrowserMonitoring = () => {
+ // Retrieve feature flag values to control behavior
+ const selectFeatureToggles = useMemo(makeSelectFeatureToggles, []);
+ const featureToggles = useSelector(selectFeatureToggles);
+ const { isBrowserMonitoringEnabled, isLoadingFeatureFlags } = featureToggles;
+
+ useEffect(
+ () => {
+ if (isLoadingFeatureFlags) return;
+ if (isBrowserMonitoringEnabled) {
+ initializeRealUserMonitoring();
+ } else {
+ delete window.DD_RUM;
+ }
+ },
+ [isBrowserMonitoringEnabled, isLoadingFeatureFlags],
+ );
+};
+
+export { useBrowserMonitoring };
diff --git a/src/applications/ivc-champva/10-10D/selectors/feature-toggles.js b/src/applications/ivc-champva/10-10D/selectors/feature-toggles.js
new file mode 100644
index 000000000000..9ea2c04b89bc
--- /dev/null
+++ b/src/applications/ivc-champva/10-10D/selectors/feature-toggles.js
@@ -0,0 +1,17 @@
+import { createSelector } from 'reselect';
+import { toggleValues } from '@department-of-veterans-affairs/platform-site-wide/selectors';
+import FEATURE_FLAG_NAMES from '@department-of-veterans-affairs/platform-utilities/featureFlagNames';
+
+const selectFeatureToggles = createSelector(
+ state => ({
+ isLoadingFeatureFlags: state?.featureToggles?.loading,
+ isBrowserMonitoringEnabled: toggleValues(state)[
+ FEATURE_FLAG_NAMES.form1010dBrowserMonitoringEnabled
+ ],
+ }),
+ toggles => toggles,
+);
+
+const makeSelectFeatureToggles = () => selectFeatureToggles;
+
+export { makeSelectFeatureToggles };
diff --git a/src/applications/ivc-champva/10-10D/tests/unit/selectors/feature-toggles.unit.spec.js b/src/applications/ivc-champva/10-10D/tests/unit/selectors/feature-toggles.unit.spec.js
new file mode 100644
index 000000000000..fafa13b5139b
--- /dev/null
+++ b/src/applications/ivc-champva/10-10D/tests/unit/selectors/feature-toggles.unit.spec.js
@@ -0,0 +1,22 @@
+import { expect } from 'chai';
+import { makeSelectFeatureToggles } from '../../../selectors/feature-toggles';
+
+describe('ezr FeatureToggles selector', () => {
+ const state = {
+ featureToggles: {
+ /* eslint-disable camelcase */
+ form1010d_browser_monitoring_enabled: true,
+ loading: false,
+ },
+ };
+
+ describe('when `makeSelectFeatureToggles` executes', () => {
+ it('should return feature toggles', () => {
+ const selectFeatureToggles = makeSelectFeatureToggles();
+ expect(selectFeatureToggles(state)).to.eql({
+ isLoadingFeatureFlags: false,
+ isBrowserMonitoringEnabled: true,
+ });
+ });
+ });
+});
diff --git a/src/platform/utilities/feature-toggles/featureFlagNames.json b/src/platform/utilities/feature-toggles/featureFlagNames.json
index 4b4ad5746bfe..78dd90b332c5 100644
--- a/src/platform/utilities/feature-toggles/featureFlagNames.json
+++ b/src/platform/utilities/feature-toggles/featureFlagNames.json
@@ -84,6 +84,7 @@
"findARepresentativeEnableFrontend": "find_a_representative_enable_frontend",
"findARepresentativeFlagResultsEnabled": "find_a_representative_flag_results_enabled",
"form1010d": "form1010d",
+ "form1010dBrowserMonitoringEnabled": "form1010d_browser_monitoring_enabled",
"form107959c": "form107959c",
"form107959a": "form107959a",
"form107959f2": "form107959f2",