From 32e469e3dae9cf4a9a114fef4d3f5a5d28a5e381 Mon Sep 17 00:00:00 2001 From: Sergiy Dybskiy Date: Thu, 24 Sep 2026 13:12:14 +0200 Subject: [PATCH] Mask only the shopper's name and email in session replay The lab 2 solution used replayIntegration() with its defaults, which masks every text node, so the lab 3 replay could not show the apology the user saw. Replay now records page text, inputs, and images as rendered; the account card marks the shopper's name and email with data-sentry-mask, which stays masked when maskAllText is off. The lab 2 prompt asks for the same behaviour so an attendee's agent and the solution patch agree. Co-authored-by: Claude --- PROMPTS.md | 3 +- labs/02-instrument-storefront.md | 3 +- solutions/02-storefront/README.md | 5 ++- solutions/02-storefront/instrumentation.patch | 31 +++++++++++++++++-- 4 files changed, 37 insertions(+), 5 deletions(-) diff --git a/PROMPTS.md b/PROMPTS.md index 41660cb..a073cde 100644 --- a/PROMPTS.md +++ b/PROMPTS.md @@ -30,7 +30,8 @@ on the server and in the browser, so traces, errors, and replays all carry it. - Database spans for the Postgres queries in `lib/db`. - Session replay in the browser, so a failed chat turn links to what the -user saw. +user saw. Record the page as the shopper saw it, but mask their name and +email. - Full trace sampling for the workshop. Use the 11.0 release candidate of the Sentry SDK, npm tag `next`. Add only what these points need; no edge runtime config, no extra error boundaries. diff --git a/labs/02-instrument-storefront.md b/labs/02-instrument-storefront.md index 9643f84..c73d459 100644 --- a/labs/02-instrument-storefront.md +++ b/labs/02-instrument-storefront.md @@ -35,7 +35,8 @@ Undo the change: `git checkout -- . && git clean -fd` in `apps/storefront`. > carry it. > - Database spans for the Postgres queries in `lib/db`. > - Session replay in the browser, so a failed chat turn links to what the -> user saw. +> user saw. Record the page as the shopper saw it, but mask their name and +> email. > - Full trace sampling for the workshop. > Use the 11.0 release candidate of the Sentry SDK, npm tag `next`. Add only > what these points need; no edge runtime config, no extra error boundaries. diff --git a/solutions/02-storefront/README.md b/solutions/02-storefront/README.md index 893ac23..6e02a3f 100644 --- a/solutions/02-storefront/README.md +++ b/solutions/02-storefront/README.md @@ -11,7 +11,10 @@ - `instrumentation.ts` — loads the server config for the Node.js runtime only; wires `onRequestError` for Server Component and proxy errors. - `instrumentation-client.ts` — browser init with session replay and router - transition tracing. + transition tracing. Replay records page text, inputs, and images as the + shopper saw them; only elements marked `data-sentry-mask` stay masked. +- `components/assistant/account-card.tsx` — marks the shopper's name and + email with `data-sentry-mask`. - `next.config.ts` — wraps the config with `withSentryConfig` (imported from `@sentry/nextjs/config`) for source map upload, skipped when `SENTRY_AUTH_TOKEN` is unset. diff --git a/solutions/02-storefront/instrumentation.patch b/solutions/02-storefront/instrumentation.patch index 5bf14c8..351e04e 100644 --- a/solutions/02-storefront/instrumentation.patch +++ b/solutions/02-storefront/instrumentation.patch @@ -53,12 +53,31 @@ index 0000000..0000000 100644 }); return createUIMessageStreamResponse({ +diff --git a/apps/storefront/components/assistant/account-card.tsx b/apps/storefront/components/assistant/account-card.tsx +index 0000000..0000000 100644 +--- a/apps/storefront/components/assistant/account-card.tsx ++++ b/apps/storefront/components/assistant/account-card.tsx +@@ -24,9 +24,12 @@ export function AccountCard({ customer, orders }: AccountInfo) { +
+
+
+-

{customer.name}

++

++ {customer.name} ++

+

+- {customer.email} · member since {customer.memberSince} ++ {customer.email} · member since{" "} ++ {customer.memberSince} +

+
+ diff --git a/apps/storefront/instrumentation-client.ts b/apps/storefront/instrumentation-client.ts new file mode 100644 index 0000000..0000000 --- /dev/null +++ b/apps/storefront/instrumentation-client.ts -@@ -0,0 +1,15 @@ +@@ -0,0 +1,23 @@ +import * as Sentry from "@sentry/nextjs"; +import { DEMO_USER } from "lib/demo-user"; + @@ -66,7 +85,15 @@ index 0000000..0000000 + dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, + tracesSampleRate: 1, + replaysSessionSampleRate: 1, -+ integrations: [Sentry.replayIntegration()], ++ integrations: [ ++ // Records the page as the shopper saw it. Elements marked ++ // data-sentry-mask (the account card's name and email) stay masked. ++ Sentry.replayIntegration({ ++ maskAllText: false, ++ maskAllInputs: false, ++ blockAllMedia: false, ++ }), ++ ], +}); + +// The store has no sign-in; a real app calls setUser after the user signs in.