Synthetic monitoring uses global testing infrastructure to track user pathways and gauge the influence of web and front-end performance on user experience. It provides comprehensive insight into your website's performance, functionality, and availability from development to production, allowing you to identify and resolve issues before they affect your customers. This talk will show how to monitor a React application.

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.

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.