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?

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 Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
React es una biblioteca para "renderizar" UI a partir de componentes, pero muchos usuarios se encuentran confundidos acerca de cómo funciona realmente el renderizado de React. ¿Qué significan términos como "renderizado", "reconciliación", "Fibers", y "committing"? ¿Cuándo ocurren los renderizados? ¿Cómo afecta el Contexto al renderizado, y cómo las bibliotecas como Redux causan actualizaciones? En esta charla, aclararemos la confusión y proporcionaremos una base sólida para entender cuándo, por qué, y cómo React renderiza. Veremos: - Qué es realmente el "renderizado" - Cómo React encola los renderizados y el comportamiento de renderizado estándar - Cómo se utilizan las claves y los tipos de componentes en el renderizado - Técnicas para optimizar el rendimiento del renderizado - Cómo el uso del contexto afecta al comportamiento del renderizado - Cómo las bibliotecas externas se integran en el renderizado de React
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
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
¡React 18! ¡Funciones concurrentes! Tal vez ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las características de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar
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
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Nuestra comprensión del rendimiento y la experiencia del usuario ha evolucionado mucho a lo largo de los años. Las herramientas de desarrollo web necesitan evolucionar de manera similar para asegurarse de que sean centradas en el usuario, accionables y contextuales donde se refiere a las experiencias modernas. En esta charla, Addy te guiará a través de cómo Chrome y otros han estado pensando en este problema y qué actualizaciones han estado haciendo a las herramientas de rendimiento para reducir la fricción para construir grandes experiencias en la web.
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
¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.

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.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced Conference 2022React Advanced Conference 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.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.