How to instrument a React app for observability (traces, performance insights, debugging user flows), common pitfalls, and practical implementation tips.

How to instrument a React app for observability (traces, performance insights, debugging user flows), common pitfalls, and practical implementation tips.

Observability is essential for developing and maintaining reliable and performance React applications. By the end of this talk, you will have a practical guide on how to make your React applications more observable and resilient using OpenTelemetry.

We often shine a light on backend performance, closely tracking every request, service, and infrastructure element, but the frontend often doesn’t receive the same level of attention.

In this session, we’ll dive into how monitoring the frontend with Core Web Vitals and synthetics can provide meaningful insights into user behavior and application health. Core Web Vitals serve as benchmarks for the user experience, measuring key aspects like page load speed, interactivity, and visual stability. Meanwhile, synthetics let us simulate user journeys to proactively identify issues before they affect real users. Together, these tools bring essential visibility to the frontend, enabling data-driven decisions that genuinely improve the user experience.