How to throw error from RxJS map operator (angular)

Question

I want to throw an error from my observable's map operator based on a condition. For instance if correct API data is not received. Please see the following code:

private userAuthenticate( email: string, password: string ) {
    return this.httpPost(`${this.baseApiUrl}/auth?format=json&provider=login`, {userName: email, password: password})
        .map( res => { 
            if ( res.bearerToken ) {
                return this.saveJwt(res.bearerToken); 
            } else {
                // THIS DOESN'T THROW ERROR --------------------
                return Observable.throw('Valid token not returned');
            }
        })
        .catch( err => Observable.throw(this.logError(err) )
        .finally( () => console.log("Authentication done.") );
}

Basically as you can see in the code, if the response (res object) doesn't have bearerToken I want to throw out an error. So that in my subscription it goes into the 2nd parameter (handleError) mentioned below.

.subscribe(success, handleError)

Any suggestions?

Oh sorry, it doesn't work with `return throw 'message here'` but does work without the `return` keyword. Let me check if its working correct logically. — Hassan, Apr 04 '17 at 06:22
The error text is not being received in the `subscribe` method and the `.finally()` in the stream also triggers. (However the execution is stopped which is a good thing) — Hassan, Apr 04 '17 at 06:28
nothing - its just a console.log at the moment which i will mature later on to some error logging mechanism later on. — Hassan, Apr 04 '17 at 06:30
This is why `subscribe()` doesn't receive anything. `this.logError(err)` should `return err;`. `subscribe(...)` receives what `Observable.throw(...)` emits. If the value it emits is `null`, then `subscribe(...)` will receive `null`. — Günter Zöchbauer, Apr 04 '17 at 06:31
@GünterZöchbauer Sir You are a Genius ! :) Its passing the error message now. However the last '.finally' method is still running. Is that by design? — Hassan, Apr 04 '17 at 06:34
Sure, `finally` is supposed to run in every case (success or error). That's exactly what it's made for. — Günter Zöchbauer, Apr 04 '17 at 06:34

martin · Accepted Answer · 2019-01-15T10:54:57.717

191

Just throw the error inside the map() operator. All callbacks in RxJS are wrapped with try-catch blocks so it'll be caught and then sent as an error notification.

This means you don't return anything and just throw the error:

map(res => { 
  if (res.bearerToken) {
    return this.saveJwt(res.bearerToken); 
  } else {
    throw new Error('Valid token not returned');
  }
})

The throwError() (former Observable.throw() in RxJS 5) is an Observable that just sends an error notification but map() doesn't care what you return. Even if you return an Observable from map() it'll be passed as next notification.

Last thing, you probably don't need to use .catchError() (former catch() in RxJS 5). If you need to perform any side effects when an error happens it's better to use tap(null, err => console.log(err)) (former do() in RxJS 5) for example.

Jan 2019: Updated for RxJS 6

edited Jan 15 '19 at 10:54

answered Apr 04 '17 at 06:36

martin

93,354
25
191
226

1

Thanks @martin - Yes your solution works. I actually had a problem inside my logError method as well which @GünterZöchbauer pointed out. I had to `return` the error object from it and now it works perfectly :) Thanks! – Hassan Apr 04 '17 at 06:42
@martin: Could you please develop why we wouldn't want to you .catch() here? – Bob Jul 06 '17 at 07:18
1

@Bob Because the OP was using `catch()` only to log and rethrow the error, which unnecessary if you just want to perform a side-effect (logging the error) and it's easier to use just `do()` – martin Jul 06 '17 at 09:17
1

