Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to solve catch error in Observable in angular 8?

I do error handler code, but I got error in catch. undefined method.

This is my serivce.ts code.

import { Injectable } from "@angular/core";
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { user } from "./user";
import { Observable } from "rxjs";
import "rxjs/add/operator/catch";
import "rxjs/add/Observable/throw";
@Injectable({
  providedIn: "root"
})
export class DemoService {
  private url: string = "/assets/demo/user.json";
  constructor(private http: HttpClient) {}

  getuserdetails(): Observable<user[]> {
    return this.http.get<user[]>(this.url).catch(this.errorHandler);
  }
  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || "server error.");
  }
}

This is my app.component.ts file code

 public userdetails = [];
  public errorMsg;
  constructor(private user: DemoService) {}
  ngOnInit() {
    this.user
      .getuserdetails()
      .subscribe(
        $data => (this.userdetails = $data),
        error => (this.errorMsg = error)
      );
  } 

I got error in catch. and error message is Property 'catch' does not exist on type 'Observable'.

like image 360
Ashruti Avatar asked Oct 09 '19 05:10

Ashruti


People also ask

How do you catch an error in observable?

Catch errors in the observable stream Another option to catch errors is to use the CatchError Operator. The CatchError Operators catches the error in the observable stream as and when the error happens. This allows us to retry the failed observable or use a replacement observable.

How do you return an observable error?

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

Which operator takes care of catching errors on the source observable by returning a new observable or an error?

This operator takes care of catching errors on the source Observable by returning a new Observable or an error.


3 Answers

You can use catchError in rxjs/operators for this. Try it as follows.

import { catchError } from 'rxjs/operators';

export class DemoService {

    getuserdetails(): Observable<user[]> {
        return this.http.get<user[]>(this.url)
            .pipe(catchError(this.errorHandler))
    }
    errorHandler(error: HttpErrorResponse) {
        return Observable.throw(error.message || "server error.");
    }
}
like image 100
Sudarshana Dayananda Avatar answered Oct 07 '22 19:10

Sudarshana Dayananda


In the last version of rxjs you should use:

return return this.http.get<user[]>(this.url)
                  .subscribe((r:Author) => console.log("GOOD"),
                                    err => console.log("ERROR))
like image 30
David Avatar answered Oct 07 '22 19:10

David


Best way to catch error on observable is:

this.http.get<user[]>(this.url).pipe(
   tap(),
   catchError(err => { return this.errorHandler(err) }
)

If this.http.get() is an Promise lave it like You did in Your code .catch(...) is ok. Try to have catchError(...) at the end of pipe or before finalize(..) if You use it.

Before Observables had no .pipe() and You where chaining operations like in Promises so they change name .then() to i think flatMap() and .catch() to catchError() So programmer know are it is Observable or Promise.

like image 41
Mises Avatar answered Oct 07 '22 20:10

Mises