Angular ErrorHandler passed incorrect data

Question

//api.service.ts
public Get(slug: string): Observable<T> {
    return this.http.get(`${environment.apiBaseURL}/${this.endPoint}/${slug}`).pipe(
        map(data => this.serializer.fromJson(data) as T)
    );
}



//global-error-handler.ts
import { Injectable, ErrorHandler } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class GlobalErrorHandler implements ErrorHandler {
    handleError(error: any) {

        if (error instanceof HttpErrorResponse) {
            console.log('type is HttpErrorResponse');
        }
        else
        {
            console.log('type is Error');
        }
    }
}


//app.module.ts
{
    provide: ErrorHandler,
    useClass: GlobalErrorHandler,
}

errors from component which have subscribe returns error as HttpErrorResponse (which is the expected type. however, errors from resolvers return error as type Error.

Custom error types are lost when the error originate from a resolver, and only return the generic Error type.

do you need to handle it here in the service? I have found handling from within the subscription calling the service works well, can highlight how that could work for you if this is an option? — dev-dan
– dev-dan, Commented Sep 25, 2018 at 12:38
i handled it from the service to test if the error passed from the service is the expected one, and yep, it is an instance of HttpErrorResponse but from the errorHandler it wasn't the same instance, but rather a string. — Joe
– Joe, Commented Sep 25, 2018 at 12:41
i could handle it via subscription, but it kinda repetitive when you can handle it globally. right? — Joe
– Joe, Commented Sep 25, 2018 at 12:44
I think it depends on the application you are making, on a project recently i thought about setting up a service to handle all API error responses but then realised that the although the HTTP error response might be the same in two places based off that i would like to prompt users to do different things so handle it in each place necessary. — dev-dan
– dev-dan, Commented Sep 25, 2018 at 12:46

Joe · Accepted Answer · 2018-09-25 18:31:19Z

4

based on the issue here. it is getting a rejected error when an error is thrown from a resolver. so you're loosing the original error. the code below fixes the problem.

export class GlobalErrorHandler implements ErrorHandler {
    handleError(error: any) {
        error = error.rejection ? error.rejection : error; //this fixes the problem
        if (error instanceof HttpErrorResponse) {
            console.log('type is HttpErrorResponse');
        }
        else {
            console.log('type is Error');
        }
    }
}

edited Sep 25, 2018 at 18:31

answered Sep 25, 2018 at 18:22

Joe

8347 silver badges23 bronze badges

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

Comments

lolgans · Accepted Answer · 2018-09-25 14:05:24Z

0

What if you just call Get without the catchError

public Get(slug: string): Observable<T> {
return this.http.get(`${environment.apiBaseURL}/${this.endPoint}/${slug}`)
    .pipe(map(data => this.serializer.fromJson(data) as T))
}

and inside your global ErrorHandler you handle all 404/500 Errors

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

    handleError(error: any): void {
        if (error.status === 404) {
             console.log('404 Error happened')
             // TODO handle error here (redirect)
        }
    }
}

answered Sep 25, 2018 at 14:05

lolgans

1741 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular ErrorHandler passed incorrect data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related