[RxJS / angular] 10. 옵저버블 에러 처리 (catchError, throwError, EMPTY)

옵저버블 에러 처리

옵저버블도 다른 코드들과 마찬가지로 에러가 발생할 수 있는 여러 시나리오가 있습니다. 예를 들어 Http 리퀘스트를 하기위해 옵저버블을 사용하게 되고 리퀘스트가 실패하고 에러가 발생할 수 있습니다. 따라서 옵저버블 에러가 프로그램에 영향을 미치지 않게 하기 위해서 에러를 처리하는 게 매우 중요합니다.

에러가 발생하면 옵저버블이 중지된다는 것을 잘 염두해야 합니다. 즉 옵저버블에 에러가 발생하면 더 이상 항목은 방출되지 않고 사용할 수 없습니다. 옵저버블에 에러를 처리하기 위해서 일반적으로 세 단계로 분류해서 생각해 볼 수 있습니다.

 

옵저버블 에러를 처리하는 세 단계

1. 에러 Catch 하기

먼저 에러를 잡아냅니다. 발생한 에러를 catch 함으로 프로그램 내에서 처리되지 않은 에러가 충돌해서 최악으로 프로그램이 멈추는 것을 방지할 수 있습니다.

2. 선택적으로 에러를 throw 하기

에러의 시나리오 케이스에 따라 에러를 전달하려는 경우 구독 체인을 따라 에러를 다시 throw 합니다.

3. 에러 옵저버블을 새 옵저버블로 교체하기

에러가 있는 옵저버블은 중지되고 더 이상 항목을 방출하지 않기 때문에 에러가 발생한 후 옵저버블을 새 옵저버블로 교체해 줍니다. 새 옵저버블로 교체하게 되면 옵저버블에 바인딩된 모든 코드가 정상적으로 작동하게 됩니다.

 

에러를 catch 하고 throw하고 새 옵저버블을 리턴해 준다! 라는 에러를 처리하는 세 단계를 소개했지만 프로그래밍 세계에는 절대라는 건 없습니다. 따라서 프로그램에 맞춰서 에러 처리도 유연하게 생각하시면 됩니다.

---

RxJS 에러 핸들링 기능들

RxJS는 특히 에러 처리를 위한 몇 가지 기능을 제공해 주고 있습니다.

1. catchError

catchError는 이름처럼 옵저버블 파이프라인에서 에러를 잡아줍니다.

2. throwError

ThrowError는 구독 체인을 따라 에러를 발생시킵니다.

3. EMPTY

EMPTY는 에러가 발생한 옵저버블을 비어있고 유효한 옵저버블로 교체할 때 사용할 수 있는 constant입니다.

RxJS에서 제공해주는 에러처리 기능에 대해 각각 살펴보도록 하겠습니다.

 

catchError 연산자

catchError 연산자는 옵저버블에서 발생하는 모든 에러를 잡아내고 에러가 구독 체인에 따라 이동하는 것을 방지합니다.

catchError(this.handleError)

위 코드는 에러를 잡고 처리하기 위해 handleError 메서드를 전달하고 있습니다. 연산자 파이프라인에서 catchError 연산자는 에러를 가능성이 있는 연산자 뒤에 있어야 합니다. 에러를 잡기 위해 catchError를 사용하고 에러 핸들러에서 선택적으로 다시 에러를 던지거나 새로운 옵저버블로 교체하여 에러 후에도 파이프라인을 계속 진행할 수 있습니다. 코드에서 catchError를 살펴보겠습니다.

위에서 map연산자에서는 방출된 값이 3인 경우 throw를 통해 에러를 발생하고 있습니다. catchError에서 에러를 잡은 후 of연산자를 사용하여 새로운 옵저버블을 만들고 리턴해 주고 있습니다. 결과값을 예상해 보세요.

콘솔 로그에 1, 2, three가 출력되었습니다. 에러가 발생하면  catchError가 에러를 잡고 처리하기 때문에 옵저버는 에러 알림을 받지 못합니다. 대신 옵저버의 next메소드는 새로운 옵저버블에서 방출된 값을 받게 됩니다. 결과적으로 1, 2는 처음 of(1,2,3)의 옵저버블에서 방출된 값이 출력되었고, three는 catchError에서 에러를 잡은 후 of('three')에 의해 만들어진 새 옵저버블에 의해 방출된 값이 출력되었습니다.

 

throwError 연산자

에러를 다시 발생시키기 위해 RxJS의 throwError를 사용할 수 있습니다. ThrowError는 항목을 방출하지 않고 구독할 때 즉시 error 알림을 내보내는 옵저버블을 새로 만드는 생성 함수입니다.

throwError에 원하는 에러를 반환하는 함수를 전달해야 합니다. 프로그램 내에서 다른 부분에 에러를 전파할 때 throwError를 사용하게 됩니다. throw는 에러를 바로 던지는 구문인 반면 throwError()는 에러 알림을 내보내는 옵저버블을 만드는 생성 함수임을 기억해 주세요. 특정 상황이 아니라면 자바스크립트의 throw문을 사용하여 간단히 오류를 발생시킬 수 있습니다.

 

EMPTY

새롭게 대체할 옵저버블을 정의할 때 EMPTY상수가 매우 유용합니다. EMPTY 상수는 항목을 내보내지 않는 옵저버블입니다.

구독하면 즉시 complete 알림을 내보냅니다. 아래가 콘솔 결과입니다.

비어있는 옵저버블을 리턴하려면 EMPTY를 사용하세요. 기본값이 없을 때 옵저버블 에러를 대체할 때 특히 유용합니다.

---

여기까지 수고하셨습니다. 에러 처리에 도움 되는 RxJS의 기능을 살펴보았으므로 다음 포스트에서 몇 가지 에러 처리 전략을 알아보고 실습을 해보도록 하겠습니다.