98828 Add initial RUM implementation - form 10-10d

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 (
     <div className="vads-l-grid-container desktop-lg:vads-u-padding-x--0">
       <Toggler toggleName={Toggler.TOGGLE_NAMES.form1010d}>

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 };

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 };

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('10-10d RUM 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,
+      });
+    });
+  });
+});

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",