LogRock: Prueba a través del registro

LogRock: Prueba a través del registro

Llevamos más de 2 años trabajando en nuestro proyecto Cleverbrush . Este es un software para trabajar con gráficos vectoriales. Trabajar con un editor gráfico implica una gran cantidad de casos de uso de aplicaciones. Estamos tratando de ahorrar dinero y tiempo, por lo que optimizamos todo, incluidas las pruebas. Cubrir los casos de prueba con cada opción es demasiado costoso e irracional, especialmente porque es imposible cubrir todas las opciones.

Durante el desarrollo, se creó un módulo para aplicaciones React JS: LogRock (github) .

Este módulo le permite organizar aplicaciones modernas de registro. Según los registros, realizamos pruebas. En este artículo, le contaré sobre las complejidades del uso de este módulo y cómo organizar las pruebas a través del registro.

Cual es el problema

Si compara el programa con un organismo vivo, entonces un error es una enfermedad. La causa de esta "enfermedad" puede ser una serie de factores, incluido el entorno de un usuario en particular. Esto es especialmente cierto si estamos considerando una plataforma web. A veces, una relación causal es muy compleja, y el error que se encontró durante las pruebas es el resultado de una serie de eventos.

Al igual que con las enfermedades humanas, nadie explicará sus síntomas mejor que el paciente, ningún evaluador podrá decir lo que sucedió, mejor que el programa en sí.

Que hacer

Para comprender lo que está sucediendo, necesitamos una lista de acciones que el usuario realizó en nuestra aplicación.

Para que nuestro programa mismo pueda decirnos qué "duele", tomaremos el módulo LogRock (github) y lo asociaremos con ElasticSearch, LogStash y Kibana.


ElasticSearch es un poderoso motor de búsqueda de texto completo. Puedes ver el tutorial de ElasticSearch aquí .
LogStash es un sistema para recopilar registros de varias fuentes, que pueden enviar registros, incluso a ElasticSearch.
Kibana es una interfaz web para ElasticSearch con muchos complementos.

Como funciona

En caso de un error (o solo a pedido), la aplicación envía registros al servidor donde se guardan en un archivo. Logstash guarda datos de forma incremental en ElasticSearch - en la base de datos. El usuario inicia sesión en Kibana y ve los registros guardados.


Parece una Kibana bien sintonizada. Muestra datos de ElasticSearch. Kibana puede mostrar datos en forma de tablas, gráficos, mapas, etc., lo cual es muy conveniente para analizar y comprender lo que está sucediendo con nuestra aplicación.

¡En este artículo, NO discutiré la configuración de ElasticStack!

Crear un sistema de registro

Como ejemplo, integraremos el sistema de registro en una aplicación JS de una página escrita en React. Realmente no importa en qué marco se escribirá su aplicación. Trataré de describir el enfoque de construir un sistema de registro en sí mismo.

1. Cliente

1.0 LogRock. Instalación

Enlace a LogRock

Para instalar, debe realizar:

npm install logrock  yarn add logrock 

1.1 LogRock. Configuración de la aplicación

Para comenzar, envuelva nuestra aplicación en un componente

 import { LoggerContainer } from "logrock"; <LoggerContainer> <App /> </LoggerContainer> 

LoggerContainer es un componente que responde a los errores de su aplicación y forma una pila.

Una pila es un objeto con información sobre el sistema operativo del usuario, el navegador, el botón del mouse o del teclado que se presionó y, por supuesto, el subconjunto de acciones, donde se registran todas las acciones del usuario que realizó en nuestro sistema.

LoggerContainer tiene varias configuraciones, considera algunas de ellas

 <LoggerContainer active={true|false} limit={20} onError={stack => { sendToServer(stack); }} > <App /> </LoggerContainer> 

activo: habilita o deshabilita el registrador

límite: establece un límite en el número de acciones recientes guardadas por el usuario. Si el usuario realiza 21 acciones, la primera de esta matriz se eliminará automáticamente. Por lo tanto, tendremos las últimas 20 acciones que precedieron al error.

