Backend3 min de lecture26 août 2025par Lionel

Améliorer la visualisation des logs sur des scripts backend avec les Readable Streams

JavaScriptPerformance

Améliorer la visualisation des logs sur des scripts backend avec les Readable Streams

Hello tout le monde ! Aujourd'hui, je vais vous parler d'une problématique que rencontrent souvent les développeurs, moi inclus, quand on travaille avec des scripts backend lourds pour des sites e-commerce.

Dans mon quotidien, je suis souvent amené à maintenir des scripts qui synchronisent stocks, prix et autres données techniques. Ces scripts peuvent tourner longtemps, parfois 40 minutes, et il est très difficile de savoir ce qui se passe "derrière".

Le problème avec les console.log

Ma solution traditionnelle ? Mettre des console.log partout et inspecter la console. Mais cela devient vite ingérable :

Six mois plus tard, il faut tout fouiller pour comprendre le fonctionnement du script.

Parfois, certains logs ne s'affichent pas correctement.

Les clients ont une interface avec un simple bouton pour lancer ces scripts, mais ils ne voient rien du tout pendant l'exécution. Résultat : si le script bloque, ils ne savent pas où ça coince.

Bref, c'était le chaos côté débogage et expérience utilisateur.

Découverte des Readable Streams

Il y a quelques mois, j'ai découvert les Readable Streams. Même si ça existe depuis longtemps, je ne les avais jamais utilisés. Et la bonne nouvelle : leur implémentation est très simple.

L'idée : remplacer les console.log par un flux de logs en temps réel vers le frontend. Ainsi, l'utilisateur ne se contente pas de cliquer sur un bouton : il voit en direct ce qui se passe dans le script.

Exemple concret

Pour illustrer, j'ai simulé un petit batch de mise à jour de 5 produits :

Début du traitement

Mise à jour du prix et de la description

Log personnalisé via une méthode logger.log()

Message final indiquant que le script est terminé

Dans le terminal, on voit tous les logs correctement, mais ce n'est pas idéal pour l'utilisateur.

Démonstration de la mise en place des Readable Streams

Passage au temps réel avec SSE (Server-Sent Events)

Voici comment j'ai amélioré le système :

Côté frontend :

On crée un bouton pour lancer le script.

On ouvre un EventSource qui écoute les logs envoyés par le backend.

Chaque log est affiché avec un style et une couleur selon son type (success, info, error).

Côté backend :

Au lieu de renvoyer une simple réponse, on ouvre un Readable Stream.

La fonction de logging envoie des events contenant les messages et leur type.

Chaque log est transmis au frontend en temps réel.

Les bénéfices

Avec ce système :

L'utilisateur voit le script s'exécuter pas à pas.

En cas d'erreur, il est immédiatement informé du problème et peut intervenir.

Les développeurs peuvent déboguer beaucoup plus facilement grâce à un suivi visuel précis des logs.

On peut enrichir les logs avec différentes couleurs ou types d'événements, pour rendre l'expérience encore plus claire.

Conclusion

Passer des console.log à un flux de logs en temps réel avec Readable Streams et SSE change complètement la manière de gérer les gros scripts backend. C'est simple à mettre en place et vraiment utile pour les développeurs comme pour les utilisateurs finaux.

Si vous voulez en savoir plus, je vous encourage à tester vous-même cette méthode sur vos scripts, et à laisser vos commentaires ou questions : j'adore lire vos retours !