How to throw an observable error manually?

JavascriptAngularTypescriptRxjs

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

Edit for rxjs 6:

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

Solution 2 - Javascript

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

Solution 3 - Javascript

with rxjs 6

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

Solution 4 - Javascript

rxjs 5

Either

throw response;

or

throw Observable.throw(response);

Solution 5 - Javascript

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

Solution 6 - Javascript

rxjs 7

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

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

Solution 7 - Javascript

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');
}

Solution 8 - Javascript

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

Solution 9 - Javascript

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)) 

Solution 10 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBhushan GadekarView Question on Stackoverflow
Solution 1 - JavascriptJorawar SinghView Answer on Stackoverflow
Solution 2 - JavascriptKristjan LiivaView Answer on Stackoverflow
Solution 3 - JavascriptsivyView Answer on Stackoverflow
Solution 4 - JavascriptGünter ZöchbauerView Answer on Stackoverflow
Solution 5 - JavascriptSinisa RudanView Answer on Stackoverflow
Solution 6 - JavascriptFaouzi ChabchoubView Answer on Stackoverflow
Solution 7 - JavascriptJohn BairdView Answer on Stackoverflow
Solution 8 - JavascriptAjayView Answer on Stackoverflow
Solution 9 - JavascriptSimon_WeaverView Answer on Stackoverflow
Solution 10 - JavascriptFrancoView Answer on Stackoverflow