01-debug-rxjs.ts

onSelectUser(participantId:string) {

  this.participantsService.findParticipantById(parseInt(participantId))
      .pipe(
          debug(LogginLevel.DEBUG, "Loading participant from backend")
      )
      .subscribe(
          participant => {
              ...
          },
          console.error
      );

}

02-do-operator.ts

  findParticipantById(participantId: number): Observable<Participant> {
        return this.http.get(`/api/participants/${participantId}`)
            .pipe(
                tap( res => console.log('HTTP response:', res)),
                map(res => res.json().payload),
                tap(console.log)
            )
  }

03-debug-operator.ts

import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';

export enum RxJsLoggingLevel {
    TRACE,
    DEBUG,
    INFO,
    ERROR
}

let rxjsLoggingLevel = RxJsLoggingLevel.INFO;

export function setRxJsLoggingLevel(level: RxJsLoggingLevel) {
    rxjsLoggingLevel = level;
}


export const debug = (level: number, message:string) =>
    (source: Observable<any>) => source
        .pipe(
            tap(val => {

                if (level >= rxjsLoggingLevel) {
                    console.log(message + ': ', val);
                }
            })
        );

Property 'debug' does not exist on type 'Observable'.

Angular 10.

debug(LogginLevel.DEBUG, "Loading participant from backend")

should be

debug(RxJsLoggingLevel.DEBUG, "Loading participant from backend")

This is great, ty, just what I need to help debug an SSR issue :)