#observability

Showcasing adding observability with OpenTelemetry. Benefits of extensive telemetry data for insights. Contrasting uninstrumented, manual, and automatic instrumented apps. Example of instrumenting fetch calls for telemetry signals. Technique for modifying functions without core updates. Using JS proxy as a modern approach for patching. OpenTelemetry standardizes instrumentation with APIs and tools. Example of setting up OpenTelemetry with instrumentations.

Hi, everyone! My name is Yash Varma, and I'm a software engineer and computer researcher. I'm an open telemetry enthusiast, working on creating a vendor-neutral observability framework. Today's talk is titled as Observability Matters, this time for frontend. We'll cover the evolution of ZEP, the understanding of observability, current state of front-end monitoring tools, core essence of front-end observability, and front-end observability direction. Observability is about understanding what's happening inside the system based on its internal behavior or output. Front-end developers often lack observability compared to back end developers. Synthetic monitoring and real user monitoring are two common tools used by frontend developers. Front-end observability allows us to understand application performance for different users and situations, connecting the dots and gaining insight into core web vitals and user sessions. It's time to adopt observability as a culture and break down silos between front-end and back-end to better understand the entire user experience.

In this talk, observability in React web applications is discussed, covering Rome agents, open telemetry, and synthetic monitoring. The importance of logs, metrics, and traces in tracking application behavior and identifying issues is explained. The concept of a real user monitoring agent (rum agent) for JavaScript applications is introduced. Instrumenting the rum agent and React applications is explained, along with the caution to be mindful of the bundle size. Traces, open telemetry, and instrumentation are explored, including how Core Web Vitals, traces, and open telemetry can provide insights and enable auto-instrumentation. Synthetic monitoring using Playwright tests and the process of converting tests into monitors with configuration is covered. Finally, running and monitoring definitions in production is discussed, highlighting the ability to evaluate user behavior, simulate activities, and address issues proactively.

Nathan Mars, tech lead at Grafana Labs, introduces observability for JavaScript applications, highlighting the effectiveness of debugging and troubleshooting with observability. Open Telemetry is presented as a standardized way to obtain system data and Grafana as a platform for monitoring metrics, logs, traces, and profiles. The talk also emphasizes the applicability of observability to the front end using GrafanaFerro to collect metrics like page load, errors, and user sessions.

Yash Rajavarma introduces observability and explains its importance for developers. He discusses how OpenTelemetry can empower Node.js applications by providing easy instrumentation and management of telemetry data. OpenTelemetry simplifies the implementation of observability and is designed to benefit developers.

Grafana uses React to power its open source platform, leveraging its vast ecosystem, improved performance, and community contributions. The choice of state management tool depends on the team's problem space. React Hooks have posed challenges but have also been a powerful tool for developers. The new Scenes library simplifies development and reduces the learning curve. Despite challenges, React remains a powerful tool for complex frontends, and Grafana will continue to use it.

Observability with Diagnostics Channel and async local storage allows for high-performance event tracking and propagation of values through calls, callbacks, and promise continuations. Tracing involves five events and separate channels for each event, capturing errors and return values. The span object in async local storage stores data about the current execution and is reported to the tracer when the end is triggered.

Baseline provides observability for serverless architectures and has created an innovation engine within their team. They measure team performance using Dora metrics and the Accelerate book. Baseline emphasizes the importance of foundations, streamlined testing, and fast deployment. They practice observability-driven development and incorporate observability as part of their development lifecycle. Baseline believes in building a culture that fosters ownership and democratizes production.

Observability is a crucial tool for engineers to ship reliable websites and have a good developer experience. Metrics, logs, and traces are fundamental data types for achieving observability. OpenTelemetry is an open source standard for observability data, and instrumentation can be done manually or automatically. Data collection and transportation can be handled by packages built by the OpenTelemetry community, and the collector running can add security benefits. Grafana is used for data visualization, and it allows for analyzing web performance, exceptions, and traces. Traces capture user interactions and provide insights into user behavior and error occurrences. Leveraging these tools allows for gaining insights into various parts of the system and improving engineering goals.