손쉬운 RxJS 디버깅

Observables가 강력하다는 것은 비밀이 아닙니다. RxJS는 마법 같은 연산자 컬렉션을 통해 더욱 강력하고 재미있게 만듭니다.

I even built a State-Management library (ActiveJS) based on RxJS Observables.

문제

때때로 여러 연산자로 구축된 파이프 스트림은 매우 혼란스러울 수 있으며 Observable 스트림을 디버깅하는 것은 실제로 재미가 없습니다. 스택 추적은 쓸모가 없으며 디버거가 모든 내부 코드를 검토할 때 기존의 디버깅은 너무 지루할 수 있습니다.

종종 우리는 이방인과 신자 모두의 유일한 구세주인 tap 운영자에게 의지합니다.
우리는 모두 이 작업을 수행했습니다tap(v => console.log('here', v)) ;)

해결책

Observable 스트림의 모든 단계를 모든 연산자까지 시각화할 수 있고 구독 및 완료를 포함한 출력을 단일 유틸리티 기능으로 시각화할 수 있다고 말하면 어떻게 됩니까?

이것이 바로 자동화된 RxJS 시각화를 위한 단일 기능인 RxJS-Debug이 제공하는 것입니다.

다음과 같은 Observable 스트림이 있다고 가정해 봅시다.

const source$ = timer(1000, 4000); // emits a number after every 4 seconds
source$.pipe(
    map(x => x + 5), // add 5
    take(2), // complete the stream after 2 values
    switchMap(x => of(x * 2)) // multiply by 2, (can be an API call)
  )
  .subscribe();

이 스트림을 시각화하는 것은 source$ Observable을 RxJS-Debug에서 제공하는 유틸리티 함수$D로 래핑하는 것만큼 쉽습니다.

// wrap the Observable with $D to visualize it
const debugSource$ = $D(source$);
// debugSource$ is a copy of the original Observable, but with logging-enabled

이제 debugSource$ 대신 source$ 를 사용해야 합니다.

debugSource$
  .pipe(
    map(x => x + 5),
    take(2),
    switchMap(x => of(x * 2))
  )
  .subscribe(); // activate the stream

모두 완료되었습니다. 콘솔에 표시되는 내용입니다.

구독이 언제 시작되었는지 확인할 수 있습니다

.

모든 연산자가 언제 실행되는지 확인할 수 있으며

해당 연산자의 출력은 무엇이며

파이프에서 해당 연산자의 위치는 무엇입니까(예: 1, 2, 3 등)

source$ Observable

에서 새 값을 내보낸 후 스트림이 다시 시작되는 시기도 확인할 수 있습니다.

소스가 방출한 횟수를 확인할 수 있습니다

.

연산자가 실행되는 횟수를 확인할 수 있습니다

.

스트림이 파이프 연산자의 끝에 도달하는 시점을 확인할 수 있으며

Observable이 언제 완료되는지 확인할 수도 있습니다

.

이 모든 것이 하나의 기능으로 이루어집니다. 멋지지 않아.

하지만 잠시만요. 운영자 사이에 지연이 있는 이유는 무엇입니까? $D 에 전달할 수 있는 구성 옵션을 건너뛰었습니다.

이것은 위의 GIF(또는 선호하는 GIF)를 생성하는 데 사용된 실제 구성입니다.

// wrap the Observable with $D to visualize it
const debugSource$ = $D(source$, {id: 'Special', addDelay: 500})

id는 Observable과 관련된 로그를 쉽게 식별하기 위한 선택적 식별자입니다. 그렇지 않으면 증분numeric ID가 자동으로 할당됩니다.
addDelay 플래그는 모든 연산자가 파이프에 제공되기 전에 고정 지연을 추가하여 보다 관리 가능한 속도로 출력 및 실행 흐름을 이해할 수 있는 시간을 제공합니다.

콘솔 로그에서 노이즈를 줄이기 위해 연산자의 출력을 숨기는 다른 옵션hideOutputs이 있습니다. 실제 값이 아니라 실행 흐름에만 관심이 있을 때 유용할 수 있습니다.

지금은 그게 다입니다.
질문, 제안 또는 피드백이 있으면 알려주세요.

건배

🤾‍♂️ RxJS-Debug Playground
💻 RxJS-Debug GitHub Repo (아마도 ⭐를 떨어뜨립니다 :)