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

3
  • 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
    Commented Oct 9, 2019 at 5: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
    Commented Oct 9, 2019 at 5:25
  • Possible duplicate : stackoverflow.com/questions/46019771/… Commented Oct 9, 2019 at 5:27

5 Answers 5

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.");
    }
}
1
  • 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. Commented May 21, 2020 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))
1
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

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.

1

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

you should do:

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

according to latest docs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.