OTel You It's Not Just for Backend!
summary
Live demo shows a small record store demo app instrumented with the OpenTelemetry JavaScript/TypeScript SDK sending logs, metrics and traces through a proxy to an OTLP collector and Elastic backend. Code uses a browser detector resource, batch processors, a 10s metric export interval (demo), observable gauges for Core Web Vitals (LCP, INP/INP, CLS), auto-instrumentation for fetch/XHR, a zone.js context manager and composite W3C propagators (tracecontext + baggage) so spans correlate across front end and backend. browser proxy for CORS and core web vitals via observable gauges.
AI-written summary · about
chapters (9)
- 0:00Introduction to Open Telemetry
- 0:51Understanding User Monitoring
- 2:09Challenges in Frontend Instrumentation
- 3:13Exploring Open Telemetry for Frontend
- 5:03Demo: Record Store Application
- 6:47Implementing Logs, Metrics, and Traces
- 11:04Core Web Vitals and Metrics
- 17:36Tracing and Instrumentation Details
- 25:25Q&A Session
related talks
40mObservability for All!
34mOpenTelemetry for Dummies: Instrumenting Go Apps
26mObservability for Your Internal Developer Platform: Instrumenting Bac...
01h 00mPractical OpenTelemetry in Javascript/Typescript
44mOpenTelemetry in the JavaScript World: Taming Observability in Web Apps
55mCloud-Native Observability with OpenTelemetry
37mObservability For You And Me With Opentelemetry
12mLightning Talk: Get Started with OTel in 15 minutes - The JavaScript Journey