How to throw an observable error manually?

Question

I am working on an Angular app in which I am making a rest call through HTTP as below:

login(email, password) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let options = new RequestOptions({ headers: headers });
    let body = `identity=${email}&password=${password}`;
    return this.http.post(`${this._configService.getBaseUrl()}/login`, body, options)
    .map((res: any) => {
        let response: any = JSON.parse(res._body);
        if (response.success == 0) {
          Observable.throw(response);  // not working
        } else if (response.success == 1) {
          console.log('success');
          localStorage.setItem('auth_token', 'authenticated');
          this.loggedIn = true;
          return response;
        }
    });
}

Basically I want my component to get response & error in my subscribe call, i.e.

this._authenticateService.login(this.loginObj['identity'],this.loginObj['password']).subscribe(
  (success)=>{      
    this.credentialsError=null;  
    this.loginObj={};  
    this._router.navigate(['dashboard']);    
  },
  (error)=>{
    console.log(error);        
    this.credentialsError=error;     
  }
);

but my API always returns success as it is defined that way.

How can I throw an error message if response.success == 0, so that it will be accessed inside error argument of my subscribe callback?

what is the status code you are getting, i mean it can be else then 0? — Jorawar Singh, Nov 09 '16 at 16:58
@MrJSingh the guy who designed the API only returned success as 0 or 1 to validate the response.so I my operation was successfull,it will return success =1 or it will return success=0 .now I want to throw error if success is 0.is that possible? — Bhushan Gadekar, Nov 09 '16 at 17:02
You can try doing this: it´s a similar case https://stackoverflow.com/a/55286461/8342681 — Javier Solis Guzman, Mar 21 '19 at 17:57

score 134 · Accepted Answer · edited Jul 16 '19 at 10:29

134

if (response.success == 0) {
   throw Observable.throw(response);  
 }

Edit for rxjs 6:

if (response.success == 0) {
   throw throwError(response);  
 }

edited Jul 16 '19 at 10:29

abd0991

272
5
18

answered Nov 09 '16 at 17:15

Jorawar Singh

7,463
4
26
39

1

I am getting it in success callback even after not using this – Bhushan Gadekar Nov 09 '16 at 17:17
2

i don't understand, what do you mean even when not using it? could you explain it to me? i tested it as you have the case and Observable will throw error only if success is 0. – Jorawar Singh Nov 09 '16 at 17:24
I mean if my response is returning anything , be it error or success, it will always return it into success callback.I want error to be thrown in error callback.. – Bhushan Gadekar Nov 09 '16 at 17:26
i.e. even if I dont use Observable.throw , I can access error in success callback – Bhushan Gadekar Nov 09 '16 at 17:27
ok then we need to change code a little bit. i will come back to you in short! – Jorawar Singh Nov 09 '16 at 17:28
here it is the trick throw Observable.throw(response) now your response will be injected into error object. you can log and see it. – Jorawar Singh Nov 09 '16 at 17:36
28

This answer is outdated. – Slava Fomin II Jun 20 '18 at 17:28
This method is deprecated, see answer below (using throwError from 'rxjs') – tanou May 29 '19 at 15:22
11

This will return an Observable in the error callback which isn't good code design. Instead just throw your own error object `throw { message: 'Bad response', value: response}` – frido Jul 16 '19 at 10:25

Kristjan Liiva · Answer 2 · 2018-05-07T16:40:43.860

122

rxjs 6

import { throwError } from 'rxjs';

if (response.success == 0) {
  return throwError(response);  
}

rxjs 5

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

if (response.success == 0) {
  return new ErrorObservable(response);  
}

What you return with ErrorObservable is up to you

edited May 07 '18 at 16:40

answered Mar 06 '18 at 12:05

Kristjan Liiva

9,069
3
25
26

11

The accepted answer solution is deprecated in rxjs6. Thank you, your one works :) – grreeenn Jul 23 '18 at 14:43
1

This is the way to go when used within an operator that is expected to return an Observable like `switchMap` or `mergeMap`. When used within `map` you will end up with a nested Observable (you will get an Observable in the success callback of your Observable) which probably isn't what you want. – frido Jul 16 '19 at 10:34

score 13 · Answer 3 · answered Sep 12 '18 at 09:27

13

with rxjs 6

import { throwError } from 'rxjs';
throwError('hello');

answered Sep 12 '18 at 09:27

sivy

361
2
7

1

Care to explain why is that better than the native part of the language i.e. the `throw` keyword? – Endrju Nov 07 '18 at 02:25
2

@Endrju it's completely different. return throwError will return observable that you can then handle with catchError or inside subsribe. if you throw new Error('') this will bubble up and won't be handled inside observables... – pajics Mar 15 '19 at 23:32
Just calling `throwError` didn't work for me. – Doug Domeny Feb 10 '21 at 22:00

score 12 · Answer 4 · edited Aug 29 '19 at 11:02

