RxJS를 이용하여 오류 처리하기

RxJS를 이용해 오류를 처리해 봅시다.

원문입니다 : https://www.thisdot.co/blog/going-reactive-with-rxjs

Going Reactive with RxJS - This Dot Labs

RxJS는 소프트웨어 개발에 반응형 프로그래밍 패러다임을 구현하기 위한 완벽한 도구입니다.

일반적으로 오류를 정상적으로 처리하는 소프트웨어 개발은 ​​

응용 프로그램의 무결성을 보장하고 가능한 최상의 사용자 경험을 보장하는 기본적인 부분입니다.

이 아티클에서는 RxJS로 오류를 처리하는 방법을 살펴보고
RxJS를 사용하여 간단하면서도 성능이 뛰어난 애플리케이션을 빌드하는 방법을 살펴보겠습니다.

 

오류 처리하기(Handling Errors)

오류는 일반적으로 생각하지 않는 부분에서 나타납니다만,

오류는 모든 응용 프로그램에서 공통적으로 발생하는 것입니다.

사용자 경험을 방해하지 않으면서 오류를 잘 관리하는 능력과

오류의 원인을 완전히 진단할 수 있도록 정확한 오류 로그를 제공하는 능력이 그 어느 때보다 중요합니다.

RxJS는 이 작업을 아주 잘 수행할 수 있는 도구를 제공합니다!
RxJS를 사용한 몇 가지 기본적인 오류 처리 방법을 살펴보겠습니다.

 

기본적인 오류 처리

.subscribe() 메서드가 제공하는 Observable 스트림에서 발생한 오류를 감지하고 대응하는 가장 기본적인 방법입니다.

obs$.subscribe(
    value => console.log("Received Value: ", value),
    error => console.error("Received Error: ", error)
)

여기서 우리는 두 개의 다른 로직을 설정할 수 있습니다.
하나는 Observable에서 오류가 아닌 방출을 처리하고

다른 하나는 Observable에서 방출되는 오류를 정상적으로 처리합니다.

 

이를 사용하여 사용자에게 오류가 발생했음을 알리기 위해 알림 토스트 또는 경고를 표시할 수 있습니다.

obs$.subscribe(
    value => console.log("Received Value: ", value),
    error => showErrorAlert(error)
)

이렇게 하면 사용자의 혼란을 최소화하는 데 도움이 되며
추측에 맡기는 대신 실제로 적절하게 작동하지 않았다는 즉각적인 피드백을 제공할 수 있습니다.

의미있는 오류 합성하기

그러나 때때로 우리는 스스로 오류를 발생시키고 싶은 상황이 있을 수 있습니다.
예를 들어 수신한 일부 데이터가 정확하지 않거나 일부 유효성 검사가 실패했을 수 있습니다.

 

RxJS는 그렇게 할 수 있는 연산자를 제공합니다.
API에서 값을 수신하지만 앱의 다른 측면이 올바르게 작동하지 않게 하는
누락된 데이터가 있는 예를 들어 보겠습니다.

obs$
  .pipe(
    mergeMap((value) =>
      !value.id ? throwError("Data does not have an ID") : of(value)
    )
  )
  .subscribe(
    (value) => console.log(value),
    (error) => console.error("error", error)
  );

Observable에서 ID가 포함되지 않은 값을 받으면 정상적으로 처리할 수 있는 오류가 발생합니다.
참고: throwError를 사용하면 더 이상 Observable 방출이 수신되지 않습니다.

고급 에러처리

우리는 사용자의 너무 많은 중단을 방지하기 위해 반응적으로 오류를 처리할 수 있다는 것을 배웠습니다.
그러나 오류가 발생하거나 재시도를 수행할 때 여러 작업을 수행하려면 어떻게 해야 합니까?

RxJS는 retry() 연산자를 사용하여 오류가 발생한 Observable을 재시도하는 것을 매우 간단하게 만듭니다.

따라서 RxJS에서 더 깨끗한 오류 처리 설정을 만들기 위해 Observable에서 오류를 수신하고

성공적인 방출을 위해 다시 시도하고

실패하면 오류를 정상적으로 처리하는 오류 관리 솔루션을 설정할 수 있습니다.

머지맵은 리턴되는 옵저버블에서 방출되는 값을 모두 합친 하나의 옵저버블을 리턴합니다.
스위치맵은 리턴되는 옵저버블에서 방출하는 마지막 값만 합친 하나의 옵저저블을 리턴합니다.

obs$
  .pipe(
    mergeMap((value) =>
      !value.id ? throwError("Data does not have an ID") : of(value)
    ),
    retry(2),
    catchError((error) => {
        // Handle error gracefully here
      console.error("Error: ", error);
      return EMPTY;
    })
  )
  .subscribe(
    (value) => console.log(value),
    () => console.log("completed")
  );

오류에 도달하면 EMPTY 옵저버블을 내보내고

EMTYP 옵저버블을 방출하는 것은 옵저버블을 완료합니다.
위의 오류 방출 출력은 다음과 같습니다.

Error:  Data does not have an ID
completed

 

앞으로 추가로 다룰 게시물들

• https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
• https://www.thisdot.co/blog/form-validation-using-rxjs-and-typescript
• https://www.thisdot.co/blog/understanding-switchmap-and-forkjoin-operators-in-rxjs-with-typescript
• https://www.thisdot.co/blog/form-handling-using-rxjs-and-typescript
• https://www.thisdot.co/blog/understanding-flatmap-mergemap-and-toarray-operators-in-rxjs-with-typescript