React Advanced

React Advanced 2024

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.

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.

Observability for React Developers

Carly Richmond

JS Nation

JSNation 2024

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.

Embark on a journey beyond console logs! This session unveils the power of observability in the world of JavaScript, offering practical insights and real-world examples to supercharge your development workflow. From pinpointing elusive bugs to optimizing user experiences, discover the art of making your code transparent, traceable, and resilient. Elevate your JavaScript craftsmanship with the mastery of observability. JavaScript development is evolving, and so should your approach to understanding and optimizing code. This session arms you with the knowledge and tools needed to stay ahead in the ever-changing landscape of web development.

Beyond the Console: Navigating JavaScript With Observability

Nathan Marrs

Node Congress

Node Congress 2024

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.

Have you ever considered that when we encounter terms like observability and reliability, our initial instinct is usually to attribute them solely to SRE concerns? Yet, upon closer examination, one may realize that actually implementing observability is, in essence, more aligned with the domain of developers. After all, developers are the ones who directly implement the actual logic into our existing codebase, and who better to understand and debug their code than the developers themselves? Through this session, we will emphasize on understanding the importance of observability specifically from a developer's perspective. Let's explore some best practices that help us effectively debug the performance of our Node application and how the inclusion of open source frameworks like OpenTelemetry could be beneficial to us.

Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry

Yash Verma

DevOps.js

DevOps.js Conf 2024

This Talk provides an introduction to Serverless Observability and SLOs, explaining the concept of SLOs and their dependency on transforms. It highlights the codependency between SLOs, SLAs, and SLIs and discusses the importance of well-defined SLOs. The Talk also demonstrates how to create and monitor SLOs and alert rules, emphasizing the benefits of burn rate alerting in reducing alert fatigue and improving user experience.

This talk explores the use case of SLOs and transforms whilst migration to the serverless ecosystem. The talk starts by presenting the reasons why SLOs are important in the SRE/DevOps framework. It then analyses specific use cases of SLOs, the tools used for measuring the efficiency of SLOs and presents the main bottlenecks encountered when defining and adhering to SLOs in the process of migrating to a serverless ecosystem, especially when dealing with burn rates and transforms.By the end of the talk, the audience will be able to subscribe to the following takeaways:SLOs are important in a SRE/DevOps framework and there are numerous advantages for implementing them as long as they adhere to a process of continuous improvement.Adopting the right tools and metrics are paramount in the implementation of SLOs.Migrating to serverless adds pressure to the observability system and it is possible that burn rates and transforms will backfire. Our use case will show how it's possible to mitigate these challenges and learn from similar situations.

Serverless Observability: Where SLOs Meet Transforms

Virginia Diana Todea

React Summit

React Summit 2023

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.

Why does Grafana use React for its frontend? How we leverage React’s features at Grafana What are some pain points we have ran into with using React at Grafana What are lessons learned from adopting React for the past 5+ years?

How Grafana Uses React to Power the World of Observability

Node Congress 2023

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.

Modern tracing products work by combining diagnostics_channel with AsyncLocalStorage. Let's build a tracer together to see how it works and what you can do to make your apps more observable.

Observability with diagnostics_channel and AsyncLocalStorage

Stephen Belanger

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.

How Baselime created a culture where it's possible to move fast, break as little as possible, and recover from failures gracefully. The culture is technically underpinned by Node.js, Event-Driven Architectures (EDAs), and Observability (o11y).

Creating an innovation engine with observability

Boris Tane

React Advanced 2022

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.

Learn how to instrument Node and client applications using OpenTelemetry and popular open-source observability tools like Prometheus and Grafana.

Getting Started with Open Source Observability

Connor Lindsey

DevOps.js Conf 2022

Microfrontends follow the microservices paradigm and observability is crucial for debugging runtime production issues. Error boundaries and tracking errors help identify and resolve issues. Automation of alerts improves incident response. Observability can help minimize the time it takes to understand and resolve production issues. Catching errors from the client and implementing boundaries can be done with tools like OpenTelemetry.

Teams are getting bigger and bigger following the micro-frontends architecture. Observability for teams on a scale becomes even more important in order not only to be able to identify potential issues in the runtime, but also separating the responsibilities. In this presentation we’ll learn how this can achieved. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Observability for Microfrontends

Konstantinos Leimonis

