Angular 4 - Observable catch error

Question

How can I solve the problem of return with error, use the capture inside the Observable?

I want to execute a function inside the catch, to do some validation before the subscribe is executed.

Thank you in advance, thank you very much for your attention.

Error occurs in -> .catch( (e) => {console.log(e)} )

import { Injectable } from '@angular/core';
import { Headers, Http, ResponseOptions} from '@angular/http';
import { AuthHttp } from 'angular2-jwt';

import { MEAT_API } from '../app.api';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class  CompareNfeService {


    constructor(private http: AuthHttp) { }

    envirArquivos(order): Observable<any> {
        const headers = new Headers();
        return this.http.post(`${MEAT_API}compare/arquivo`, order,
        new ResponseOptions({headers: headers}))
        .map(response => response.json())
        .catch( (e) => {console.log(e)} );
    }
}

Error

ERROR in /XXXXXX/application/src/app/compare/service.ts (28,17): Argument of type '(e: any) => void' is not assignable to parameter of type '(err: any, caught: Observable) => ObservableInput<{}>'.
Type 'void' is not assignable to type 'ObservableInput<{}>'.

Prav · Accepted Answer · 2017-09-02 22:33:17Z

If you want to use the catch() of the Observable you need to use Observable.throw() method before delegating the error response to a method

import { Injectable } from '@angular/core';
import { Headers, Http, ResponseOptions} from '@angular/http';
import { AuthHttp } from 'angular2-jwt';

import { MEAT_API } from '../app.api';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class CompareNfeService {


  constructor(private http: AuthHttp) {}

  envirArquivos(order): Observable < any > {
    const headers = new Headers();
    return this.http.post(`${MEAT_API}compare/arquivo`, order,
        new ResponseOptions({
          headers: headers
        }))
      .map(response => response.json())
      .catch((e: any) => Observable.throw(this.errorHandler(e)));
  }

  errorHandler(error: any): void {
    console.log(error)
  }
}

Using Observable.throw() worked for me

Josh R · Accepted Answer · 2019-07-03 05:39:53Z

24

With angular 6 and rxjs 6 Observable.throw(), Observable.off() has been deprecated instead you need to use throwError

ex :

return this.http.get('yoururl')
  .pipe(
    map(response => response.json()),
    catchError((e: any) =>{
      //do your processing here
      return throwError(e);
    }),
  );

edited Jul 3, 2019 at 5:39

Josh R

1453 silver badges8 bronze badges

answered Nov 30, 2018 at 9:00

Imal Hasaranga Perera

10.1k3 gold badges53 silver badges43 bronze badges

Comments

bryan60 · Accepted Answer · 2018-09-14 13:27:41Z

16

catch needs to return an observable.

.catch(e => { console.log(e); return Observable.of(e); })

if you'd like to stop the pipeline after a caught error, then do this:

.catch(e => { console.log(e); return Observable.of(null); }).filter(e => !!e)

this catch transforms the error into a null val and then filter doesn't let falsey values through. This will however, stop the pipeline for ANY falsey value, so if you think those might come through and you want them to, you'll need to be more explicit / creative.

edit:

better way of stopping the pipeline is to do

.catch(e => Observable.empty())

edited Sep 14, 2018 at 13:27

answered Sep 2, 2017 at 21:17

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

1 Comment

John Strickler Over a year ago

Or just .catch(e => Observable.never()).

Aravind · Accepted Answer · 2017-09-02 21:23:41Z

2

You should be using below

return Observable.throw(error || 'Internal Server error');

Import the throw operator using the below line

import 'rxjs/add/observable/throw';

answered Sep 2, 2017 at 21:23

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

3 Comments

bryan60 Over a year ago

only if you want to pass the error through. If your goal is to truly handle / catch the error, then you shouldn't rethrow.

Aravind Over a year ago

@bryan60 elaborate please!

bryan60 Over a year ago

Observable.throw() throws an error, so that the rest of the observable sequence skips and you go straight to the error handler of the subscriber. You can optionally not rethrow and just return an observable if this is not your intended behavior. It really depends on your use case.

Collectives™ on Stack Overflow

Angular 4 - Observable catch error

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related