¿Cómo está funcionando mi JavaScript?

Hola, mi nombre es Neil Manvar y soy Gerente de Ingeniería de Soluciones en Sentry. Hoy voy a hablar sobre cómo podemos monitorizar nuestras aplicaciones JS para averiguar cómo se comportan en los entornos desplegados y actuar en base a esa información y seguir adelante.

Primero, JavaScript es complicado, ¿verdad? Como se ejecuta en el navegador, está ofuscado y cuando algo sale mal, ya sea un error o una ralentización, no siempre tenemos la información que necesitamos. Al mismo tiempo, estamos lanzando cada vez más y más de estas aplicaciones, y estamos tratando de iterar en ellas cada vez más rápido porque así es como se hace el negocio ahora, a través de la capa de aplicación, y ahí es donde cada vez más lógica va a vivir. Y vamos a estar iterando en esta lógica de forma continua.

Las aplicaciones también se están volviendo más complejas. No solo hay back-ends y microservicios, sino que también hay más cosas sucediendo en el front-end, hay más trabajo pesado y incluso estamos haciendo cosas como micro front-ends para separar estas cosas. Y cuando las cosas van mal, es un problema para todos. Los desarrolladores se ven alejados de las cosas que necesitan hacer, trabajar en nuevas características, y luego luchar contra este problema. Los clientes potencialmente se van, y las métricas también se ven afectadas, ¿verdad? Para el equipo de desarrollo, los tiempos medios de detección y solución se ven afectados. Los desarrolladores quieren centrarse en la calidad del código y en la eficiencia con la que pueden implementarlo. Y el equipo de producto está mirando todo esto en una imagen general. Cuando los ingresos se ven afectados, quieren lanzar todas las nuevas características en el momento adecuado, y cuando se compromete la velocidad. Así que eso es un problema.

Entonces, ¿qué podemos hacer al respecto en el contexto de las aplicaciones JavaScript? Tenemos todo el monitoreo relacionado con nuestra infraestructura, pero el monitoreo de la aplicación, especialmente cuando se ejecuta en el lado del cliente, es muy deficiente. Ahí es donde entra Sentry. Te dirá cuando tu aplicación JS está rota, cuando es lenta y exactamente por qué eso está sucediendo, y toda la información y datos relevantes al respecto. Te llevaré a través de dos aspectos: errores y rendimiento, y los depuraremos.

Pero primero, ¿cómo funciona Sentry? Integras nuestro SDK. Es muy sencillo. Entonces, para JavaScript, puedes hacer una inclusión de CDN, o Yarn add, o NPM install, y luego Sentry.init. Y luego, para el seguimiento o el rendimiento, queremos habilitar la parte de seguimiento del navegador y la tasa de muestreo adecuada. Y la última parte es que también queremos habilitar la salud de la versión, que estará habilitada de forma predeterminada. Pero debes establecer auto session tracking en true para habilitarlo explícitamente.

Ya tengo esto configurado en mi aplicación, que te mostraré en breve, pero la configuración aquí es así, y también estoy subiendo los mapas de origen a Sentry. Ahora déjame causar un error. Aquí, vamos a comprobar. Parece que algo salió mal. Y si no estuviera usando Sentry, es posible que no tuviera esta información. Y puedes ver que está ofuscado, por lo que tendría que reproducirlo y debug desde ahí. Pero como estoy usando Sentry, ¿qué va a pasar? Y puedes ver que esto acaba de llegar. Se me notifica automáticamente que algo está roto. Y aquí está toda la información relevante.

Lo que estoy viendo aquí es el problema de Sentry y esto me dirá el quién, qué, cuándo, dónde, por qué del error. Sentry desofuscará automáticamente estos errores y los agregará en consecuencia. Así que echemos un vistazo. Parece que tenemos un 500 que ocurrió 70,000 veces afectando a 33K usuarios. Ha estado apareciendo durante los últimos 30 días. Parece que está ocurriendo en estos dos navegadores. Afectando a estos clientes y en producción en esta versión. Así puedo entender el impacto agregado de este error y los data a partir de ahí y puedo ver los data específicos del evento aquí mismo. Todos los atributos, especialmente la traza de la pila.

