How to solve catch error in Observable in angular 8?

Question

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'.

Bryology

you can do it in the same way as you'r doing in ngOnInit in app.component like error => (this.errorMsg = error) but why you are trying to catch error at two place?you should catch it in service only – Gillian

in service.ts file i define catch and (this.errorMsg=error) is in my app.component.ts file using this file i display data and error message in client side. – Bryology

Possible duplicate : #46020271 – Syblesybley

Answer 1

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.");
    }
}

Searles

Hi there. I have about the same code that you posted in this answer, but the catchError() won't work. It simply doesnt throw anything even if the return from server is code 500. – Act

Answer 2

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))

Southernmost

deprecated rxjs.dev/deprecations/subscribe-arguments – Crasis

Answer 3

import { Observable, throwError } from 'rxjs';
import { catchError, } from 'rxjs/operators';

return this.http.get<user[]>(this.url).pipe(catchError(this.errorHandler))

errorHandler(error: HttpErrorResponse) {
    return throwError(error.message || "server error.");
}

Latria

Answer 4

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.

Ermelindaermengarde

Answer 5

https://rxjs.dev/deprecations/subscribe-arguments

you should do:

source$.subscribe({ next: doSomething, error: doSomethingElse, complete: lol }).

according to latest docs

Terresaterrestrial