Merge pull request #1303 from jboolean/datadog-rum

Add Datadog RUM

Author: jboolean

frontend/.eslintrc

@@ -7,7 +7,10 @@
     "node": true
   },
   "globals": {
-    "__DEV__": true
+    "__DEV__": true,
+    "__DELPOY_ENV__": true,
+    "__GIT_SHA__": true,
+    "__BRANCH__": true
   },
   "settings": {
     "import/resolver": {

frontend/package-lock.json

@@ -17,6 +17,7 @@
   "author": "Julian Boilen",
   "license": "UNLICENSED",
   "dependencies": {
+    "@datadog/browser-rum": "^6.22.0",
     "@jboolean/react-zoom-pan-pinch": "^3.7.2",
     "@react-hook/window-size": "^3.1.1",
     "@sentry/react": "^7.119.2",

frontend/package.json

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+import { datadogRum } from '@datadog/browser-rum';
+
+// --- Datadog RUM + React Router v5 wiring (no monkeypatching) ---
+import type { Location } from 'history';
+
+function pathFromLocation(
+  loc: Location | { pathname: string; search?: string; hash?: string }
+): string {
+  const search = loc.search ?? '';
+  const hash = loc.hash ?? '';
+  return `${loc.pathname}${search}${hash}`;
+}
+
+/**
+ * Call this once, right after you create your app's history and before rendering the <Router>.
+ * Example:
+ *   // history.ts
+ *   export const history = createBrowserHistory();
+ *
+ *   // index.tsx
+ *   import { history } from './history';
+ *   import { attachRumToHistory } from './datadog';
+ *   attachRumToHistory(history);
+ */
+export function attachRumToHistory(history: {
+  location: Location;
+  listen: (cb: (loc: Location) => void) => void;
+}): void {
+  // Start initial view
+  datadogRum.startView({ name: pathFromLocation(history.location) });
+  // Track subsequent route changes
+  history.listen((location) => {
+    datadogRum.startView({ name: pathFromLocation(location) });
+  });
+}
+// --- End Datadog RUM + React Router v5 wiring ---
+
+datadogRum.init({
+  applicationId: 'dfabd184-b8ed-47db-90bc-2a4c26828b72',
+  clientToken: 'pub2b91b53e324deaa20ce2c3738fc4f9aa',
+  site: 'datadoghq.com',
+  service: 'fourtiesnyc',
+  env: __DEPLOY_ENV__ || 'dev',
+  version: __GIT_SHA__,
+  // Explicitly enable manual view tracking for RRv5
+  trackViewsManually: true,
+  defaultPrivacyLevel: 'mask-user-input',
+  // plugins: [reactPlugin({ router: false })], // Keep disabled until upgrading React Router due to deps conflict
+});
+datadogRum.setGlobalContextProperty('branch', __BRANCH__);

frontend/src/datadog.ts

@@ -3,6 +3,13 @@ declare let __LOCALE__: string;
 declare let __API_BASE__: string;
 declare let __STRIPE_PK__: string;
 declare let __RECAPTCHA_PK__: string;
+declare let __DEPLOY_ENV__:
+  | 'production'
+  | 'deploy-preview'
+  | 'branch-deploy'
+  | 'dev';
+declare let __GIT_SHA__: string;
+declare let __BRANCH__: string;
 
 interface Window {
   dataLayer?: Record<string, unknown>[];

frontend/src/globals.d.ts

@@ -24,6 +24,8 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
+import './datadog';
+
 const containerEl = document.getElementById('app-container');
 
 window.netlifyIdentity = netlifyIdentity;

frontend/src/index.ts

@@ -1,5 +1,8 @@
 import { createBrowserHistory } from 'history';
+import { attachRumToHistory } from '../../datadog';
 
 const history = createBrowserHistory();
 
+attachRumToHistory(history);
+
 export default history;

frontend/src/shared/utils/history.ts

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const SentryWebpackPlugin = require("@sentry/webpack-plugin");
+const SentryWebpackPlugin = require('@sentry/webpack-plugin');
 
 const path = require('path');
 
@@ -22,6 +22,9 @@ module.exports = merge(common, {
       __API_BASE__: JSON.stringify(process.env.API_BASE),
       __STRIPE_PK__: JSON.stringify(process.env.STRIPE_PK),
       __RECAPTCHA_PK__: JSON.stringify(process.env.RECAPTCHA_PK),
+      __DEPLOY_ENV__: JSON.stringify(process.env.CONTEXT),
+      __GIT_SHA__: JSON.stringify(process.env.COMMIT_REF),
+      __BRANCH__: JSON.stringify(process.env.BRANCH),
     }),
     new HtmlWebpackPlugin({
       template: path.join(path.resolve(__dirname, 'src'), 'app.html'),
@@ -32,8 +35,8 @@ module.exports = merge(common, {
       },
     }),
     new SentryWebpackPlugin({
-      org: "julian-boilen",
-      project: "fourtiesnyc-frontend",
+      org: 'julian-boilen',
+      project: 'fourtiesnyc-frontend',
 
       // Specify the directory containing build artifacts
       include: path.resolve(__dirname, 'dist'),