Un opérateur RXJS pour debugger avec élégance ?

Tous les développeurs utilisant RXJS qui ont voulu déboguer ont déjà fait :

obs$.pipe(tap((v) => console.log("data", v)))
// ou pour les plus malins.
obs$.pipe(tap(console.log)) 

C'est pas très fun. Pour y remédier, on va créer un opérateur personnalisé qui nous permettra d'avoir :

Plus sympa comme logs non ?
Pour l'utiliser, il suffit de le passer dans le pipe :

import { debug } from './custom.operators.ts'

obs$.pipe(debug("data"));

Côté implémentation, c’est simple :

export function debug<T>(tag = 'Untitled') {
  if (environment.production) {
    return tap<T>();
  }

  const t = tag[0].toUpperCase() + tag.slice(1);

  return tap<T>({
    next(value: T) {
      console.log(
        `%c[${t}: Next]`,
        'background: #84cc16; color: #fff; padding: 3px; font-size: 9px; font-weight: 500;',
        value
      );
    },
    error(error) {
      console.log(
        `%[${t}: Error]`,
        'background: #ef4444; color: #fff; padding: 3px; font-size: 9px; font-weight: 500;',
        error
      );
    },
    complete() {
      console.log(
        `%c[${t}]: Complete`,
        'background: #6b7280; color: #fff; padding: 3px; font-size: 9px; font-weight: 500;'
      );
    },
  });
}

En bonus, j'ai ajouté une petite ligne en haut pour ne pas logger en production.

Voilà :) Happy coding !