Observability for Frontend Engineers
summary
Claims front-end observability still lags but is practical: instrumentation uses Elastic RUM agent for real user metrics (LCP, INP replacing FID, CLS), console error capture and W3C traceparent for distributed traces; backend uses OpenTelemetry Node.js agent with OTLP exporters (traces/metrics stable, logs experimental), set service name/version and environment to correlate. Warns about bundle-size impact from agents. Synthetic monitoring runs Playwright scripts as Playwright and Elastic Synthetics monitors in CI and on a schedule (multistep journeys to pinpoint failing step).
AI-written summary · about
chapters (13)
- 0:00Frontend observability intro
- 1:25Observability signals explained
- 3:12Logs and backend roles
- 3:32Metrics and Core Web Vitals
- 7:26Traces and pathways
- 9:10Real user monitoring
- 10:56OpenTelemetry fundamentals
- 13:43Instrumenting with RUM
- 16:52RUM agent impact
- 18:59OpenTelemetry for Node.js
- 23:36Synthetic monitoring
- 26:02Synthetic monitoring Playwright
- 31:15Closing and Q&A
related talks
40mObservability for All!
22mFrontend Observability Odyssey
30m"Observability for the Front End"
27mFrontend deserves monitoring too!
17mObservability in frontend: React Open Telemetry
26mObservability for Your Internal Developer Platform: Instrumenting Bac...
56mFull-stack observability and application monitoring with
17mUnlocking Observability with React & Node.js