Observability (Sentry, logging, RUM)

Concept#

The Three Pillars of Frontend Observability#

1. Error Tracking: Capture uncaught runtime exceptions and stack traces in production (e.g. via Sentry or LogRocket).
2. Real User Monitoring (RUM): Collect performance metrics (Core Web Vitals, API latency) from real user browsers dynamically.
3. Structured Logs & Telemetry: Send structured event payloads to central log aggregators (e.g., Datadog, ELK stack).

Source Maps in Error Reporting#

Minified javascript in production obfuscates variable names and code structures:

// Production minified error stack:
TypeError: Cannot read properties of null (reading 'f') at index.min.js:1:342

Source Maps act as translation files that map compiled production code back to its original source code. To trace errors efficiently without exposing source code publicly:

1. Compile source maps at build time.
2. Upload source maps privately to your error tracker (e.g., Sentry) via build plugins.
3. Delete source maps from the public deploy build outputs.