Add IP address and user_agent to analytics events (#58064)

Author: heiskr

src/events/components/events.ts

@@ -122,6 +122,7 @@ export function sendEvent<T extends EventType>({
       screen_width: window.screen.width,
       screen_height: window.screen.height,
       pixel_ratio: window.devicePixelRatio || 1,
+      user_agent: navigator.userAgent,
 
       // Location information
       timezone: new Date().getTimezoneOffset() / -60,

src/events/lib/schema.ts

@@ -168,6 +168,14 @@ const context = {
       description: 'The device pixel ratio.',
       minimum: 0,
     },
+    ip: {
+      type: 'string',
+      description: 'The IP address of the user.',
+    },
+    user_agent: {
+      type: 'string',
+      description: 'The raw user agent string from the browser.',
+    },
 
     // Location information
     timezone: {

src/events/middleware.ts

@@ -78,6 +78,10 @@ router.post(
           // JSON.stringify removes `undefined` values but not `null`, and we don't want to send `null` to Hydro
           body.context.dotcom_user = req.cookies?.dotcom_user ? req.cookies.dotcom_user : undefined
           body.context.is_staff = Boolean(req.cookies?.staffonly)
+          // Add IP address and user agent from request
+          // Moda forwards the client's IP using the `fastly-client-ip` header
+          body.context.ip = req.headers['fastly-client-ip'] as string | undefined
+          body.context.user_agent ??= req.headers['user-agent']
         }
         const validate = validators[type]
         if (!validate(body)) {

src/events/tests/middleware.ts

@@ -52,6 +52,9 @@ describe('POST /events', () => {
       // Location information
       timezone: -7,
       user_language: 'en-US',
+      ip: '192.0.2.1',
+      user_agent:
+        'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36',
     },
   }
 
@@ -88,6 +91,9 @@ describe('POST /events', () => {
       // Location information
       timezone: -7,
       user_language: 'en-US',
+      ip: '192.0.2.1',
+      user_agent:
+        'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36',
     },
   }
 

src/events/types.ts

@@ -50,6 +50,8 @@ export type EventProps = {
     screen_width?: number
     screen_height?: number
     pixel_ratio?: number
+    ip?: string
+    user_agent?: string
     timezone: number
     user_language: string
     os_preference: string