Is this identical to `return throwError(new Error('Valid token not returned'));` ? – Simon_Weaver Jul 09 '18 at 23:50
@Simon_Weaver no it's not. `return throwError()` returns an `Observable`, this just interrupts the observable stream immediately, without returning at all. – RaidenF Dec 27 '18 at 13:49
Documentation for the `catch` to `catchError` change and the `throw` to `throwError` change can be found [here](https://rxjs-dev.firebaseapp.com/guide/v6/migration) – Stubbs Apr 26 '19 at 19:37
one could use `throw new Error('Error');` and use `catchError(err => of(console.log('message:', err))),` [throwError doc](https://www.learnrxjs.io/operators/error_handling/catch.html) `:warning: Remember to return an observable from the catchError function!` – Ravi Anand Nov 28 '19 at 09:47

score 51 · Answer 2 · edited Mar 09 '21 at 17:17

If you feel like throw new Error() seems un-observable-like you can use return throwError(...) with switchMap instead of map (the difference being switchMap has to return a new observable instead of a raw value):

// this is the import needed for throwError()
import { throwError } from 'rxjs';


// RxJS 6+ syntax
this.httpPost.pipe(switchMap(res => { 
   if (res.bearerToken) {
      return of(this.saveJwt(res.bearerToken)); 
   } 
   else {
      return throwError('Valid token not returned');  // this is 
   }
});

or more concisely:

this.httpPost.pipe(switchMap(res => (res.bearerToken) ? 
                                    of(this.saveJwt(res.bearerToken)) : 
                                    throwError('Valid token not returned')
));

The behavior will be the same, it's just a different syntax.

You're literally saying 'switch' from the HTTP observable in the pipe to a different observable, which is either just 'wrapping' the output value, or a new 'error' observable.

Don't forget to put of or you'll get some confusing error messages.

Also the beauty of 'switchMap' is that you can return a whole new 'chain' of commands if you wanted to - for whatever logic needs to be done with saveJwt.

Once I started thinking of `switchMap` as an asynchronous `if` statement - things made a lot more sense :-) — Simon_Weaver, Nov 19 '19 at 00:04
If you encounter `Importing this module is blacklisted. Try importing a submodule instead. (import-blacklist)tslint(1)`, then use `import { throwError } from 'rxjs/internal/observable/throwError';`, instead. — Cameron Hudson, Aug 06 '21 at 18:16
A heads up that as of RxJS 8, `throwError(...)` where the parameter is a primitive (such as an error message) will be deprecated. Instead, pass an error factory function, i.e. `throwError(() => new Error(...))`. — marked-down, Nov 12 '21 at 02:20

christo8989 · Answer 3 · 2019-03-14T13:43:16.043

8

Even though this question is already answered, I'd like to share my own approach (even though its only slightly different from above).

I would decide what is returned separate from the mapping and vice versa. I'm not sure what operator is best for this so I'll use tap.

this.httpPost.pipe(
  tap(res => { 
    if (!res.bearerToken) {
      throw new Error('Valid token not returned');
    }
  }),
  map(res => this.saveJwt(res.bearerToken)),
);

edited Mar 14 '19 at 13:43

answered Mar 04 '19 at 23:27

christo8989

6,442
5
37
43

1

the return value of `tap` is ignored. this code does different thing than it says – s-f Mar 14 '19 at 13:25
I’m still getting used to rxjs. Would using switchMap be better? Can somebody suggest a different operator or edit directly? – christo8989 Mar 14 '19 at 13:27
I think that suggested `throw new Error()` is the best option so far – s-f Mar 14 '19 at 13:39
2

I was first skeptical about this approach but rxjs documentation has similar example https://rxjs.dev/api/operators/tap#example-2 – Petri Ryhänen Feb 03 '22 at 13:59

score -1 · Answer 4 · answered Jul 29 '21 at 11:47

-1

Understand the difference of throwError() is not throw error https://medium.com/angular-in-depth/throwerror-is-not-throw-error-ad6c76c53377

answered Jul 29 '21 at 11:47

jcdsr

1,123
1
17
35

2

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](/help/deleted-answers) – 4b0 Jul 29 '21 at 11:58

How to throw error from RxJS map operator (angular)

4 Answers4

Linked

Related