Carly Richmond

Evaluating the performance of React applications is hard! OpenTelemetry (or OTel) can provide tracing capabilities to identify bottlenecks. But when it comes to performance metrics, client instrumentation is currently under development. In this talk, I will share how to instrument a React application with OTel for tracing and how a RUM agent (in this case, Elastic's) can be used to collect page load and metrics for diagnosing slowness in production applications.

Observability is the ability to measure the current state of a system. Backend engineers are becoming more familiar with the 3 pillars of observability, and technologies such as OpenTelemetry that can be used to instrument applications and diagnose issues. Yet in the frontend world, we're behind the curve.
Join me as I dive into the tools and techniques we can use to instrument, monitor and diagnose issues in our production React applications. I'll cover RUM agents and React framework extensions, and the metrics and traces they provide, how to combine them with backend tracing for a holistic picture, and how Synthetic Monitoring and alerting in Observability platforms can help us be alerted to issues impacting users in the UIs we build and maintain.

Despite the emergency of DevOp to unite development, support and SRE factions together using common processes, we still face cultural and tooling challenges that create the Dev and Ops silos. Specifically, we often use different tools to achieve similar testing: case in point validating the user experience in production using Synthetic Monitoring and in development using e2e testing. By joining forces around common tooling, we can 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, GitHub Actions and Elastic Synthetics.

Despite the emergency of DevOps to unite development, support and SRE factions together using common processes, we still face cultural and tooling challenges that create the Dev and SRE silos. Specifically, we often use different tools to achieve similar testing: case in point validating the user experience in production using Synthetic Monitoring and in development using E2E testing.
By joining forces around common tooling, we can 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 for JavaScript-based applications using Playwright with Typescript, GitHub Actions and Elastic Synthetics.

Over the last few years, there has been a great focus on shifting tests left to earlier in the software development cycle. It's great that the emergence of trends such as e2e testing has enabled us to validate the user workflow earlier. However, they do not eliminate the need to monitor this workflow against a live production system. I have seen that the segregation of development and support teams leads to both teams using different tools to build similar automation that simply targets different environments of the same software.
By joining forces, we can build automated scripts that can be used both for production monitoring and testing within CI. In this talk, I will discuss the causes of this cultural divide, and why this needs to change for us to shift user testing both left and right. Furthermore, I shall show how this can be achieved using Playwright and Elastic Synthetics and also chat through the challenges you may face shifting left and right.