12

rxjs 5

Either

throw response;

or

throw Observable.throw(response);

edited Aug 29 '19 at 11:02

Magelan

189
1
13

answered Nov 09 '16 at 18:36

Günter Zöchbauer

623,577
216
2,003
1,567

3

for the second one it will be: `throw Observable.throw(response)` – Yassine ElBadaoui Mar 01 '18 at 04:19
1

+1 for the simple `throw response`. Everything else, e.g. returning an ErrorObservable or throwing an ErrorObservable inside `map` isn't ideal as you will end up with a nested Observable. – frido Jul 16 '19 at 10:39
is the second one deprecated? – Farhad Mar 22 '21 at 23:37
1

@Farhad yes it's deprecated. See https://stackoverflow.com/a/40512534/5493813 for the correct answer – st.huber Sep 16 '21 at 13:44

score 9 · Answer 5 · answered Nov 02 '21 at 20:26

9

rxjs 7

throwError(() => new Error(response))

more info https://rxjs.dev/deprecations/breaking-changes#throwerror

answered Nov 02 '21 at 20:26

Faouzi Chabchoub

131
2
5

score 8 · Answer 6 · edited Oct 19 '19 at 17:10

8

Here is the official example (that emits number 7 and then error 'oops!'):

import { throwError, concat, of } from 'rxjs';

const result = concat(of(7), throwError(new Error('oops!')));
result.subscribe(x => console.log(x), e => console.error(e));

From: https://rxjs-dev.firebaseapp.com/api/index/function/throwError

edited Oct 19 '19 at 17:10

Adrian Mole

49,934
160
51
83

answered Oct 19 '19 at 16:43

Sinisa Rudan

561
8
10

score 0 · Answer 7 · answered Nov 09 '16 at 16:53

0

Use the catch operator

this.calcSub = this.http.post(this.constants.userUrl + "UpdateCalculation", body, { headers: headers })
   .map((response: Response) => {
      var result = <DataResponseObject>response.json();
         return result;
   })
   .catch(this.handleError)
   .subscribe(
      dro => this.dro = dro,
      () => this.completeAddCalculation()
   );

And handle the error like this:

private handleError(error: Response) {
    console.error(error); // log to console instead
    return Observable.throw(error.json().error || 'Server Error');
}

answered Nov 09 '16 at 16:53

John Baird

2,606
1
14
33

my api never calls catch block. thats the issue I am having. In my response I want to check for certain condition and then throw the error or call the catch block. – Bhushan Gadekar Nov 09 '16 at 16:57
I've gotten this error with private handleError(error: Response) __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.a.throw is not a function at CatchSubscriber.selector – Nam Le Jan 08 '18 at 09:29
1

@NamLe you have to import throw in order to use it. `import 'rxjs/add/observable/throw';` – SuffPanda Mar 12 '18 at 14:13

score 0 · Answer 8 · answered Jul 04 '18 at 15:25

Most of my issues were related to the imports, so here's the code that worked for me...

import {_throw} from 'rxjs/observable/throw';
login(email, password) {
...
    return this.http.post(`${this._configService.getBaseUrl()}/login`, body, options)
    .map((res: any) => {
...
        if (response.success == 0) {
           _throw(response);  
        } else if (response.success == 1) {
...
        }
    });
}

This will be the solution if you are facing errors like...

ERROR TypeError: WEBPACK_IMPORTED_MODULE_2_rxjs_Observable.Observable.throw is not a function

score 0 · Answer 9 · answered Jan 26 '19 at 00:18

Usually when you're throwing an error you'll be doing so at the exact moment the problem occurred and you want to raise it immediately, but this may not always be the case.

For instance there is the timeoutWith() operator, which is perhaps one of the most likely reasons you'll need to do this.

results$ = server.getResults().pipe(timeoutWith(10000, ....) )

This takes an 'error factory', which is a function.

 errorFactory = () => 'Your error occurred at exactly ' + new Date()

eg.

results$ = server.searchCustomers(searchCriteria).pipe(timeoutWith(10000, 
              () => 'Sorry took too long for search ' + JSON.stringify(searchCriteria)) )

Note that when using timeoutWith you'll never get the actual server response back - so if the server gave a specific error you'd never see it. This above example can be very useful in debugging, but be sure not to display the error to the end user if you use the above example.

AN error factory is helpful because it doesn't evaluate the code until the actual error occurs. So you can put 'expensive' or debugging operations inside that will get executed when the error is actually finally needed.

If you need to use a 'factory' to create your error somewhere other than in timeout you can use the following.

 EMPTY.pipe(throwIfEmpty(errorFactory))

score 0 · Answer 10 · answered Mar 28 '22 at 13:52

0

You can use catchError(error) => console.log(error) inside a pipe

answered Mar 28 '22 at 13:52

Franco

145
1
9

How to throw an observable error manually?

10 Answers10

Linked

Related