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.

Despite the emergency of DevOps, software engineers and SREs still use different tools to achieve similar means. Case in point: Synthetic Monitoring versus E2E Testing. We can combine forces and use the same tool for both production monitoring and testing within CI.

In this talk, I will discuss how Synthetic Monitoring and E2E Testing are two sides of the same coin. Furthermore, I shall show how production monitoring and development testing can be achieved using Playwright JS, GitHub Actions and Elastic Synthetics.

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.