onError: la devolución de llamada que se llama cuando se produce un error. El objeto Stack entra en él, en el que se almacena toda la información sobre el entorno, las acciones del usuario, etc. Es a partir de esta devolución de llamada que necesitamos enviar estos datos a ElasticSearch o al backend, o guardarlos en un archivo para su posterior análisis y monitoreo.

1.2 LogRock. Registro

Para realizar un registro de alta calidad de las acciones del usuario, tendremos que cubrir nuestro código con llamadas de registro.

El módulo LogRock viene con un registrador asociado con un LoggerContainer

Supongamos que tenemos un componente

 import React, { useState } from "react"; export default function Toggle(props) { const [toggleState, setToggleState] = useState("off"); function toggle() { setToggleState(toggleState === "off" ? "on" : "off"); } return <div className={`switch ${toggleState}`} onClick={toggle} />; } 

Para cubrirlo adecuadamente con un registro, debemos modificar el método de alternar

 function toggle() { let state = toggleState === "off" ? "on" : "off"; logger.info(`React.Toggle|Toggle component changed state ${state}`); setToggleState(state); } 

Hemos agregado un registrador en el que la información se divide en 2 partes. React.Toggle nos muestra que esta acción ocurrió en el nivel de React, el componente Toggle, y luego tenemos una explicación verbal de la acción y el estado actual que llegó a este componente. Tal separación en niveles no es necesaria, pero con este enfoque será más claro dónde se ejecutó exactamente nuestro código.

También podemos usar el método "componentDidCatch", que se introdujo en React versión 16, en caso de error.

2. Interacción del servidor

Considere el siguiente ejemplo.

Supongamos que tenemos un método que recopila datos de usuario de un servidor. El método es asíncrono, parte de la lógica está oculta en el backend. ¿Cómo registrar este código correctamente?

En primer lugar, dado que tenemos una aplicación cliente, todas las solicitudes dirigidas al servidor pasarán por una única sesión de usuario, sin volver a cargar la página. Para asociar acciones en el cliente con acciones en el servidor, debemos crear un SessionID global y agregarlo al encabezado de cada solicitud al servidor. En el servidor, podemos usar cualquier registrador que cubra nuestra lógica como un ejemplo de la interfaz y, en caso de error, envíe estos datos con el ID de sesión adjunto a Elastic a la placa de back-end.

1. Generamos SessionID en el cliente

 window.SESSION_ID = `sessionid-${Math.random().toString(36).substr(3, 9)}`; 

2. Debemos establecer el SessionID para todas las solicitudes al servidor. Si usamos bibliotecas para consultas, esto es muy simple declarando un SessionID para todas las consultas.

 let fetch = axios.create({...}); fetch.defaults.headers.common.sessionId = window.SESSION_ID; 

3. En LoggerContainer hay un campo especial para SessionID

 <LoggerContainer active={true|false} sessionID={window.SESSION_ID} limit={20} onError={stack => { sendToServer(stack); }} > <App /> </LoggerContainer> 

4. La solicitud en sí (en el cliente) se verá así:

 logger.info(`store.getData|User is ready for loading... User ID is ${id}`); getData('/api/v1/user', { id }) .then(userData => { logger.info(`store.getData|User have already loaded. User count is ${JSON.stringify(userData)}`); }) .catch(err => { logger.error(`store.getData|User loaded fail ${err.message}`); }); 

Cómo funcionará todo: registramos un registro, antes de la solicitud del cliente. Según nuestro código, vemos que ahora comenzará la carga de datos del servidor. Adjuntamos un SessionID a la solicitud. Si nuestro backend está cubierto de registros con la adición de este SessionID y la solicitud falla, entonces podemos ver lo que sucedió en el backend.

Por lo tanto, monitoreamos todo el ciclo de nuestra aplicación, no solo en el cliente, sino también en el backend.

3. El probador

Trabajar con un probador merece una descripción separada del proceso.

Como tenemos una startup, no tenemos requisitos formales y, a veces, no todo es lógico en el trabajo.

