How to instrument front-end web applications with OpenTelemetry and Elastic Observability

Description

If you thought OTel was just for backend services and Kubernetes pods, think again. Join Carly as she walks through the state of Client Instrumentation for OpenTelemetry, how to propagate UI and backend signals, and how to find bottlenecks using Elastic. Speaker: Carly Richmond, Manager Developer Advocate, Elastic 00:00 – Why Front-End Telemetry Matters 01:50 – The Hidden Problem: Front-End vs Backend Blame Game 04:10 – What Is OpenTelemetry and Why It’s Different 06:05 – Architecture Overview: Front-End, Proxy, Collector, Elastic 08:00 – Demo Setup: Full-Stack Record Store App 09:40 – Instrumenting the Java Backend (Automatic + Custom Spans) 12:00 – The Proxy Challenge: CORS and OTLP Explained 13:10 – Front-End Instrumentation: Logging and Traces 15:20 – Understanding Context, Baggage, and Propagation 17:00 – Capturing User Interactions and Document Load Times 19:20 – Custom Metrics with Core Web Vitals (Real-User Data) 21:30 – Building Dashboards in Elastic for Real-Time Insights