Más allá de la Consola: Navegando JavaScript con Observabilidad

Rate this content
Bookmark

¡Embárcate en un viaje más allá de los registros de consola! Esta sesión revela el poder de la observabilidad en el mundo de JavaScript, ofreciendo ideas prácticas y ejemplos del mundo real para potenciar tu flujo de trabajo de desarrollo. Desde localizar errores elusivos hasta optimizar las experiencias de usuario, descubre el arte de hacer que tu código sea transparente, rastreable y resistente. Eleva tu destreza en JavaScript con el dominio de la observabilidad.


El desarrollo de JavaScript está evolucionando, y tu enfoque para comprender y optimizar el código también debería hacerlo. Esta sesión te proporciona el conocimiento y las herramientas necesarias para mantenerte al día en el cambiante panorama del desarrollo web.

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

Nathan Marrs
Nathan Marrs
7 min
17 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Nathan Mars, líder técnico en Grafana Labs, presenta la observabilidad para aplicaciones JavaScript, resaltando la efectividad de la depuración y solución de problemas con la observabilidad. Open Telemetry se presenta como una forma estandarizada de obtener datos del sistema y Grafana como una plataforma para monitorear métricas, registros, trazas y perfiles. La charla también enfatiza la aplicabilidad de la observabilidad en el front-end utilizando GrafanaFerro para recopilar métricas como la carga de la página, errores y sesiones de usuario.

1. Introducción a la Observabilidad

Short description:

Hola, soy Nathan Mars, el líder técnico de Grafana Labs. Permíteme mostrarte cómo llevar la observabilidad a tus aplicaciones JavaScript. Aprende a depurar y solucionar problemas en aplicaciones modernas de manera efectiva utilizando la observabilidad.

Hola, mi nombre es Nathan Mars y soy el líder técnico de data visualization en Grafana Labs. Hoy estoy emocionado de compartir contigo cómo llevar la observabilidad a tus aplicaciones JavaScript. Si quieres descubrir por qué tu aplicación se está ejecutando demasiado lenta, está rota, o simplemente quieres mejorar su calidad de código, esta charla es para ti.

Comencemos con la historia. Imagina esto. Es una tarde de viernes y recibes un mensaje de tu jefe de que hay un error misterioso en producción. ¿Es hora de entrar en pánico? ¿Tendrás un fin de semana? Tal vez sí, tal vez no. Afortunadamente, esta empresa ficticia solo tiene un único servidor monolítico, y tanto tu servidor como el frontend están escritos en JavaScript. Así que tienes un arma secreta. El viejo y confiable console.log. Te sumerges en el código y agregas docenas de declaraciones console.log en un intento de localizar la causa raíz del error. Después de mucho ensayo y error, localizas el problema en la lógica de eliminación del carrito de tu servidor node. Solucionas el error y envías el código directamente a producción. Crisis evitada. Pero, ¿qué pasaría si estuvieras trabajando de manera más realista en una empresa con mucha más complejidad, donde tu aplicación está desplegada en todo el mundo y cada solicitud interactúa con un enjambre de microservicios? Ahí es donde console.log nos falla. Entonces, ¿qué podemos hacer para asegurarnos de que la depuración y solución de problemas en nuestras aplicaciones modernas no sea una pesadilla? La respuesta es la observabilidad.

¿Qué es la observabilidad? Significa cuán bien puedes entender lo que está sucediendo internamente en un sistema basado en sus salidas. A medida que los sistemas se vuelven más distribuidos y complejos, es difícil ver qué está sucediendo dentro de tu aplicación y por qué las cosas pueden estar saliendo mal. Al hablar de observabilidad, necesitamos definir los tipos de datos necesarios para comprender el rendimiento y la salud de nuestras aplicaciones. En términos generales, estos son métricas, registros y trazas. Las métricas son medidas recopiladas a intervalos regulares. La mayoría tiene una marca de tiempo, un nombre, y uno o más valores numéricos. Ejemplos incluyen la tasa de errores, el tiempo de respuesta o la salida. Los registros provienen directamente de tu aplicación, exportando datos detallados y contexto alrededor de un evento. Los ingenieros pueden recrear lo que ha sucedido milisegundo a milisegundo. Los registros deberían ser muy familiares, ya que son básicamente console.logs más escalables y útiles. Las trazas siguen una solicitud desde la solicitud inicial hasta la salida devuelta. Registran la cadena causal de eventos para determinar las relaciones entre diferentes entidades. Las trazas son muy valiosas para resaltar ineficiencias, cuellos de botella y obstáculos en la experiencia del usuario, ya que se pueden utilizar para mostrar la latencia de extremo a extremo de las solicitudes individuales en toda la arquitectura distribuida.

2. Open Telemetry y Grafana para Observabilidad

Short description:

Tenemos una idea de qué es la observabilidad y de qué datos está compuesta. Open Telemetry es la respuesta para obtener estos datos, proporcionando una forma estandarizada de describir lo que está haciendo tu sistema. Una vez que tenemos Open Telemetry configurado, podemos exportar los datos recopilados a Grafana, donde podemos monitorear las métricas, registros, trazas y perfiles de nuestras aplicaciones. La observabilidad no se limita al backend; también se puede configurar para el frontend utilizando GrafanaFerro para recopilar métricas como la carga de la página, errores y sesiones de usuario.

