Set up web-side observability

web/package.json

@@ -11,6 +11,7 @@
     ]
   },
   "dependencies": {
+    "@datadog/browser-rum": "^5.4.0",
     "@redwoodjs/forms": "6.4.2",
     "@redwoodjs/router": "6.4.2",
     "@redwoodjs/web": "6.4.2",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@redwoodjs/vite": "6.4.2",
+    "@types/node": "^20.10.4",
     "@types/react": "18.2.39",
     "@types/react-dom": "18.2.17",
     "autoprefixer": "^10.4.16",

web/src/App.tsx

@@ -1,3 +1,25 @@
+import { datadogRum } from '@datadog/browser-rum'
+
+if (process.env.DD_RUM_ENABLED === 'true') {
+  datadogRum.init({
+    applicationId: process.env.DD_RUM_APP_ID,
+    clientToken: process.env.DD_RUM_CLIENT_TOKEN,
+    sessionSampleRate: parseInt(process.env.DD_RUM_SESSION_SAMPLE_RATE),
+    sessionReplaySampleRate: parseInt(
+      process.env.DD_RUM_SESSION_REPLAY_SAMPLE_RATE
+    ),
+    trackUserInteractions:
+      process.env.DD_RUM_TRACK_USER_INTERACTIONS !== 'false',
+    trackResources: process.env.DD_RUM_TRACK_RESOURCES !== 'false',
+    trackLongTasks: process.env.DD_RUM_TRACK_LONG_TASKS !== 'false',
+    defaultPrivacyLevel: 'mask',
+    site: process.env.DD_SITE || 'datadoghq.com',
+    service: process.env.DD_SERVICE || 'cpf-reporter',
+    env: process.env.DD_ENV,
+    version: process.env.DD_VERSION,
+  })
+}
+
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 

web/tsconfig.json

@@ -26,7 +26,7 @@
       "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
     },
     "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
-    "types": ["jest", "@testing-library/jest-dom"],
+    "types": ["jest", "@testing-library/jest-dom", "node"],
     "jsx": "preserve"
   },
   "include": [