feat(browser): Set user.ip_address explicitly to {{auto}} (#15008)

Part of getsentry/team-sdks#118

This is so far inferred at relay-side, which is pretty intransparent and
potentially confusing.
So instead, we want to explicitly set this in the SDK. If this is set to
`null` it will not be inferred (which is kind of intransparent too,
but...)

This is set for:

* error events (as `user.ip_address`)
* transactions (as `user.ip_address`)
* replay events (as `user.ip_address`)
* profiles (as `user.ip_address`)
* sessions (as `user.ip_address`)
* session aggregates: as `attr.ip_address: '{{auto}}'`
* standalone spans (not by default, but added to all standalone web
vitals spans we emit, as `'client.address': '{{auto}}'` attribute)

Author: mydea

dev-packages/browser-integration-tests/suites/feedback/attachTo/test.ts

@@ -57,6 +57,9 @@ sentryTest('should capture feedback with custom button', async ({ getLocalTestUr
     event_id: expect.stringMatching(/\w{32}/),
     environment: 'production',
     tags: {},
+    user: {
+      ip_address: '{{auto}}',
+    },
     sdk: {
       integrations: expect.arrayContaining(['Feedback']),
       version: expect.any(String),

dev-packages/browser-integration-tests/suites/feedback/captureFeedback/test.ts

@@ -69,6 +69,9 @@ sentryTest('should capture feedback', async ({ getLocalTestUrl, page }) => {
         'User-Agent': expect.stringContaining(''),
       },
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     platform: 'javascript',
   });
 });

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/hasSampling/test.ts

@@ -103,6 +103,9 @@ sentryTest('should capture feedback', async ({ forceFlushReplay, getLocalTestUrl
         'User-Agent': expect.stringContaining(''),
       },
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     platform: 'javascript',
   });
 });

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackCsp/test.ts

@@ -69,6 +69,9 @@ sentryTest('should capture feedback', async ({ getLocalTestUrl, page }) => {
         'User-Agent': expect.stringContaining(''),
       },
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     platform: 'javascript',
   });
   const cspViolation = await page.evaluate<boolean>('window.__CSPVIOLATION__');

dev-packages/browser-integration-tests/suites/manual-client/browser-context/test.ts

@@ -34,6 +34,9 @@ sentryTest('allows to setup a client manually & capture exceptions', async ({ ge
         'User-Agent': expect.any(String),
       }),
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     timestamp: expect.any(Number),
     environment: 'local',
     release: '0.0.1',

dev-packages/browser-integration-tests/suites/public-api/setUser/ip_address_null/subject.js

@@ -0,0 +1,6 @@
+Sentry.setUser({
+  id: 'foo',
+  ip_address: null,
+});
+
+Sentry.captureMessage('first_user');

dev-packages/browser-integration-tests/suites/public-api/setUser/ip_address_null/test.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+
+sentryTest('should allow to set ip_address to null', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.message).toBe('first_user');
+  expect(eventData.user).toEqual({
+    id: 'foo',
+    ip_address: null,
+  });
+});

dev-packages/browser-integration-tests/suites/public-api/setUser/unset_user/test.ts