¡Ok, genial! Tenemos una idea de qué es la observabilidad y de qué están compuestos los datos. Esto plantea una pregunta importante. ¿Cómo podemos obtener estos datos? ¿Deberíamos instrumentar manualmente cada servicio, capa por capa? No, esto llevaría tanto tiempo como escribir el código en sí. Afortunadamente, existen algunos proyectos de código abierto increíbles, así como empresas que facilitan mucho esto. La respuesta es Open Telemetry. ¿Qué queremos decir con Open Telemetry? Comencemos con el nombre en sí. Tenemos `open`, como en código abierto, y luego `telemetry`, que es el proceso de recopilar, analizar y transmitir datos desde fuentes remotas para monitorear el rendimiento de los sistemas. La palabra en sí proviene de las palabras griegas `tele`, que significa remoto, y `metron`, que significa medir. Con cualquier aplicación, cuando estás viendo este tipo de datos, tienes dos partes que deben unirse. La primera es descubrir cómo generar y transmitir esos datos. La segunda parte es decidir qué hacer con esos datos. Open Telemetry se ocupa de la primera parte. Hasta hace poco, realmente no había una forma estandarizada de describir lo que está haciendo tu sistema. Este problema se ha visto agravado por la gran variedad de lenguajes de programación y computadoras en uso, lo que dificulta la construcción de herramientas de observabilidad estandarizadas. Resolver este problema es el núcleo del proyecto Open Telemetry, proporcionando una estandarización para describir lo que están haciendo los sistemas distribuidos, sin importar el lenguaje de programación o los sistemas informáticos que estés utilizando. Hoy en día, el proyecto Open Telemetry se puede describir como una colección de herramientas, API, y SDK utilizados para instrumentar, generar, recopilar y exportar datos de telemetría para que podamos analizar esos datos con la plataforma que elijamos. Dadas las limitaciones de tiempo, no podré guiarte completamente en la configuración de Open Telemetry, pero puedo proporcionarte algunos recursos para ayudarte a comenzar. Una vez que tenemos Open Telemetry configurado, estamos recopilando datos y ahora necesitamos exportarlos a algún lugar para visualizarlos. Veamos cómo puedes usar Grafana, la principal tecnología de código abierto para paneles y visualización, para analizar estos datos y monitorear tu aplicación. Para comenzar, primero debes instalar las bibliotecas de instrumentación. En el caso de una aplicación de node, deberás instalar tanto las API de Open Telemetry como los paquetes de auto-instrumentación de node. Luego, debes configurar tu aplicación para exportar los datos de telemetría. Escribiremos un script básico de bash que configure Open Telemetry y ejecute nuestra aplicación. Para obtener las variables de entorno de autenticación, deberás configurar una cuenta gratuita en Grafana Cloud y configurar Open Telemetry para tu pila de Grafana Cloud. Luego, puedes elegir un nombre de servicio. Digamos que este es nuestro servicio de carrito, y luego ejecuta tu aplicación a través del script de shell y realiza solicitudes al servicio para enviar los datos de telemetría a Grafana Cloud. Dentro de Grafana Cloud, ahora puedes observar tu servicio y la observabilidad de la aplicación. Dentro de la observabilidad de la aplicación, puedes monitorear las métricas, registros, trazas y perfiles de tus servicios. Los perfiles aún no los hemos mencionado, identifican los cuellos de botella de rendimiento en el código de tu aplicación. Ahora que tenemos estos datos, ¿qué puedes hacer con ellos? Bueno, puedes configurar alertas y guardias para ayudar a tu equipo a saber cuándo algo está saliendo mal, como si el uso de CPU de tu aplicación de node supera un umbral determinado. Dentro de la observabilidad de la aplicación, también puedes desencadenar un incidente que incluye automáticamente el contexto importante de los datos intermedios. Mientras investigas un incidente, incluso puedes ejecutar análisis de aprendizaje automático a través de investigaciones SIFT, un asistente de diagnóstico poderoso que te ayuda a analizar holísticamente la telemetría de tu sistema durante las investigaciones. Esto se logra mediante comprobaciones como agrupar registros de error similares, identificar recursos que tuvieron una implementación reciente, identificar bloqueos de cubos y más. La observabilidad no se limita solo al backend. También puedes configurar la observabilidad para tu frontend para recopilar métricas como la carga de la página, errores, sesiones de usuario, registros y eventos personalizados, y más. Para comenzar a capturar telemetría de tus aplicaciones frontend dentro de Grafana, puedes configurar GrafanaFerro en tu inicialización de JavaScript código. Ahí lo tenemos, cómo puedes obtener información valiosa y mejorar tus aplicaciones JavaScript más allá de depender de los console.logs. Gracias por tu tiempo hoy.

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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
De la Fricción al Flujo: Depuración con Chrome DevTools
JSNation 2024JSNation 2024
32 min
De la Fricción al Flujo: Depuración con Chrome DevTools
The Talk discusses the importance of removing frictions in the debugging process and being aware of the tools available in Chrome DevTools. It highlights the use of the 'Emulate a Focus Page' feature for debugging disappearing elements and the improvement of debugging tools and workflow. The Talk also mentions enhancing error understanding, improving debugging efficiency and performance, and the continuous improvement of DevTools. It emphasizes the importance of staying updated with new features and providing feedback to request new features.
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.
Depuración con Chrome DevTools
JSNation Live 2021JSNation Live 2021
11 min
Depuración con Chrome DevTools
Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.
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.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Depuración del Rendimiento de React
React Advanced 2023React Advanced 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
El Masterclass de Clinic.js
JSNation 2022JSNation 2022
71 min
El Masterclass de Clinic.js
Workshop
Rafael Gonzaga
Rafael Gonzaga
Aprende las formas de la suite de herramientas clinic, que te ayudan a detectar problemas de rendimiento en tus aplicaciones Node.js. Este masterclass te guiará a través de varios ejemplos y te proporcionará los conocimientos necesarios para hacer pruebas de rendimiento y solucionar problemas de E/S y del bucle de eventos.
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
JSNation 2023JSNation 2023
44 min
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
WorkshopFree
Ryan Albrecht
Ryan Albrecht
¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.
Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).
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