Remote Console para supervisar logs de aplicaciones web

Fecha de publicación: 2024-02-24

¿Qué hace un desarrollador cuando necesita leer los logs de una aplicación web que se ejecuta en un teléfono? En un navegador de escritorio basta abrir DevTools y la consola; en un smartphone no es tan cómodo.

La solución más sencilla consiste en enviar los logs a un servidor o agregador. Al inicio de la aplicación se puede sustituir console.log:

const orig = console.log;
console.log = function () {
  orig.apply(console, arguments);
  navigator.sendBeacon(URL, arguments[0]);
};

Así, todo lo que llegue a console.log(...) se enviará a la URL indicada. Uso la Beacon API porque el navegador no espera respuesta del servidor: los mensajes viajan en una sola dirección.

Después hay que reunir los logs y mostrarlos de forma legible. Para eso escribí Remote Console. Acepta mensajes de cualquier dirección:

navigator.sendBeacon('https://console.wiredgeese.com/log/', 'any message');

y los retransmite por WebSocket a quienes estén mirando la consola. El servidor no almacena logs: reenvía inmediatamente lo que recibe. Si pueden contener datos confidenciales, conviene alojar Remote Console en la red local o en el equipo del desarrollador:

git clone https://github.com/flancer64/spa-remote-console.git
cd spa-remote-console/
npm install
npm start

Canales

Los canales separan conjuntos de logs. Los mensajes enviados a https://console.wiredgeese.com/log/any-chars/ se ven solo en https://console.wiredgeese.com/any-chars/. Al añadir un canal como /49bce4eb9e135c3580278b/ al servidor, solo quien conozca el nombre puede seguir esos logs. No hay límite de usuarios que pueden observar un canal a la vez.

Unir logs

Para que los mensajes de varios navegadores aparezcan en una consola, basta enviarlos al mismo canal. Es especialmente útil cuando interactúan aplicaciones en dos navegadores o un navegador y un servidor: el servidor también puede enviar logs a la consola.

Orden y número de entradas

Cuando los logs se envían a https://console.wiredgeese.com/log/, el servidor añade automáticamente la hora en formato mm/dd hh:mm:ss.mmm. La ruta /timed/ retransmite los mensajes sin cambios. El navegador ordena las entradas de forma inversa suponiendo que el inicio contiene la hora del evento. Por defecto se muestran 64 entradas, pero cada persona puede elegir cualquier número positivo sin límite superior.

Conclusión

Remote Console nació como una herramienta para observar la consola de un navegador móvil. Sin embargo, retransmitir un origen a varios navegadores, separar por canales y unir fuentes distintas resultó útil en el trabajo diario. También puede servir en soporte: si la aplicación duplica logs en una consola remota, una persona de soporte puede observar qué ocurre en el teléfono del cliente.