error handling Angular 6

Question

When getting a 409 error from backend, I would like to display the response message that the backend developer provides me.

I do this

return this.http.post('url to API', data, {
      reportProgress: true,
      observe: 'events'})
      .pipe(
        map(
          res => {
            return res;
          }
        ),
        catchError((error) => {
          return throwError(error);
        })
      );

here are my imports

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment';
import { Observable, Observer, throwError } from 'rxjs';
import { AuthService } from '../components/auth/auth.service';

but I get this in my console

typeError: _node_modules_rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function
    at CatchSubscriber.selector (http-load.interceptor.ts:21)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:43)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:132)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:106)
    at XMLHttpRequest.onLoad (http.js:1849)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)

Johansrk · Accepted Answer · 2018-08-15 08:55:53Z

2

Ok i found the problem

I have made a interceptor for handling reponses and errors, and I had totally forgot about it. In it I used

return Observable.throw(error);

I should have used

return throwError(error);

answered Aug 15, 2018 at 8:55

Johansrk

5,2803 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Nuc · Accepted Answer · 2018-08-15 08:18:28Z

0

Catching the error and rethrowing it right after doesnt make sense.

It really depends where you subscribe. To display error message in your component try to manipulate error there:

constructor(private http: HttpClient) {
   this.loadData().subscribe(
      data => console.log('received', data),
      null,
      err => console.log('errored', err)
   );
}

loadData() {
   // your original function without throwError
   return this.http.post('url to API', data, {
      reportProgress: true,
      observe: 'events'})
      .pipe(
        map(
          res => {
            return res;
          }
        )
      );
}

Btw also map operator inside of your pipe doesnt make sense because it doesnt modify values.

answered Aug 15, 2018 at 8:18

Martin Nuc

5,7943 gold badges45 silver badges52 bronze badges

3 Comments

Johansrk Over a year ago

you are right about the map. That is removed now. Moving the error inside the subscribe, gives the same error

Martin Nuc Over a year ago

@Johansrk remove those imports which are not needed now.

Martin Nuc Over a year ago

@Johansrk also I think there is something wrong with your project setup. Maybe try also removing node_modules and doing npm install again.

Collectives™ on Stack Overflow

error handling Angular 6

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related