Background

Before joining Elastic as a Developer Advocate, I spent over 10 years working for a bank as a frontend engineer. I have felt the pain of trying to diagnose issues and errors in UIs using logs and diving into minified JavaScript code.

In that time, the state of DevOps and SRE has established many practices to help developers instrument their applications to identify unexpected behaviour and performance issues. These practices are generally, backend focused. By combining backend tracing with frontend tracing and metrics, we can better understand how our application behaves and where the issue lies.

Outline

I will discuss how to combine logs, metrics and traces from application services with tools for frontend instrumentation, specifically:

1. An overview of key observability signals (for anyone unfamiliar with them), and why logs are insufficient in diagnosing issues in our UIs.
2. An examination of how RUM agents work, using the Elastic RUM agent as an example, and the metrics and tracing information they capture that relate to the observability pillars including Google Core Web vitals, latency metrics and traces.
3. Examples showing how front-to-back tracing can be achieved using OpenTelemetry instrumentation combined with existing RUM agents. I'll also touch on the state of the Client Implementation (RUM) approach within the CNCF OpenTelemetry community.
4. An overview of RUM metrics that can be captured to help track usage, potentially as KPIs, and how they can be collected.
5. An outline of what Synthetic Monitoring is, using Playwright and Elastic Synthetics as an example. I'll also cover how it can be used with alerting and SLOs to alert SREs of potential issues in our applications.

Target Audience

I believe the following individuals would be interested in this talk:

1. UI Developers interested in observing their applications and unsure how to instrument their applications or the tools currently available.
2. DevOps and SRE engineers looking to monitor frontends as part of a wide system-estate.
3. More experienced frontend engineers or designers looking for tools to measure application performance as a regular best practice compared to ad-hoc profiling of web applications.
4. Tech leads and team leads looking for ways to be alerted to potential application issues and behaviours that impact the user experience.