Analytics with consent, scrubbing and batching
The first click happens before consent, so nothing is recorded. After consent, the email field is dropped and an email typed into a search box is masked before it leaves the browser. Events go out three at a time, and the rest on leaving. Real scrubbing needs more patterns (phone numbers, tokens in URLs); do it on the server as well.
In production you can't see your users' consoles, so errors must report themselves: React 19's root callbacks (onCaughtError, onUncaughtError, onRecoverableError) plus window error and unhandledrejection listeners send every crash to an error tracker, source maps turn its minified stack traces back into your code, and analytics and logs are collected with consent and without personal data.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a main.jsx that reports all three kinds of React root errors and both window error events to a function report(kind, error, extra).
Write a scrubUrl(url) function that removes the email and token query parameters before a page view is sent to analytics, and test it with /reset?email=asha@example.com&token=abc&step=2.
Explain it without notes
What are onCaughtError, onUncaughtError and onRecoverableError, and when does each run?
Which errors do error boundaries miss, and how do you report them?
How do source maps make production error reports useful, and how should you deploy them?
How would you add analytics to a React app while respecting user privacy?
Preview
Console
Nothing logged yet.Expected console output
dropped (no consent): add_to_cart
sent batch: [{"event":"add_to_cart","productId":"mango-1kg"},{"event":"search","query":"mail me at [email]"},{"event":"add_to_cart","productId":"mango-1kg"}]
sent batch: [{"event":"search","query":"mail me at [email]"}]