Déboguer du code RxJS dans Angular

RxJS est une bibliothèque puissante et le pilier du modèle de programmation réactive d’Angular. Elle permet de gérer facilement des flux de données complexes et des opérations asynchrones.

Aujourd’hui, je vais vous présenter un petit extrait de code pour vous aider à déboguer votre code RxJS.

Contexte #

Prenons un exemple :

data$ = input$.pipe(
  debounceTime(500),
  map(value => value.id), 
  filter(id => !!id),
  switchMap(id => this.getData(i))
);

Imaginons que nous voulions journaliser ce qui se passe entre les différentes étapes de la chaîne.

Solution #

Comme vous le savez probablement, nous pouvons utiliser pour cela l’opérateur tap de rxjs.

data$ = input$.pipe(
  debounceTime(500),
  map(value => value.id), 
  tap(console.log), // version courte de `tap((value) => console.log(value))`
  filter(id => !!id), 
  tap(console.log),
  switchMap(id => this.getData(i)) 
  tap(console.log),
);

Nous avons maintenant journalisé la valeur de notre observable après map, filter et switchMap !

Pour améliorer la réutilisabilité et la lisibilité, nous pouvons créer notre propre fonction :

import { environment } from "environments/environment";
import { MonoTypeOperatorFunction, tap } from "rxjs";

export function debug<T>(): MonoTypeOperatorFunction<T> {
    if (environment.production) {
        return tap(); // désactiver la journalisation en mode production
    }
    return tap(console.log);
}

Nous pouvons alors simplifier la chaîne RxJS ci-dessus :

data$ = input$.pipe(
  debounceTime(500),
  map(value => value.id), 
  debug(),
  filter(id => !!id), 
  debug(),
  switchMap(id => this.getData(i)) 
  debug(),
);

On peut soutenir que les points d’arrêt et les autres méthodes de débogage traditionnelles sont préférables, mais la nature asynchrone de RxJS les rend souvent peu pratiques : elles peuvent ralentir l’exécution au point de rendre la session de débogage irréaliste.

Bon débogage ! 👋