Angular ThrowError operator returns an observable, which on subscription immediately errors out. It does not emit any results.
Table of Contents
ThrowError
ThrowError creates a new observable. Hence we must subscribe to it. The following example creates an ThrowError observable and then subscribes to it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import { Component, VERSION } from "@angular/core"; import { Observable, of, from, throwError } from "rxjs"; import { map, catchError } from "rxjs/operators"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = "Angular " + VERSION.major; obs = throwError("Error From ThrowError observable"); ngOnInit() { this.obs.subscribe( el => { console.log("Value Received :" + el); }, err => { console.log("Error caught at Subscriber :" + err); }, () => console.log("Processing Complete") ); } } ****Console Window Error caught at Subscriber: Error From ThrowError observable |
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.
1 2 3 | obs = throwError("Error From ThrowError observable") |
We, subscribe to it in the ngOnInit method.
1 2 3 4 | this.obs.subscribe( |
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.
1 2 3 4 5 6 | err => { console.log("Error caught at Subscriber :" + err); }, |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import { Component, VERSION } from "@angular/core"; import { Observable, of, from, throwError } from "rxjs"; import { map, catchError } from "rxjs/operators"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { srcArray = from([1, 2, "A", 4]); obs = this.srcArray.pipe( map(val => { let result = (val as number) * 2; if (Number.isNaN(result)) { console.log("Error in the observable"); throw Error("Not a Number"); } return result; }) ); ngOnInit() { this.obs.subscribe( el => { console.log("Value Received :" + el); }, err => { console.log("Error caught at Subscriber :" + err); }, () => console.log("Processing Complete.") ); } } ***Console **** Value Received :2 Value Received :4 Error in the observable Error caught at Subscriber :Error: Not a Number |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import { Component, VERSION } from "@angular/core"; import { Observable, of, from, throwError } from "rxjs"; import { map, catchError } from "rxjs/operators"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = "Angular " + VERSION.major; srcArray = from([1, 2, "A", 4]); obs = this.srcArray.pipe( map(val => { let result = (val as number) * 2; if (Number.isNaN(result)) { console.log("Error in the observable"); return throwError("Not a Number"); } return result; }) ); ngOnInit() { this.obs.subscribe( (el: any) => { console.log("Value Received :" + el); }, err => { console.log("Error caught at Subscriber :" + err); }, () => console.log("Processing Complete.") ); } } ****Console ******** Value Received :2 Value Received :4 Error in the observable Value Received :[object Object] Value Received :8 Processing Complete |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import { Component, OnInit } from "@angular/core"; import { throwError, from } from "rxjs"; import { map, catchError } from "rxjs/operators"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { srcArray = from([1, 2, "A", 4]); obs = this.srcArray.pipe( map(val => { let result = (val as number) * 2; if (Number.isNaN(result)) { console.log("Errors Occurred in Stream"); throw new Error("Result is NaN"); } return result; }), catchError(error => { console.log("Caught in CatchError. Throwing error"); return throwError(error); }) ); ngOnInit() { this.obs.subscribe( el => { console.log("Value Received " + el); }, err => { console.log("Error caught at Subscriber " + err); }, () => console.log("Processing Complete.") ); } } ******* CONSOLE ******* Value Received 2 Value Received 4 Errors Occurred in Stream Caught in CatchError. Throwing error Error caught at Subscriber Error: Result is NaN |
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
1 2 3 4 5 6 7 | catchError(error => { console.log("Caught in CatchError. Throwing error"); return throwError(error); }) |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { Component, OnInit } from "@angular/core"; import { throwError, of } from "rxjs"; import { map, mergeMap, catchError } from "rxjs/operators"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { srcObservable = of(1, 2, 3, 4); innerObservable = of("A", "B"); obs = this.srcObservable.pipe( mergeMap(val => { console.log("Source value " + val); console.log("starting new observable"); if (val == 3) return throwError("Error in observable"); return this.innerObservable; }) ); ngOnInit() { this.obs.subscribe( el => { console.log("Value Received " + el); }, err => { console.log("Error caught at Subscriber " + err); }, () => console.log("Processing Complete.") ); } } ***Console **** Source value 1 starting new observable Value Received A Value Received B Source value 2 starting new observable Value Received A Value Received B Source value 3 starting new observable Error caught at Subscriber Error in observable |
References
Read More
