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 !
Top comments (0)