Frontend Observability Odyssey
summary
A concrete recipe for front‑end observability: automated smoke tests with Cypress or Playwright trigger alerts when success < 0.95, catching a real bug (cannot read property ID of undefined) caused by missing optional chaining and empty cart items and enabling time to resolution 3 minutes that avoids a $45,000 incident. Implementation uses OpenTelemetry SDK + collector, routes metrics to Prometheus, traces to Jagger, logs to Loki, and dashboards in Graphana with session replay in centry for live session debugging.
AI-written summary · about
chapters (15)
- 0:00Introduction to observability
- 1:04Debugging a production incident
- 3:13What is observability
- 4:40Why front-end observability
- 6:25Telemetry data types
- 7:54Understanding user journey
- 9:41Logs and debugging
- 10:45Traces and spans
- 12:30Alerts and SLAs
- 14:41OpenTelemetry overview
- 15:23Telemetry architecture
- 16:28Demo with Grafana
- 18:33Demo with Sentry
- 19:39Key takeaways
- 21:24What makes an app observable
related talks
32mObservability for Frontend Engineers
30m"Observability for the Front End"
16mNavigating the What, Where, and When of Your Frontend App
49mObservability in Practice: How to Become Proactive with Bugs
17mObservability in frontend: React Open Telemetry
40mObservability for All!
17mUnlocking Observability with React & Node.js
26mObservability for Your Internal Developer Platform: Instrumenting Bac...