Rxjs throw error

import { throwError } from 'rxjs'; 

Contents

• Technologies Used
• Using throwError
• throwError, retry and catchError
• JavaScript throw vs RxJS throwError
• Complete Example
• Run Application
• References
• Download Source Code

  of(1,2,3,4).pipe(
	mergeMap(data => {
	  if (data === 3) {
		return throwError('Error Occurred for data: '+ 3);
	  }
	  return of(data);
	})
  ).subscribe(res => console.log(res),
	 err => console.error(err)
  ); 

1 2
Error Occurred for data: 3 

  interval(2000).pipe(
	mergeMap(x => x === 2
	  ? throwError('Error: Received 2')
	  : of('a', 'b')
	),
  ).subscribe(x => console.log(x),
	e => console.error(e)
  ); 

a b a b 
Error: Received 2 

of("A", "B").pipe(
  switchMap(el => {
	if (el === "B") {
	 return throwError("Error occurred.");
	}
	return el;
  }),
  retry(2),
  catchError(err => {
	console.error(err);
	return throwError("User defined error.");
  })
).subscribe(el => console.log(el),
	err => console.error(err),
	() => console.log("Processing Complete.")
); 

A A A
Error occurred.
User defined error. 

switchMap(el => {
  if (el === "B") {
    throw new Error("Error occurred.");
  }
  return el;
}) 

switchMap(el => {
  if (el === "B") {
    return throwError("Error occurred.");
  }
  return el;
}) 

import { Component, OnInit } from '@angular/core';
import { of, throwError, interval } from 'rxjs';
import { switchMap, debounceTime, catchError, retry, mergeMap } from 'rxjs/operators';

import { BookService } from './book.service';
import { Book } from './book';
import { FormControl, FormBuilder, FormGroup } from '@angular/forms';

@Component({
   selector: 'app-book',
   template: `
    <h3>Search Book</h3>
    <form [formGroup]="bookForm">
      ID: <input formControlName="bookId">
    </form>
    <br/>
    <div *ngIf="book">
      Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
    </div>
   `
})
export class BookComponent implements OnInit { 
   book: Book;
   constructor(private bookService: BookService, private formBuilder: FormBuilder) { }
   ngOnInit() {
      of(1,2,3,4).pipe(
        mergeMap(data => {
          if (data === 3) {
            return throwError('Error Occurred for data: '+ 3);
          }
          return of(data);
        })
      ).subscribe(res => console.log(res),
         err => console.error(err)
      );

      interval(2000).pipe(
        mergeMap(x => x === 2
          ? throwError('Error: Received 2')
          : of('a', 'b')
        ),
      ).subscribe(x => console.log(x),
         e => console.error(e)
      );

      //-------------------------
      this.retryAndHandleError();
      this.searchBook();
   }

   retryAndHandleError() {
    of("A", "B").pipe(
      switchMap(el => {
        if (el === "B") {
         return throwError("Error occurred.");
        }
        return el;
      }),
      retry(2),
      catchError(err => {
        console.error(err);
        return throwError("User defined error.");
      })
    ).subscribe(el => console.log(el),
        err => console.error(err),
        () => console.log("Processing Complete.")
    );
   }

   bookId = new FormControl(); 
   bookForm: FormGroup = this.formBuilder.group({
      bookId: this.bookId
     }
   );
   searchBook() {
    this.bookId.valueChanges.pipe(
      debounceTime(1000),
      switchMap(id => {
        return this.bookService.getBook(id);
      }),
      catchError(err => {
        return throwError('User defined error.');
      })
    ).subscribe(res => this.book = res,
        err => {
          console.error(err);
          this.book = null;
          this.searchBook();
        }
    ) 
  }
} 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Book } from './book';

@Injectable({
    providedIn: 'root'
})
export class BookService {
    bookUrl = "/api/books";	
    constructor(private http: HttpClient) { }
    getBook(id: number): Observable<Book> {
      let url = this.bookUrl + "/" + id;   
      return this.http.get<Book>(url);
    }  
} 

export interface Book {
   id: number;
   name: string;
   category: string;
} 

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   template: `
    <app-book></app-book>
   `
})
export class AppComponent { 
} 

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class TestData implements InMemoryDbService {
  createDb() {
    let bookDetails = [
      { id: 101, name: 'Angular by Krishna', category: 'Angular' },
      { id: 102, name: 'Core Java by Vishnu', category: 'Java' },
      { id: 103, name: 'NgRx by Rama', category: 'Angular' }
    ];
    return { books: bookDetails };
  }
} 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent }  from './app.component';
import { BookComponent }  from './book.component';

//For InMemory testing
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

@NgModule({
  imports: [     
      BrowserModule,
      HttpClientModule,
      FormsModule,
      ReactiveFormsModule,
      InMemoryWebApiModule.forRoot(TestData)		
  ],
  declarations: [
      AppComponent,
      BookComponent
  ],
  providers: [
  ],
  bootstrap: [
      AppComponent
  ]
})
export class AppModule { }