Observabilidad para Desarrolladores de React

Rate this content
Bookmark

La observabilidad es la capacidad de medir el estado actual de un sistema. Los ingenieros de backend están familiarizándose cada vez más con los 3 pilares de la observabilidad y tecnologías como OpenTelemetry que pueden usarse para instrumentar aplicaciones y diagnosticar problemas. Sin embargo, en el mundo del frontend, estamos rezagados.
Únete a mí mientras profundizo en las herramientas y técnicas que podemos usar para instrumentar, monitorear y diagnosticar problemas en nuestras aplicaciones de React en producción. Cubriré agentes RUM y extensiones del marco de React, y las métricas y trazas que proporcionan, cómo combinarlas con el trazado de backend para una imagen holística, y cómo el Monitoreo Sintético y las alertas en plataformas de Observabilidad pueden ayudarnos a ser alertados sobre problemas que afectan a los usuarios en las interfaces que construimos y mantenemos.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

Carly Richmond
Carly Richmond
20 min
28 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
En esta charla, se discute la observabilidad en aplicaciones web de React, cubriendo agentes Rome, open telemetry y monitoreo sintético. Se explica la importancia de los logs, métricas y trazas en el seguimiento del comportamiento de la aplicación e identificación de problemas. Se introduce el concepto de un agente de monitoreo de usuario real (rum agent) para aplicaciones JavaScript. Se explica la instrumentación del rum agent y aplicaciones React, junto con la precaución de tener en cuenta el tamaño del paquete. Se exploran las trazas, open telemetry e instrumentación, incluyendo cómo Core Web Vitals, trazas y open telemetry pueden proporcionar información y habilitar la autoinstrumentación. Se cubre el monitoreo sintético usando pruebas de Playwright y el proceso de convertir pruebas en monitores con configuración. Finalmente, se discute la ejecución y monitoreo de definiciones en producción, destacando la capacidad de evaluar el comportamiento del usuario, simular actividades y abordar problemas proactivamente.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Registro Multihilo con Pino
JSNation Live 2021JSNation Live 2021
19 min
Registro Multihilo con Pino
Top Content
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.
Observabilidad para Microfrontends
DevOps.js Conf 2022DevOps.js Conf 2022
24 min
Observabilidad para Microfrontends
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.
Observabilidad con diagnostics_channel y AsyncLocalStorage
Node Congress 2023Node Congress 2023
21 min
Observabilidad con diagnostics_channel y AsyncLocalStorage
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.
Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad
React Summit 2023React Summit 2023
7 min
Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad
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.
Observabilidad en GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
8 min
Observabilidad en GraphQL
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.
Creando un motor de innovación con observabilidad
Node Congress 2023Node Congress 2023
27 min
Creando un motor de innovación con observabilidad
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.

Workshops on related topic

Escalando Bases de Datos para Aplicaciones Globales sin Servidor
Node Congress 2022Node Congress 2022
83 min
Escalando Bases de Datos para Aplicaciones Globales sin Servidor
WorkshopFree
Ben Hagan
Ben Hagan
Este masterclass discute los desafíos que enfrentan las empresas al escalar la capa de datos para admitir implementaciones multi-región y entornos sin servidor. Las funciones de borde sin servidor y la orquestación de contenedores livianos permiten que las aplicaciones y la lógica empresarial se implementen fácilmente a nivel mundial, dejando a menudo la base de datos como el cuello de botella de latencia y escalabilidad.
Únase a nosotros para comprender cómo PolyScale.ai resuelve estos desafíos de escalabilidad, almacenando en caché de manera inteligente los datos de la base de datos en el borde, sin sacrificar la transaccionalidad o la consistencia. Aprenda a implementar, observar consultas y realizar pruebas de latencia global con funciones de borde utilizando PolyScale.
Tabla de contenidos        - Introducción a PolyScale.ai        - Gravedad de los datos empresariales        - Por qué es difícil escalar los datos        - Opciones para escalar la capa de datos        - Observabilidad de la base de datos        - Gestión de caché con IA        - Aprenda a utilizar PolyScale.ai