Using ThrowError in Angular Observable

Angular ThrowError operator returns an observable, which on subscription immediately errors out. It does not emit any results.

ThrowError

ThrowError creates a new observable. Hence we must subscribe to it. The following example creates an ThrowError observable and then subscribes to it.

Source Code

First, we create an observable using throwError. The first argument to the throwError is the error object. This error object is passed to the consumers when it raises the error notification.

We, subscribe to it in the ngOnInit method.

The observable immediately raises the error notification and completes. The error callback is invoked and we will see the error message in the console window.

Throw Error Vs ThrowError

It is very easy confuse between the Throw Error With ThrowError.

Throw Error throws an error. It is a JavaScript construct and is not part of the RxJs. We need to use the try/catch block to catch the errors thrown from the Throw Error. The RxJS uses the try/catch block to catch any errors thrown from the observables. And when they catch one, they emit an error notification (raises the error callback), and then the observable stops.

ThrowError does not throw errors like throw Error. It returns a new observable, which emit an error notification (raises the error callback), and then stops.

Throw Error Example

Source Code

The observable emits values 2 & 4.

When map operators receive the value A it uses throw Error to throw an error. The observable catches this error and raises the error notification and terminates.

The last value 8 is never emitted.

ThrowError

Now, let us replace the throw Error with return throwError

Source Code

The observable emits values 2 & 4.

When the map operator receive the value A it returns throwError. Remember throwError returns an observable. It will raise the error notification, only if you subscribe to it.

The map operator does not subscribe to the observable. It just returns it to the subscriber.

Hence the subscriber receives the throwError observable as value. Hence you see [object Object] in the console.

Since there is no error raised, the observable continues and emits the next value 8 and then completes.

Using ThrowError

The throwError needs to be subscribed for it to emit error notification. We can use it to compose with other Observables such as mergeMap,  switchMap, catchError etc.

Using with catchError

The following example, shows how to use ThrowError with CatchError

Source Code

The code throws the error using throw error in map operator.

CatchError will catch this error. We use the CatchError to handle the errors thrown by the Angular Observable. Once we handle the error, we must return an observable. We can either return a replacement observable or return an error. The observable returned from CatchError is immediately subscribed.

Hence we can use the throwError here, which is immediately subscribed , which in turn emits an error notification

Using it with MergeMap

The Angular MergeMap maps each value from the source observable into an inner observable, subscribes to it, and then starts emitting the values from it.

In the following example, we use throwError to return a observable, when we receive the value 3. The MergeMap subscribes to this new observable and raises the error notification and stops.

Source Code

References

ThrowError API

Read More

Leave a Comment

Your email address will not be published.

Scroll to Top