@@ -10,15 +10,17 @@ sentryTest('should unset user', async ({ getLocalTestUrl, page }) => {
   const eventData = await getMultipleSentryEnvelopeRequests<Event>(page, 3, { url });
 
   expect(eventData[0].message).toBe('no_user');
-  expect(eventData[0].user).toBeUndefined();
+  expect(eventData[0].user).toEqual({ ip_address: '{{auto}}' });
 
   expect(eventData[1].message).toBe('user');
-  expect(eventData[1].user).toMatchObject({
+  expect(eventData[1].user).toEqual({
     id: 'foo',
     ip_address: 'bar',
     other_key: 'baz',
   });
 
   expect(eventData[2].message).toBe('unset_user');
-  expect(eventData[2].user).toBeUndefined();
+  expect(eventData[2].user).toEqual({
+    ip_address: '{{auto}}',
+  });
 });

dev-packages/browser-integration-tests/suites/public-api/setUser/update_user/test.ts

@@ -10,13 +10,14 @@ sentryTest('should update user', async ({ getLocalTestUrl, page }) => {
   const eventData = await getMultipleSentryEnvelopeRequests<Event>(page, 2, { url });
 
   expect(eventData[0].message).toBe('first_user');
-  expect(eventData[0].user).toMatchObject({
+  expect(eventData[0].user).toEqual({
     id: 'foo',
     ip_address: 'bar',
   });
 
   expect(eventData[1].message).toBe('second_user');
-  expect(eventData[1].user).toMatchObject({
+  expect(eventData[1].user).toEqual({
     id: 'baz',
+    ip_address: '{{auto}}',
   });
 });

dev-packages/browser-integration-tests/suites/public-api/startSpan/standalone-mixed-transaction/test.ts

@@ -103,6 +103,9 @@ sentryTest(
         headers: expect.any(Object),
         url: expect.any(String),
       },
+      user: {
+        ip_address: '{{auto}}',
+      },
       sdk: expect.any(Object),
       spans: [
         {

dev-packages/browser-integration-tests/suites/public-api/withScope/nested_scopes/test.ts

@@ -10,22 +10,22 @@ sentryTest('should allow nested scoping', async ({ getLocalTestUrl, page }) => {
   const eventData = await getMultipleSentryEnvelopeRequests<Event>(page, 5, { url });
 
   expect(eventData[0].message).toBe('root_before');
-  expect(eventData[0].user).toMatchObject({ id: 'qux' });
+  expect(eventData[0].user).toEqual({ id: 'qux', ip_address: '{{auto}}' });
   expect(eventData[0].tags).toBeUndefined();
 
   expect(eventData[1].message).toBe('outer_before');
-  expect(eventData[1].user).toMatchObject({ id: 'qux' });
+  expect(eventData[1].user).toEqual({ id: 'qux', ip_address: '{{auto}}' });
   expect(eventData[1].tags).toMatchObject({ foo: false });
 
   expect(eventData[2].message).toBe('inner');
-  expect(eventData[2].user).toBeUndefined();
+  expect(eventData[2].user).toEqual({ ip_address: '{{auto}}' });
   expect(eventData[2].tags).toMatchObject({ foo: false, bar: 10 });
 
   expect(eventData[3].message).toBe('outer_after');
-  expect(eventData[3].user).toMatchObject({ id: 'baz' });
+  expect(eventData[3].user).toEqual({ id: 'baz', ip_address: '{{auto}}' });
   expect(eventData[3].tags).toMatchObject({ foo: false });
 
   expect(eventData[4].message).toBe('root_after');
-  expect(eventData[4].user).toMatchObject({ id: 'qux' });
+  expect(eventData[4].user).toEqual({ id: 'qux', ip_address: '{{auto}}' });
   expect(eventData[4].tags).toBeUndefined();
 });

dev-packages/browser-integration-tests/suites/replay/captureReplay/test.ts

@@ -55,6 +55,9 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
         'User-Agent': expect.stringContaining(''),
       },
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     platform: 'javascript',
   });
 
@@ -93,6 +96,9 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
         'User-Agent': expect.stringContaining(''),
       },
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     platform: 'javascript',
   });
 });

dev-packages/browser-integration-tests/suites/replay/captureReplayFromReplayPackage/test.ts

@@ -55,6 +55,9 @@ sentryTest('should capture replays (@sentry-internal/replay export)', async ({ g
         'User-Agent': expect.stringContaining(''),
       },
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     platform: 'javascript',
   });
 
@@ -93,6 +96,9 @@ sentryTest('should capture replays (@sentry-internal/replay export)', async ({ g
         'User-Agent': expect.stringContaining(''),
       },
     },
+    user: {
+      ip_address: '{{auto}}',
+    },
     platform: 'javascript',
   });
 });

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/test.ts

@@ -69,6 +69,7 @@ sentryTest('captures a "GOOD" CLS vital with its source as a standalone span', a
       transaction: expect.stringContaining('index.html'),
       'user_agent.original': expect.stringContaining('Chrome'),
       'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
+      'client.address': '{{auto}}',
     },
     description: expect.stringContaining('body > div#content > p'),
     exclusive_time: 0,
@@ -137,6 +138,7 @@ sentryTest('captures a "MEH" CLS vital with its source as a standalone span', as
       transaction: expect.stringContaining('index.html'),
       'user_agent.original': expect.stringContaining('Chrome'),
       'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
+      'client.address': '{{auto}}',
     },
     description: expect.stringContaining('body > div#content > p'),
     exclusive_time: 0,
@@ -203,6 +205,7 @@ sentryTest('captures a "POOR" CLS vital with its source as a standalone span.',
       transaction: expect.stringContaining('index.html'),
       'user_agent.original': expect.stringContaining('Chrome'),
       'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
+      'client.address': '{{auto}}',
     },
     description: expect.stringContaining('body > div#content > p'),
     exclusive_time: 0,
@@ -270,6 +273,7 @@ sentryTest(
         transaction: expect.stringContaining('index.html'),
         'user_agent.original': expect.stringContaining('Chrome'),
         'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
+        'client.address': '{{auto}}',
       },
       description: 'Layout shift',
       exclusive_time: 0,

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-late/test.ts

