Angular 4: How to properly handle app level http error as Observable error?

Question

I use an HTTP API that returns app-level error thru a json where status == 'error'.

In my signUp service, I do that:

    return this.userService
        .create(user)
        .map(
            json => { 
                console.log(json);
                if (json.status=='error') {
                    console.log('error return throw');
                    return Observable.throw('Credentials mismatch or not existing');
                }

                const user = json.data as User;    
                return user;
            },
            err => { 
                console.log(err);
            }
        );

And in my singUp.component, I do that:

    onSubmit() {
        // blahblah

        this.si
        .signUp(this.credentials.emailAddress, this.credentials.password, this.credentials.zipCode)
        .subscribe(
        user => {
            console.log(user);
            console.log(`SignUpComponent.onSubmit() found user.userId ${user.userId}`);
            this.router.navigate(['signin']);
        },
        err => {
            this.errorMessage = `*** SignUpComponent: Error while signing up {err}`;
            console.error('*** SignUpComponent: Error while signing up', err);
            this.resume();
            //this.router.navigate(['signup']);
        });

        this.ngOnChanges();
    }

Unfortunately, when the service returns an error (with the Observable.throw()), the component doesn't trigger the err closure but the user closure passing the Observable.throw as the user parameter.

I wish I had the err closure to be triggered.

What Im missing there?

Update: Here is what I get:

[Log] SigninService.signUp, zipCode=
[Log] {data: null, status: "error", message: "Error user create: - missing id   API usage v1b3: Tu…ate\"}↵post: []↵.↵", ws: "v1b3: Tuesday, August 25th 2017 20h20 @ Tanger"}
[Log] error return throw
[Log] ErrorObservable {_isScalar: false, error: "Credentials mismatch or not existing", scheduler: undefined, _subscribe: function, …}
[Log] SignUpComponent.onSubmit() found user.userId undefined

it looks for the API status in order to make sure the API returns the brand new user (when status=='success'). In case status equals 'error' (stands for user account is not created), I wish I 'to generate an error for the subscriber. — Stéphane de Luca, Aug 26 '17 at 20:30

DAG · Accepted Answer · 2017-08-27T10:02:42.787

1

You are handling the exception inside the user call back, it means it was succesfuly executed, in that case Observable.throws won't really act as an exception. In order to achieve that, you must use throw new Error("Credentials mismatch or not existing") that must replace return Observable.throw("Credentials mismatch or not existing"); Please, look at this: How to throw error from RxJS map operator (angular)

edited Aug 27 '17 at 10:02

answered Aug 26 '17 at 23:15

DAG

2,460
5
33
61

Thanks @dag to put me on track. Modify your answer to be: throw new Error("Credentials mismatch or not existing"); that must replace return Observable.thow("Credentials mismatch or not existing"); so that I can accept it. – Stéphane de Luca Aug 27 '17 at 09:10

score 0 · Answer 2 · answered Aug 26 '17 at 21:38

In order to avoid the problem you are having, I think you just need to do throw 'Credentials mismatch or not existing' without the return and Observable parts. Any errors raised during the execution of an observable would be propagated as errors on the current Observable.

At the moment, you are just replacing the json response with an Observable which is not what you want.

Ideally, the server should return an error response rather than a json with an error message and that would trigger your error handler in the subscribe.

Nope, that was my first try before trying return Observable.throw() in a desesparate move. — Stéphane de Luca, Aug 27 '17 at 09:11

score 0 · Answer 3 · answered Aug 27 '17 at 12:12

I finally came up with the following solution, expanding on the fact that 1) with throw new Error() I can still return an Observable and 2) when error throws the subscribe completion parameter does not trigger, one need to use the finally() call as follows:

signUp service:

create(user: User): Observable<User> {
    const wsUrl = `${this.wsApi}m=create&id=${user.id}`;  // URL to web api

    return this.http.post(wsUrl, JSON.stringify(user),  { headers: this.headers })
    .retry(3)
    .map(res => {
        const json = res.json() as any;

        if (json.status=='error') throw new Error(json.message);

        return json.data as User;
    });
}

signUp component:

    onSubmit() {
        // blahblah

        this.progressing = true;

        this.si
        .signUp(this.credentials.emailAddress, this.credentials.password, this.credentials.zipCode)
        .finally(() => setTimeout(() => this.progressing = false, 1000))
        .subscribe(
            user => this.router.navigate(['signin']),
            err => this.errorMessage = err
        );

        this.ngOnChanges();
    }

Angular 4: How to properly handle app level http error as Observable error?

3 Answers3