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