Monitorización del rendimiento de una aplicación heterogénea de GraphQL Mesh

Rate this content
Bookmark

Hoy en día es bastante fácil integrar GraphQL en el lado del cliente y del servidor y ponerlo en funcionamiento rápidamente con cualquier servicio en la nube de tu elección, como por ejemplo Netlify o Vercel. Con esta configuración, ¿cómo podemos monitorizar el rendimiento y observar todas las partes juntas para encontrar cualquier causa raíz en caso de problemas?

This talk has been presented at GraphQL Galaxy 2021, check out the latest edition of this Tech Conference.

FAQ

Robert Horslowski es un profesional que trabaja en Instaun en la empresa IBM y ha dado charlas y creado cursos sobre GraphQL, incluyendo una charla en 2016 sobre GraphQL en Relay y un curso en video en 2018 sobre un clon de trailer basado en GraphQL.

Un service mesh es una infraestructura que facilita la comunicación entre servicios, donde cada elemento de la red puede comunicarse con los demás. Es importante para el monitoreo de rendimiento porque ayuda a gestionar y solucionar problemas en las comunicaciones y dependencias entre servicios, lo cual es crítico cuando los APIs son el centro del negocio.

Robert menciona el uso de ApolloEngine y Instana para monitorear el rendimiento de GraphQL, destacando cómo estas herramientas permiten rastrear métricas y comunicaciones dentro de un service mesh.

Robert encontró un problema de rendimiento en una aplicación de demostración tipo tablero Kanban, donde la comunicación de la base de datos era lenta en ocasiones. Identificó que el uso de un backend de servicio GraphQL con un plan premium era la causa del problema.

Para rastrear el rendimiento en aplicaciones que utilizan funciones de Netlify ejecutadas en AWS Lambda, Robert sugiere usar 'instanawrapper', una herramienta que facilita el monitoreo del servidor de aplicaciones Apollo.

Según Robert Horslowski, Apollo Studio es excelente para administrar el esquema de GraphQL y realiza una observabilidad completa con características adicionales, lo que permite a los desarrolladores tener un contexto completo de su aplicación en producción y encontrar causas raíz de manera eficiente.

Robert Hostlowsky
Robert Hostlowsky
8 min
10 Dec, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La monitorización del rendimiento es crucial para las empresas, ya que a los usuarios no les gusta esperar. La herramienta ApolloEngine ayuda a rastrear y analizar métricas, revelando variaciones en el tiempo de respuesta y otra información. Instana combina trazas para la comunicación de servicios con métricas de infraestructura y monitorización de usuarios finales, implementando telemetría abierta. Apollo Studio es excelente para gestionar el esquema de GraphQL y proporciona una observabilidad completa, lo que permite un análisis eficiente de la causa raíz.

1. Performance Monitoring and Issue Investigation

Short description:

Soy Robert Horslowski, un ingeniero de software en Instaun en la empresa IBM. Tengo experiencia con GraphQL y he encontrado problemas de rendimiento en aplicaciones de demostración en vivo. El monitoreo de rendimiento es necesario porque a los usuarios no les gusta esperar, y las APIs son cruciales para las empresas. Al investigar un problema real de rendimiento, descubrí que la comunicación con la base de datos a veces era muy lenta. La herramienta ApolloEngine ayudó a rastrear y analizar métricas, revelando variaciones en el tiempo de respuesta y otra información.

¡Hola a todos! Estoy muy feliz de estar aquí para tener la oportunidad de compartir mis pensamientos y aprendizajes sobre performance con GraphQL específicamente en un service mesh. Permítanme presentarme rápidamente. Soy Robert Horslowski, trabajo en Instaun en la empresa IBM y en 2016 di una charla sobre GraphQL en Relay. Más tarde, en 2018, publiqué este curso en video sobre un clon completo de trailer basado en GraphQL. Desde entonces, en 2019, encontré un sutil problema de rendimiento en esta aplicación de demostración en vivo que lo desencadenó todo.