@@ -71,6 +71,7 @@ sentryTest('should capture an INP click event span after pageload', async ({ bro
       'sentry.source': 'custom',
       transaction: 'test-url',
       'user_agent.original': expect.stringContaining('Chrome'),
+      'client.address': '{{auto}}',
     },
     measurements: {
       inp: {

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-parametrized-late/test.ts

@@ -74,6 +74,7 @@ sentryTest(
         'sentry.source': 'custom',
         transaction: 'test-route',
         'user_agent.original': expect.stringContaining('Chrome'),
+        'client.address': '{{auto}}',
       },
       measurements: {
         inp: {

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-parametrized/test.ts

@@ -70,6 +70,7 @@ sentryTest(
         'sentry.origin': 'auto.http.browser.inp',
         transaction: 'test-route',
         'user_agent.original': expect.stringContaining('Chrome'),
+        'client.address': '{{auto}}',
       },
       measurements: {
         inp: {

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp/test.ts

@@ -69,6 +69,7 @@ sentryTest('should capture an INP click event span during pageload', async ({ br
       'sentry.origin': 'auto.http.browser.inp',
       transaction: 'test-url',
       'user_agent.original': expect.stringContaining('Chrome'),
+      'client.address': '{{auto}}',
     },
     measurements: {
       inp: {

dev-packages/browser-integration-tests/utils/replayEventTemplates.ts

@@ -37,6 +37,9 @@ const DEFAULT_REPLAY_EVENT = {
       'User-Agent': expect.any(String),
     },
   },
+  user: {
+    ip_address: '{{auto}}',
+  },
   platform: 'javascript',
 };
 

dev-packages/e2e-tests/test-applications/react-17/tests/transactions.test.ts

@@ -83,6 +83,7 @@ test('sends an INP span', async ({ page }) => {
       'sentry.exclusive_time': expect.any(Number),
       replay_id: expect.any(String),
       'user_agent.original': expect.stringContaining('Chrome'),
+      'client.address': '{{auto}}',
     },
     description: 'body > div#root > input#exception-button[type="button"]',
     op: 'ui.interaction.click',

dev-packages/e2e-tests/test-applications/react-router-6/tests/transactions.test.ts

@@ -83,6 +83,7 @@ test('sends an INP span', async ({ page }) => {
       'sentry.exclusive_time': expect.any(Number),
       replay_id: expect.any(String),
       'user_agent.original': expect.stringContaining('Chrome'),
+      'client.address': '{{auto}}',
     },
     description: 'body > div#root > input#exception-button[type="button"]',
     op: 'ui.interaction.click',

dev-packages/e2e-tests/test-applications/react-router-7-spa/tests/transactions.test.ts

@@ -83,6 +83,7 @@ test('sends an INP span', async ({ page }) => {
       'sentry.exclusive_time': expect.any(Number),
       replay_id: expect.any(String),
       'user_agent.original': expect.stringContaining('Chrome'),
+      'client.address': '{{auto}}',
     },
     description: 'body > div#root > input#exception-button[type="button"]',
     op: 'ui.interaction.click',

packages/browser-utils/src/metrics/utils.ts

@@ -108,6 +108,9 @@ export function startStandaloneWebVitalSpan(options: StandaloneWebVitalSpanOptio
     // For example: Chrome vs. Chrome Mobile
     'user_agent.original': WINDOW.navigator?.userAgent,
 
+    // This tells Sentry to infer the IP address from the request
+    'client.address': '{{auto}}',
+
     ...passedAttributes,
   };
 

packages/browser/src/client.ts

@@ -8,6 +8,7 @@ import type {
   ParameterizedString,
   Scope,
   SeverityLevel,
+  User,
 } from '@sentry/core';
 import { Client, applySdkMetadata, getSDKSource } from '@sentry/core';
 import { eventFromException, eventFromMessage } from './eventbuilder';
@@ -82,6 +83,23 @@ export class BrowserClient extends Client<BrowserClientOptions> {
         }
       });
     }
+
+    this.on('postprocessEvent', event => {
+      addAutoIpAddressToUser(event);
+    });
+
+    this.on('beforeSendSession', session => {
+      if ('aggregates' in session) {
+        if (session.attrs?.['ip_address'] === undefined) {
+          session.attrs = {
+            ...session.attrs,
+            ip_address: '{{auto}}',
+          };
+        }
+      } else {
+        addAutoIpAddressToUser(session);
+      }
+    });
   }
 
   /**
@@ -112,6 +130,19 @@ export class BrowserClient extends Client<BrowserClientOptions> {
     isolationScope: Scope,
   ): PromiseLike<Event | null> {
     event.platform = event.platform || 'javascript';
+
     return super._prepareEvent(event, hint, currentScope, isolationScope);
   }
 }
+
+// By default, we want to infer the IP address, unless this is explicitly set to `null`
+// We do this after all other processing is done
+// If `ip_address` is explicitly set to `null` or a value, we leave it as is
+function addAutoIpAddressToUser(objWithMaybeUser: { user?: User | null }): void {
+  if (objWithMaybeUser.user?.ip_address === undefined) {
+    objWithMaybeUser.user = {
+      ...objWithMaybeUser.user,
+      ip_address: '{{auto}}',
+    };
+  }
+}