Rxjs Heaven (Part1: Error handling )

Introduction ๐Ÿšฉ :

Hello Dear Readers

Making everything reactively is a trend in web development currently with the most famous JS frameworks not only with Angular! so I decided to start a series of blogs about Rxjs ๐Ÿ”ฅ (A reactive programming library) and cover the most use cases with code examples to help you clearly understand why I called Rxjs a Heaven โ˜€๏ธ

This series of blogs will contain :

  • Part1: Error Handling With Rxjs
  • Part2: Multi-Casting Operators with Rxjs ( coming soon โณ)
  • Part3: Higher-order operators with Rxjs ( coming soon โณ)
  • Part4: Custom operators with Rxjs ( coming soon โณ)

Each part will contain an explanation for the operators, code _examples, and the most use cases for each one

Happy reading :)

What is Error-handling? ๐Ÿ“ :

Error handling refers to the anticipation, detection, and resolution of programming, application, and communications errors.

There are a lot of error handling strategies are provided by Angular for example :

Itโ€™s a centralized exception handling with ErrorHandler.

A way to intercept HTTP requests and responses to transform or handle them before passing them along. so it can be used specifically to handle errors

It can be also a simple console log message

Error handling With Rxjs ๐Ÿ”ฅ ๐Ÿ’ฅ:

The previous section described the defined error handling strategies provided by Angular.

Now letโ€™s go deep with the Rxjs most used operators for error dealing with ๐Ÿ”Ž

โ€œWhen an error occurs, itโ€™s game over, the observable completes and you cannot recover from it.! โ€œ

Scenario: if the error gets emitted by the observable, there will be no more new values emitted because it will be considered as โ€œbrokenโ€

So we need to handle it โ˜‘๏ธ!

(A) The catchError Operator ๐Ÿ“– :

catching error

We will start with the catchError operator, it can be used to handle the errors thrown by the Angular Observable, by returning a new Observable or throwing user-defined error:

source: https://rxjs.dev/api/operators/catchError

The catchError operator takes as input an Observable that might error out and starts emitting input Observable values as an output

Code-Example ๐Ÿ“˜:

Code-Explanation ๐Ÿ“˜:

When the source observable ( HTTP observable in the example )error is thrown, we will have different scenarios that we can implement :

  • mapping the error to a new observable : ( Of([]) for example )
  • retry the caught source Observable again in case of error : (take(30)) for example) :
  • throw a new error ๐Ÿ’ฅ ( see next section ๐Ÿ—‚)

(B) throwError operator ๐Ÿ“–:

As we said in the previous section we can throw an error caught by using the throwError(err) the operator provided by Rxjs that will return an observable, which will emit an error notification

Code-Example ๐Ÿ“˜:

Code-Explanation ๐Ÿ“˜:

When an error occurred, it will be caught and we will return a new observable, which emit an error notification

Used more for code readability

(C) The retry Operator ๐Ÿ“–:

The retry(retry_count: number): Observable operator can be useful for retrying HTTP requests!

Usage ๐Ÿšฉ :

It can happen for example a network request failed due to an internet connection issue or other HTTP errors reasons, so it can be useful to implement a retry action.

source: http://reactivex.io/documentation/operators/retry.html

Code-Example ๐Ÿ“˜ :

Code-Explanation ๐Ÿ“˜:

retry(1) it will be used to retry for one time a failed network request (for HTTP GET USERS)

(D) The retryWhen operator๐Ÿ“–:

source : https://rxjs.dev/api/operators/retryWhen

Retry an observable sequence on error based on custom criteria

Usage ๐Ÿšฉ :

used until success or max number of attempts reached!

Code-Example ๐Ÿ“˜ :

Code-Explanation ๐Ÿ“˜:

retryWhen( crietria)

  • it will repeat the source sequence observable when an error occurred
  • count how many times the error occurred
  • if itโ€™s more than 2 times so throw an error

(E) The finalize Operator ๐Ÿ“–:

the โ€œfinalizeโ€ operator consists in the โ€œfinally { โ€ฆ }โ€ clause. like try-catch-finally it will be called when the observable completes or errors

Code-Example ๐Ÿ“˜ :

Code-Explanation ๐Ÿ“˜:

finalize() it will be executed when the observable is complete โœ…

One case to using this operator is: โ€œDisabling/enabling button when making an HTTP request โ€œ

-References ๐Ÿ““ ๐Ÿ“• :

Conclusion โค๏ธ๐Ÿ‘:

In conclusion, we made a step to discover the reactive error handling strategies with Rxjs and the most used operators ( catchError (),throwError() , retry(),retryWhen() , finalize ()) with some code examples and explanation .

I hope it helps and you enjoyed it ๐Ÿ˜€

If you liked this post feel free to leave a ๐Ÿ‘, and follow me on Twitter and Github

Thanks ๐Ÿ™‚



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rebai Ahmed

Rebai Ahmed

<script>alert('try your best')</script>