Pero primero, sumerjámonos y veamos qué queremos decir con malla distribuida. Entonces, en realidad no tenemos solo un servicio, sino que típicamente nuestro panorama desde una infraestructura se ve así. Por supuesto, puede haber una o dos máquinas que se caigan, etc. Pero esto se maneja típicamente. Pero ¿qué sucede a nivel de servicio? Y aquí también, esto es típicamente cómo se ve una malla de servicios cuando lo examinas y tienes una representación del tráfico de la comunicación. Y también aquí, por supuesto, hay muchas comunicaciones en ejecución y esto típicamente no es visible si no tienes una herramienta así. Pero primero, hagámonos la pregunta, ¿por qué es necesario el monitoreo de performance? Sí, es bastante simple. A los usuarios no les gusta esperar. Y típicamente, cuando hoy en día tenemos un service mesh o al menos se utiliza algún servicio. Tal vez este sea un servicio para un servicio de pago o algo así. Y típicamente, otros servicios dependen de eso. Y esto debe ser rastreado de alguna manera. Y en caso de una falla, por supuesto, debe ser fácilmente encontrado y solucionado. ¿Por qué es esto importante? Típicamente, hoy en día, cuando las APIs son el centro de un negocio, por ejemplo, también aquí, es muy importante que los tiempos sean los esperados. Nadie quiere esperar por algo y luego descubrir que no fue su culpa, sino de otra persona. E incluso mientras puede haber existido un contrato, llamado SLA, donde defines que un servicio específico debe responder en algún momento. Y si no lo hace, ahí es donde alguien tiene un problema y el negocio tiene un problema al final. Pero vamos a investigar un problema real de performance. Como mencioné, tuve un problema con mi demostración en vivo en ese momento. Es un simple tablero Kanban con algunas transacciones de base de datos o un backend donde se almacenan algunos datos, por supuesto, pero también, en ese momento, la comunicación de la base de datos era gráfica. Entonces, por alguna razón, era muy lento, pero otras veces era muy rápido. No podía decir dónde estaba el problema, pero a veces era realmente muy lento, y solo había una herramienta disponible, o estaba allí, se llamaba ApolloEngine. Era bastante simple agregar una clave de API en el servidor de Apollo al usar la biblioteca del servidor de Apollo, y luego automáticamente rastreaba estas métricas y las mostraba aquí en el tablero. Entonces puedes ver aquí, esta es la variación, digamos, o el espectro de los tiempos de respuesta, hasta 13 segundos para una llamada, lo cual, por supuesto, no es aceptable, y hay más información como en el lado derecho,

2. Instana y Apollo Studio

Short description:

Hace un año, tuve la oportunidad de usar Instana, que combina trazas para la comunicación de servicios con métricas de infraestructura y monitoreo de usuarios finales. Implementa telemetría abierta. Para recopilar datos de usuario, inyecta el fragmento UEM en el sitio web. Es fácil rastrear las trazas del backend y analizar el recuento de consultas. También monitoreo mi aplicación que se ejecuta en funciones de Netlify usando el instanawrapper. El verdadero problema fue usar un backend de servicio GraphQL con un plan premium. Apollo Studio es excelente para administrar el esquema de GraphQL y proporciona una observabilidad completa, lo que permite un análisis eficiente de la causa raíz.

por lo que el número de consultas y demás. Esto fue hace un año. Mientras tanto, mejoraron su servicio y también tienen algún seguimiento incorporado, que también se puede habilitar muy fácilmente y para servicios freemium específicos también es bastante fácil y no cuesta nada. Pero esto, en ese momento, también me dio un poco de información y también tuve la oportunidad de usar Instana, e Instana combina estas trazas para la comunicación de servicios junto con métricas de infraestructura y también con UEM, es decir, monitoreo de usuarios finales. Y por cierto, implementa telemetría abierta, el último estándar en esta área. Entonces, ¿cómo llegamos allí? Es bastante simple al final. Finalmente, para obtener toda la información del usuario y lo que está haciendo el usuario, solo tienes que inyectar tu fragmento UEM en el sitio web, luego la consulta GraphQL puede recopilar todos los datos, incluso errores de JavaScript y demás. E incluso las solicitudes específicas se pueden encontrar aquí, y luego rastreando, encontramos algunas trazas del backend al final, también muestra la consulta GraphQL. Y en el lado derecho puedes ver alguna información adicional de la operación y demás. Y también podemos realizar más análisis sobre el recuento de consultas y demás. Pero en la actualidad, mi aplicación también se ejecuta en funciones de Netlify, que a su vez se ejecutan en AWS Lambda. Entonces, ¿cómo podemos rastrear eso? Es bastante fácil, solo usando aquí este instanawrapper. Y con esto, pude monitorear el servidor de aplicaciones Apollo aquí como vimos en la diapositiva anterior.

Entonces, finalmente, ¿cuál fue el problema real? Al final, descubrí que el verdadero problema era que en ese momento estaba usando un backend de servicio GraphQL que usaba este plan premium. Ese fue el único problema. En resumen, es bastante fácil. Apollo Studio es excelente para administrar el esquema de GraphQL, y se realiza como una observabilidad completa con todas estas características adicionales, y permite el desplazamiento hacia la izquierda para brindar a los desarrolladores un contexto completo de su aplicación en ejecución en producción. Esto también hace que sea muy eficiente encontrar cualquier causa raíz. Me gustaría decir, permítanme decir, muchas gracias por escuchar. Y para cualquier pregunta, por favor contáctenme en Twitter, en su hosts, o al correo electrónico robertoslofskaya.steiner.com. Y, por supuesto, espero verlos y conocerlos en el chat de la conferencia. Muchas gracias.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

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 🤐)
Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced 2022React Advanced 2022
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.
Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
GraphQL para Desarrolladores de React
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL para Desarrolladores de React
Featured Workshop
Roy Derks
Roy Derks
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.