feat(sentry): strip IP addresses and add batch/position context (#1220)

* feat(sentry): strip IP addresses and add batch/position context (#1213)

Strip participant IP addresses from Sentry events to prevent
re-identification, and add batchName, treatmentFile, and player
position as global Sentry tags for easier debugging.

- Add beforeSend hook (stripIpAddress) to remove event.user.ip_address
- Set batchName + treatmentFile tags when batch config loads (App.jsx)
- Set position tag when player is assigned to a game (Game.jsx)
- Add vitest unit tests for the beforeSend function
- Enhance Playwright Sentry mock to capture setTag calls
- Add ERR-TAG Playwright test verifying tag capture infrastructure

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: use destructuring to fully omit ip_address key from Sentry events

Addresses Copilot review — destructuring removes the key entirely
rather than setting it to undefined, preventing any serialization leak.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: JamesPHoughton

client/src/App.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-no-bind */
 import React, { useEffect } from "react";
+import * as Sentry from "@sentry/react";
 import "virtual:windi.css";
 import "./baseStyles.css";
 
@@ -43,6 +44,8 @@ function InnerParticipant() {
   useEffect(() => {
     const batchConfig = globals?.get("recruitingBatchConfig");
     window.dlBatchName = batchConfig?.batchName;
+    Sentry.setTag("batchName", batchConfig?.batchName || "unknown");
+    Sentry.setTag("treatmentFile", batchConfig?.treatmentFile || "unknown");
   }, [globals]);
 
   if (!globals) return <Loading />;

client/src/Game.jsx

@@ -58,8 +58,16 @@ export function Game() {
   playerRef.current = player;
 
   const assigned = player?.get("assigned");
+  const position = player?.get("position");
   const gameReady = !!(game && stage && round);
 
+  // Attach player position as Sentry tag when assigned to a game
+  useEffect(() => {
+    if (assigned && position != null) {
+      Sentry.setTag("position", String(position));
+    }
+  }, [assigned, position]);
+
   // Detect stale state: player is assigned but game hooks haven't populated.
   // This can happen if the websocket misses a stage/round update from the server.
   // Report to Sentry and reload once to recover.

client/src/index.jsx

@@ -6,15 +6,12 @@ import App from "./App";
 import { Button } from "./components/Button";
 import "./index.css";
 import { BrowserConditionalRender } from "./components/ConditionalRender";
+import { stripIpAddress } from "./utils/sentryBeforeSend";
 
 Sentry.init({
   dsn: "https://bbe62f66328d40c6bf9008b293e44d7d@o1288526.ingest.sentry.io/6505477",
   integrations: [new BrowserTracing()],
-  // beforeSend(event, hint) {
-  //   Sentry.showReportDialog({
-  //     eventId: event.event_id
-  //   });
-  // },
+  beforeSend: stripIpAddress,
   attachStacktrace: true,
   release: process.env.BUNDLE_DATE,
 

client/src/utils/sentryBeforeSend.js

@@ -0,0 +1,11 @@
+/**
+ * Sentry beforeSend hook that strips IP addresses from events
+ * to prevent re-identification of participants.
+ */
+export function stripIpAddress(event) {
+  if (event.user) {
+    const { ip_address: _stripped, ...userWithoutIp } = event.user;
+    return { ...event, user: userWithoutIp };
+  }
+  return event;
+}

client/src/utils/sentryBeforeSend.test.js

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { stripIpAddress } from "./sentryBeforeSend";
+
+describe("stripIpAddress", () => {
+  it("removes ip_address from event.user", () => {
+    const event = {
+      message: "test",
+      user: { id: "abc", ip_address: "1.2.3.4" },
+    };
+    const result = stripIpAddress(event);
+    expect(result.user).not.toHaveProperty("ip_address");
+    expect(result.user.id).toBe("abc");
+  });
+
+  it("returns the event unchanged when there is no user", () => {
+    const event = { message: "test" };
+    const result = stripIpAddress(event);
+    expect(result).toBe(event);
+  });
+
+  it("handles user object with no ip_address", () => {
+    const event = { message: "test", user: { id: "abc" } };
+    const result = stripIpAddress(event);
+    expect(result.user.ip_address).toBeUndefined();
+    expect(result.user.id).toBe("abc");
+  });
+
+  it("does not mutate the original event", () => {
+    const event = {
+      message: "test",
+      user: { id: "abc", ip_address: "1.2.3.4" },
+    };
+    stripIpAddress(event);
+    expect(event.user.ip_address).toBe("1.2.3.4");
+  });
+
+  it("preserves other event properties", () => {
+    const event = {
+      message: "test",
+      tags: { batchName: "batch1" },
+      user: { id: "abc", ip_address: "1.2.3.4", username: "player1" },
+    };
+    const result = stripIpAddress(event);
+    expect(result.message).toBe("test");
+    expect(result.tags).toEqual({ batchName: "batch1" });
+    expect(result.user.username).toBe("player1");
+  });
+
+  it("handles null user gracefully", () => {
+    const event = { message: "test", user: null };
+    const result = stripIpAddress(event);
+    expect(result).toBe(event);
+  });
+});

playwright/component-tests/video-call/mocked/ErrorReporting.ct.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import { VideoCall } from '../../../../client/src/call/VideoCall';
+import { SentryTagTestComponent } from '../../../test-components/SentryTagTestComponent';
 
 /**
  * Component Tests for A/V Error Reporting to Sentry
@@ -286,3 +287,24 @@ test.describe('A/V Error Reporting (Sentry)', () => {
     expect(avMsg.hint.tags.avIssueId).toBeTruthy();
   });
 });
+
+/**
+ * ERR-TAG: Sentry.setTag calls are captured by the mock
+ *
+ * Verifies the mock infrastructure records setTag calls in
+ * window.mockSentryCaptures.tags — used by App.jsx (batchName, treatmentFile)
+ * and Game.jsx (position) to attach context to all Sentry events.
+ */
+test('ERR-TAG: Sentry.setTag calls are captured in mockSentryCaptures.tags', async ({ mount, page }) => {
+  const component = await mount(
+    <SentryTagTestComponent
+      tags={{ batchName: 'test-batch', treatmentFile: 'projects/example/test.yaml', position: '2' }}
+    />
+  );
+  await expect(page.locator('[data-test="tagTestMounted"]')).toBeVisible({ timeout: 5000 });
+
+  const tags = await page.evaluate(() => window.mockSentryCaptures.tags);
+  expect(tags.batchName).toBe('test-batch');
+  expect(tags.treatmentFile).toBe('projects/example/test.yaml');
+  expect(tags.position).toBe('2');
+});

playwright/mocks/sentry/mock.js

@@ -22,6 +22,7 @@
  *     exceptions: [{ error, hint, timestamp }],
  *     breadcrumbs: [{ category, message, level, data, timestamp }],
  *     events: [{ event, hint, timestamp }],
+ *     tags: { key: value, ... },
  *     reset() { ... }
  *   }
  */
@@ -32,11 +33,13 @@ function initCaptures() {
     exceptions: [],
     breadcrumbs: [],
     events: [],
+    tags: {},
     reset() {
       this.messages = [];
       this.exceptions = [];
       this.breadcrumbs = [];
       this.events = [];
+      this.tags = {};
     },
   };
   if (typeof window !== 'undefined') {
@@ -69,19 +72,23 @@ export function addBreadcrumb(breadcrumb) {
   captures.breadcrumbs.push({ ...breadcrumb, timestamp: Date.now() });
 }
 
-// Context setters (no observable side effects needed for tests)
+// Context setters
 export function setUser() {}
-export function setTag() {}
-export function setTags() {}
+export function setTag(key, value) {
+  captures.tags[key] = value;
+}
+export function setTags(tags) {
+  Object.assign(captures.tags, tags);
+}
 export function setExtra() {}
 export function setExtras() {}
 export function setContext() {}
 
 // Scope management - pass a mock scope that also forwards breadcrumbs to capture store
 const mockScope = {
   setUser: () => {},
-  setTag: () => {},
-  setTags: () => {},
+  setTag: (key, value) => { captures.tags[key] = value; },
+  setTags: (tags) => { Object.assign(captures.tags, tags); },
   setExtra: () => {},
   setExtras: () => {},
   setContext: () => {},

playwright/test-components/SentryTagTestComponent.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+import * as Sentry from '@sentry/react';
+
+/**
+ * Minimal component that calls Sentry.setTag for each provided tag.
+ * Used by ErrorReporting.ct.jsx to verify the Sentry mock captures setTag calls.
+ */
+export function SentryTagTestComponent({ tags = {} }) {
+  useEffect(() => {
+    Object.entries(tags).forEach(([key, value]) => {
+      Sentry.setTag(key, value);
+    });
+  }, [tags]);
+
+  return <div data-test="tagTestMounted">Tag test</div>;
+}