22

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

Ashruti
  • 321
  • 1
  • 2
  • 8
  • 1
    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 – jitender Oct 09 '19 at 05:18
  • 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. – Ashruti Oct 09 '19 at 05:25
  • Possible duplicate : https://stackoverflow.com/questions/46019771/catching-errors-in-angular-httpclient/46021824 – ngShravil.py Oct 09 '19 at 05:27

5 Answers5

19

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.");
    }
}
Sudarshana Dayananda
  • 5,165
  • 2
  • 23
  • 45
  • 4
    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. – WitnessTruth May 21 '20 at 22:29
8

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))
ℛɑƒæĿᴿᴹᴿ
  • 4,983
  • 4
  • 38
  • 58
Dave
  • 7,028
  • 11
  • 35
  • 58
5
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.");
}
ℛɑƒæĿᴿᴹᴿ
  • 4,983
  • 4
  • 38
  • 58
Ninoos Al Katoni
  • 97
  • 2
  • 7
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.

Mises
  • 4,251
  • 2
  • 19
  • 32
1

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

you should do:

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

according to latest docs

Jacek Pietal
  • 11
  • 1