Lo que habrías visto en el navegador se vería algo así. Sentry lo desofuscó y luego te mostró los frames relevantes y las líneas de contexto para que podamos ver exactamente qué salió mal en el código. Parece que no obtuvimos un 200 desde el backend, por lo que se lanzó un error. Luego parece que el cliente estaba agregando varias cosas al carrito, hizo clic en el botón de pago, nuestro backend devolvió un 500 que se propagó a window.onerror, y toda la otra información que el SDK considera útil, la adjuntará y también puedes adjuntar personalmente. El punto es que ahora sé el quién, qué, cuándo, dónde y por qué justo cuando sucedió, no tuve que buscar o preguntar y no nos quedamos ahí. Incluso te mostraremos el commit que causó el error.

Entonces aquí, lo que esto dice es que este commit aquí escrito por Will causó este error. Por lo tanto, Will debería ser asignado a este problema y él puede solucionar este problema en cinco minutos en lugar de tener que entender este código, iterar en él y luego, ya sabes, solucionarlo y luego publicarlo, lo que llevaría horas o días.

Eso es todo para los errores. Queremos que llegue a las personas adecuadas, obtener todos los detalles y solucionarlo para que puedas arreglarlo. Y ya estás dentro y fuera de aquí.

Lo siguiente que quiero explicar es el performance. Entonces, si echo un vistazo aquí mismo, el mismo tipo de aplicación, lo que va a ser diferente aquí es que hay una desaceleración como viste. Permíteme hacer un poco de limpieza de pestañas. Una vez más. Entonces, cuando hago clic en cargar, cuando voy a la página, tarda un tiempo en cargar el resultado. ¿Es un problema en el front-end? ¿Es un problema en el back-end? No lo sé, pero vamos a averiguarlo.

Lo otro es que cuando hago clic en pagar, parece que también está roto. Y hay un problema. Así que voy directamente a Sentry. Voy a performance. Vamos a ver nuestro proyecto de front-end. También estamos obteniendo la información vital de la web. Podemos ver el más grande. La pintura contemporánea es bastante mala aquí, pero déjame abrir la herramienta aquí. Mire uno de estos y veamos exactamente qué está sucediendo.

Parece que el 81% del tiempo se gasta en la solicitud HTTP. Podemos ver cuándo se carga la primera pintura completa del contenido y toda la otra información que adjuntaríamos a un evento. Y también puedo rastrear esto hasta el back-end si quiero ver ese conjunto de data si estoy usando Sentry también. Pero ahora sé exactamente dónde está la desaceleración. ¿Está en el mundo de react? ¿Está en el mundo del navegador? ¿Está en la solicitud HTTP? Y otro caso de uso aquí es que quiero ver todas las transacciones. Así que veamos el pago y puedo ver los problemas relacionados aquí mismo. Esta es la vista agregada. Pero por cuestiones de tiempo, solo voy a sumergirme y puedo ver que hubo un error asociado con esta transacción. Entonces, en el lado derecho, vemos lo que está roto. En el lado izquierdo, vemos lo que es lento.

Y como desarrollador, tengo toda la información que necesitaría para actuar sobre esto y tal vez ni siquiera tenga que reproducirlo, así que puedo solucionarlo. Así que intégrate a tu aplicación Sentry. Obtendrás esta perspectiva.

E incluso veremos estas cosas desde una perspectiva de lanzamiento. Por ejemplo, este lanzamiento se hizo público. Puedo ver las recesiones de fallos, todas las tasas de adopción apropiadas y demás, y luego profundizar en esto en consecuencia para encontrar cualquier problema y transacción que pueda tener que ver con cualquiera de las experiencias que pueden haber sido deficientes.

También puedes consultar este conjunto de data. Tenemos Discover, y también puedes crear paneles con cualquiera de esas consultas. En resumen, Sentry es lo que le dirá a los desarrolladores que su aplicación está rota, es lenta, les dará todos los detalles al respecto para que puedan actuar y centrarse en construir nuevas características.

Lo último que quiero mostrarles es que estamos ofreciendo tres meses gratis de Sentry. Adelante, usa este código sentry.io. Gracias a todos por su tiempo. Sé que esto fue rápido, pero quería cubrir todo el material técnico. Les agradezco. Adiós.