HttpInterceptors handling http errors angular 4.3

Question

I'm trying to consume a rest api, with a simple http get. When there's no registers my api response a error 500 like that:

{ "errors": [ { "code": "500", "message": "no registers." } ]}

So, i’m wondering how i can write an interceptor to handle all kind of http error to prevent logging the error @ browser’s console.

My app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { sharedConfig } from './app.module.shared';
import 'rxjs/add/operator/toPromise';
import { NoopInterceptor } from "./app.interceptor";

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        ...sharedConfig.imports
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: NoopInterceptor,
            multi: true,
        }
    ]
})
export class AppModule {
}

My app.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class NoopInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const started = Date.now();

        return next.handle(req)
        .do(event => {
            debugger;
            if (event instanceof HttpResponse) {
                const elapsed = Date.now() - started;
                console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
            }          
        });

    }
}

My app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Config } from "./app.constantes";

@Injectable()
export class AppService {
    protected config: Config;
    constructor(private http: HttpClient) {
        this.config = new Config();            
    }   

    get(service: string, complementos?: any, parametros?: any) {
        var complemento = complementos != null && complementos.length > 0 ? complementos.join('/') : '';
        var url = this.config.SERVER + service + this.config.TOKEN + '/' + complemento;
         return this.http.get(this.config.SERVER + service + this.config.TOKEN + '/' + complemento);
    }

}

compra.component.ts is where a make my get call

 consultaPeriodoCompra(mes: any): void {
        var lista = null;

        this.service.get(this.config.CONSULTA_ULTIMAS_COMPRAS, ['2', mes.anoMes])
            .subscribe((response) => {               

                this.atualizaLista(mes, response['payload'].listaTransacao);
            },
            (err) => {                    
                this.atualizaLista(mes, []);
            });

    }

that it's what i want to prevent

Does you api return also status code 500? Or it returns a 200 with said errors? — LookForAngular, Jul 19 '17 at 21:43
What do you mean by preventing the logging in the browser? Is this your only purpose? — LookForAngular, Jul 20 '17 at 13:26
@LookForAngular i put some code exemple to make it easier to undestand. — Hugo Humberto, Jul 20 '17 at 14:10
Failed ajax calls logging cannot be prevented by angular. It's more a chrome problem than an angular one. https://stackoverflow.com/questions/4500741/suppress-chrome-failed-to-load-resource-messages-in-console — LookForAngular, Jul 20 '17 at 14:13
@LookForAngular tks, i'll hadle this in my backend to return status code 200 with errors in it's body. — Hugo Humberto, Jul 20 '17 at 14:23
There is no need to. Why don't you simply live with that? There are no consequences in logging errors. — LookForAngular, Jul 20 '17 at 14:25

score 1 · Accepted Answer · answered Jul 20 '17 at 14:29

1

Actually is not possible to achieve what you want, is just default browser behavior, see jeff's response @ angular's github:

https://github.com/angular/angular/issues/8832

answered Jul 20 '17 at 14:29

thiagobucca

26
2

LookForAngular · Answer 2 · 2017-07-20T13:49:52.620

I dont really understand you goal, but if you need to handle the error caused by an ajax call you need to react to the observable .onError function

this.httpService.get(url)
.subscribe(
    // onnext
    () => [...],
    // onError
   (err) => [...]
);

However, onError callbacks are treated as a terminal event, in case you want to continue the stream, you should use a .catch operator

If you are speaking about angularjs interceptor, i'm afraid there is no current solution as i know. But you can easily achieve such functionality inside your services. Most of the times error resolution is varied, so unless youre building an audit service or a loading bar appwide the best approach is to apply a more specific logic

i put some code exemple to make it easier to undestand. – Hugo Humberto Jul 20 '17 at 14:09 — Hugo Humberto, Jul 20 '17 at 14:09

score 0 · Answer 3 · answered Sep 05 '17 at 01:08

0

You could use GlobalErrorHandler that extends the ErrorHandler and implement the handleError() method. It shouldnt throw it to the browser then.

answered Sep 05 '17 at 01:08

lohiarahul

1,432
3
22
35

HttpInterceptors handling http errors angular 4.3

3 Answers3