Node Congress 2022

Polyscale is a no-code database edge cache that aims to make caching and speeding up the data layer effortless for developers. It uses AI and machine learning to adjust caching behavior, selectively choosing what to cache and automatically setting cache duration. Polyscale supports multiple databases and provides detailed observability. It eliminates the need for caching at the application tier and offers significant performance gains.

This workshop discusses the challenges Enterprises are facing when scaling the data tier to support multi-region deployments and serverless environments. Serverless edge functions and lightweight container orchestration enables applications and business logic to be easily deployed globally, often leaving the database as the latency and scaling bottleneck. Join us to understand how PolyScale.ai solves these scaling challenges intelligently caching database data at the edge, without sacrificing transactionality or consistency. Get hands on with PolyScale for implementation, query observability and global latency testing with edge functions. Table of contents<ul><li>- Introduction to PolyScale.ai</li><li>- Enterprise Data Gravity</li><li>- Why data scaling is hard</li><li>- Options for Scaling the data tier</li><li>- Database Observability</li><li>- Cache Management AI</li><li>- Hands on with PolyScale.ai</li></ul><a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Scaling Databases For Global Serverless Applications

Ben Hagan

GraphQL Galaxy

GraphQL Galaxy 2020

This Talk discusses how to tool Apollo server with open tracing for observability. OpenTracing is a vendor-agnostic format that works well with distributed systems in microservices. It allows for converting GraphQL tracing data to a vendor-agnostic format and enriching information from GraphQL servers. If providers support OpenTracing, it can be easily integrated.

GraphQL is an immensely powerful tool and while there are tons of resources out there on how to leverage it, there doesn't seem to be much open discussion around Day 2 (maintenance in production) operations of GraphQL. In this talk, we'll be focusing around observability and the various techniques and tools we can use to get a better understanding of how our graphQL services are running in production. More specifically we'll be focusing on combining ApolloServer and OpenTelemetry.

GraphQL Observability

Ashley Narcisse

Lighting Talks - Day 2 - GraphQL

Nikhil Chandrappa

Node Congress 2021

Welcome to the session on comprehensive observability via distributed tracing on Node.js. We'll explore the challenges of microservices and troubleshoot distributed applications using an example. Correlation is the missing piece in troubleshooting distributed applications. Distributed tracing helps pinpoint issues that logging or metrics may miss, reducing mean time to resolution. It provides visualization of microservices architecture, actionable data, and enables code optimization.

The benefits of Node.js to develop real-time applications at scale are very well known. As Node.js architectures get more and more complex, visualization of your microservice-based architecture is crucial. However, the visualization of microservices is incredibly complex given the scale and the transactions across them. You not only need to visualize your Node.js applications but also analyze the health, flow, and performance of applications to have a complete observability solution. In this talk, we'll go over the challenges of scaling your Node.js applications and tools (such as distributed tracing) available to you to scale with confidence. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Comprehensive Observability via Distributed Tracing on Node.js8

Chinmay Gaikwad

Today's Talk explores the concept of observability in Node.js, emphasizing the importance of understanding what's happening inside a system without needing to ship new code. The Talk covers various observability tools and techniques, including performance measurement and tracing, HeapSnapshot and Chrome DevTools, the BA Inspector, and external tools like nSolid. nSolid is highlighted as an enhanced observability tool specifically built for Node.js, offering low-input performance insights and greater security for mission-critical applications.

Imagine your productivity and confidence developing web apps without chrome dev tools. Many do exactly that with Node.js.It is important to observe and learn what’s happening in your app to stay competitive and create the most performant and efficient Node.js applications, following the best practices.In this talk, we will explore useful tools to examine your Node.js applications and how observability will speed up development, produce better code while improving reliability and uptime. Don’t miss it! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Examining Observability in Node.js

Lizz Parody

JSNation Live

JSNation Live 2021

Today's Talk is about logging with Pino, one of the fastest loggers for Node.js. Pino's speed and performance are achieved by avoiding expensive logging and optimizing event loop processing. It offers advanced features like async mode and distributed logging. The use of Worker Threads and Threadstream allows for efficient data processing. Pino.Transport enables log processing in a worker thread with various options for log destinations. The Talk concludes with a demonstration of logging output and an invitation to reach out for job opportunities.

Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.

#observability