Si el probador no comprende el comportamiento, este es un caso que al menos debe considerarse. Además, a menudo, un probador simplemente no puede repetir una situación dos veces. Dado que los pasos que conducen a un comportamiento incorrecto pueden ser numerosos y no triviales. Además, no todos los errores conducen a consecuencias críticas, como la excepción. Algunos de ellos solo pueden cambiar el comportamiento de la aplicación, pero el sistema no los puede interpretar como un error. Para estos fines, en la preparación, puede agregar un botón en el encabezado de la aplicación para forzar el envío de registros. El probador ve que algo no está funcionando bien, hace clic en el botón y envía la Pila con acciones a ElasticSearch.



Sin embargo, si ha ocurrido un error crítico, debemos bloquear la interfaz para que el probador no haga más clic y no entre en un callejón sin salida.

Para estos fines, mostramos la pantalla azul de la muerte.

Vemos en la parte superior el texto con la Pila de este error crítico, y debajo, las acciones que lo precedieron. También obtenemos el ID de error, es suficiente para que el probador lo seleccione y lo adjunte al ticket. Más tarde, este error se puede encontrar fácilmente en Kibana con esta ID.


Para estos fines, LoggerContainer tiene sus propias propiedades.

 <LoggerContainer active={true|false} limit={20} bsodActive={true} bsod={BSOD} onError={stack => { sendToServer(stack); }} > <App /> </LoggerContainer> 

bsodActive: activa / desactiva BSOD (la desactivación de BSOD se aplica al código de producción)

bsod es un componente. Por defecto, se parece a la captura de pantalla anterior.

Para mostrar un botón en un UI LoggerContainer, podemos usarlo en contexto

 context.logger.onError(context.logger.getStackData()); 

4. LogRock. Interacción del usuario

Puede enviar registros a la consola o mostrárselos al usuario, para esto debe usar el método stdout:

 <LoggerContainer active={true|false} limit={20} bsodActive={true} bsod={BSOD} onError={stack => { sendToServer(stack); }} stdout={(level, message, important) => { console[level](message); if (important) { alert(message); } }} > <App /> </LoggerContainer> 

stdout es un método responsable de mostrar mensajes.

Para hacer que el mensaje sea importante, es suficiente pasar el segundo parámetro verdadero al registrador. Por lo tanto, este mensaje se puede mostrar al usuario en una ventana emergente, por ejemplo, si falla la carga de datos, podemos mostrar un mensaje de error.

 logger.log('Something was wrong', true); 

Registro avanzado

Si usa Redux, o soluciones similares con una Tienda, puede colocar un registrador en Middleware que procese sus Acciones, por lo tanto, todas las acciones importantes pasarán por nuestro sistema.

Para un registro efectivo, puede envolver sus datos en un objeto proxy y colocar registradores en todas las acciones con el objeto.

Para cubrir los métodos de terceros con el registro (métodos de biblioteca, métodos de código heredado), puede usar decoradores - "@".

Consejos

Registre aplicaciones, incluso en producción, porque mejor que los usuarios reales, ningún probador encontrará cuellos de botella.

No olvide indicar la recopilación de registros en el acuerdo de licencia.

¡NO registre contraseñas, datos bancarios y otra información personal!

La redundancia de registros también es mala, haga que las firmas sean lo más claras posible.

Alternativas

Como enfoques alternativos, destaco:

• Rollbar es altamente personalizable. Le permite registrar 500 mil errores por $ 150 por mes. Recomiendo usarlo si está desarrollando una aplicación desde cero.
• Sentry es más fácil de integrar, pero menos personalizable. Le permite registrar 1 millón de eventos por $ 200 por mes.

Ambos servicios le permiten hacer casi lo mismo e integrarse en el backend.

Que sigue

El registro no es solo la búsqueda de errores, sino que también supervisa las acciones del usuario y la recopilación de datos. El registro puede ser un buen complemento para las pruebas de Google Analytics y la experiencia del usuario.

Conclusiones

Cuando liberas la aplicación, la vida apenas comienza para él. Sea responsable de su creación, obtenga comentarios, monitoree los registros y mejórelos. Escriba software de alta calidad y prospere :)

PD Si quieres ayudar con el desarrollo de módulos para Angular, Vue, etc. Estaré encantado de recibir solicitudes aquí .