> Markdown version of [/videos/2001-otel-you-it-s-not-just-for-backend?t=375](https://www.wearedevelopers.com/videos/2001-otel-you-it-s-not-just-for-backend?t=375). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# OTel You It's Not Just for Backend!

Is your broken UI caused by a client-side exception or a stalled backend microservice? Learn how frontend OpenTelemetry bridges the full-stack divide to instantly pinpoint production bottlenecks.

- **Speakers:** [Carly Richmond](https://www.wearedevelopers.com/@carly-richmond)
- **Event:** World Congress 2026 Europe - Virtual Stage
- **Published:** July 2, 2026
- **Duration:** 30:57
- **URL:** https://www.wearedevelopers.com/videos/2001-otel-you-it-s-not-just-for-backend

## Summary

Frontend debugging traditionally relies on `console.log` statements that rarely leave the user's browser, creating severe visibility gaps in production. When a user reports a broken interface, identifying whether the root cause is a client-side exception or a stalled backend microservice becomes a guessing game. By adopting OpenTelemetry in the browser, engineering teams can replace disparate real user monitoring and application performance monitoring tools with a unified, vendor-agnostic standard that bridges the frontend-to-backend divide.

Leveraging the JavaScript OpenTelemetry SDK enables the capture of structured logs, metrics, and traces directly from web applications. Implementing this successfully requires routing signals through an OpenTelemetry Collector or proxy to bypass restrictive CORS policies. Once configured, a browser detector automatically enriches telemetry with crucial diagnostic attributes like user agent and deployment environment, which are vital for replicating esoteric cross-browser issues. Furthermore, integrating Google’s Web Vitals library allows teams to track Core Web Vitals based on real user traffic, offering a more accurate picture of performance than synthetic tests from tools like Lighthouse.

Beyond baseline performance tracking, custom metric counters can measure specific feature adoption, helping teams prioritize backend scaling for high-traffic events. The true power of frontend OpenTelemetry emerges in distributed tracing. By utilizing W3C standard trace context and baggage propagators, engineering teams can connect frontend user interactions—such as document loads, HTTP fetches, or search inputs—directly to the resulting backend service execution. This continuous span correlation visualizes the exact latency footprint of an operation, proving definitively whether a bottleneck lives in the browser or deep within the server architecture.

**Keywords:** opentelemetry, frontend instrumentation, javascript SDK, core web vitals monitoring, distributed tracing, W3C trace context, CORS proxy routing, opentelemetry collector, real user monitoring, structured browser logging, span propagation, telemetry correlation, largest contentful paint, browser diagnostics, application performance monitoring

## Chapters

1. **Importance of OpenTelemetry in front-end web applications** (00:01) — How extending observability to the browser provides a holistic view of system health.
1. **Limitations of relying on console.log in production** (01:25) — Why failing to forward unstructured logs hides critical client-side errors from external users.
1. **Distinguishing front-end issues from back-end service failures** (03:01) — How complex ecosystems and external factors like browser compatibility mask the true source of errors.
1. **Understanding logs, metrics, and traces for observability** (04:51) — How combining structured messages, quantifiable measures, and execution pathways uncovers latency and system failures.
1. **Unifying observability layers with the OpenTelemetry standard** (06:15) — How replacing disparate RUM and APM agents with a vendor-agnostic standard improves cross-layer correlation.
1. **Experimental JavaScript SDK and demo application architecture** (08:02) — Setting up a Svelte front-end to send experimental client telemetry through a proxy to an Elastic cluster.
1. **Overcoming cross-origin resource sharing policy blocks for telemetry** (10:15) — How configuring access control headers on a proxy ensures telemetry data successfully reaches the collector.
1. **Creating robust front-end resources with browser diagnostic attributes** (11:39) — Capturing useful user agent data and appending custom version tags to isolate browser-specific bugs.
1. **Instrumenting front-end logs using the OTLP exporter** (14:44) — Emitting structured logs directly to a back-end utilizing a batch log record processor.
1. **Measuring true user experience with Core Web Vitals** (16:20) — Why relying on live traffic metrics provides more accurate performance data than synthetic testing tools.
1. **Configuring periodic metric readers and observable gauges** (18:24) — Implementing plugins and callbacks to capture specific Core Web Vitals values continuously.
1. **Tracking custom feature adoption using metric counters** (21:54) — Creating custom counters to monitor UI interactions and understand product usage trends over time.
1. **Configuring trace providers and propagation context managers** (23:43) — Utilizing zone context managers and W3C propagators to correlate spans between async front-end threads.
1. **Registering instrumentations for document load and user interaction** (26:53) — Correlating fetch requests and user inputs with back-end processing times to identify performance bottlenecks.

## Related Moments

- [Implementing tracing and metrics code with OpenTelemetry APIs](https://www.wearedevelopers.com/videos/386-telemetry-without-the-tool-tax) (from "Telemetry without the 'Tool Tax'")
- [Mastering advanced browser developer tools for deeper JavaScript debugging](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More")
- [Analyzing telemetry trace results for millisecond response latency](https://www.wearedevelopers.com/videos/1167-maximising-cassandra-s-potential-tips-on-schema-queries-parallel-access-and-reactive-programming) (from "Maximising Cassandra's Potential: Tips on Schema, Queries, Parallel Access, and Reactive Programming")
- [Integrating OpenTelemetry pipeline platforms with embedded third-party observability providers](https://www.wearedevelopers.com/videos/841-hands-on-with-opentelemetry) (from "Hands on with OpenTelemetry")
- [Gathering metrics natively with OpenTelemetry frameworks](https://www.wearedevelopers.com/videos/838-tips-techniques-and-common-pitfalls-debugging-kafka) (from "Tips, Techniques, and Common Pitfalls Debugging Kafka")
- [Tracing agent telemetry with OpenTelemetry and Jaeger tools](https://www.wearedevelopers.com/videos/1601-one-ai-api-to-power-them-all) (from "One AI API to Power Them All")

## Related Articles

- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [All the videos of Halfstack London 2024!](https://www.wearedevelopers.com/magazine/521-all-the-videos-of-halfstack-london-2024)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Endpoint Security Engineer - OT](https://www.wearedevelopers.com/jobs/ext/1306782-endpoint-security-engineer-ot) at **ZEISS Group**