When building SnapTrace, our primary constraint was keeping the client telemetry footprint strictly under 5KB so it doesn't penalize Next.js Core Web Vitals (INP score).
One of the most critical engineering hurdles was privacy and data sanitization:
How do you strip sensitive user data (passwords, JWT bearer tokens, credit cards) without importing heavy 20KB–30KB third-party sanitization packages that bloat the client bundle?
Here is an architectural breakdown of the zero-dependency client approach we implemented.
1. In-Browser Regex Engine (Zero Dependencies)
Instead of pulling in bloated external sanitizers, we run an in-memory client-side regex scrubber before network dispatch:
-
Bearer & Auth Tokens: Detects authorization headers and JWT patterns and redacts them to
[REDACTED]. -
Credit Cards: Matches 13–16 digit numerical sequences across form events and error objects, masking them to
[REDACTED_CARD]. - Passwords & Keys: Intercepts sensitive key-value pairs before serialization.
Because this executes in-memory on the user's browser, raw customer secrets never hit the network or our ingestion servers.
2. Native Asynchronous Transport (0.0ms Main-Thread Delay)
Traditional monitoring tools wrap network dispatches in heavy promise chains that compete with your application's UI thread.
SnapTrace dispatches events asynchronously in the background using the browser's native navigator.sendBeacon:
javascript
navigator.sendBeacon(url, new Blob([body], { type: 'application/json' }));
Top comments (0)