Display http errors globally with Angular 2

Question

I want to display popup window with error message of http connection globally for all pages of my application.

Any good way do to it?

Answer 1

You can create a custom component and show list of errors in the popup window by including this custom component. For example you can do this

@Component({
     selector: 'list-errors',
     template: `<ul class="error-messages" *ngIf="errorList">
        <li *ngFor="let error of errorList">
            {{ error }}
        </li> </ul>`
    })
export class ListErrorsComponent {
  formattedErrors: Array<string> = [];

      @Input()
      set errors(errorList: Errors) {
        this.formattedErrors = [];

        if (errorList.errors) {
          for (let field in errorList.errors) {
            this.formattedErrors.push(`${field} ${errorList.errors[field]}`);
          }
        }
      };

      get errorList() { return this.formattedErrors; }
      }

Use this in the popup window where you want to display list of errors

   <list-errors [errors]="errors"></list-errors>

create a error model as such

  export class Errors {
  errors: {[key:string]: string} = {};
  }

set a value of error object and pass this error object to the list-error component

 errors: Errors = //assign your errors to this variable

Answer 2

I found solution.

The main idea: use bridge service with EventEmitter.

api.provider.ts

import { Injectable, Output, EventEmitter } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';

@Injectable()
export class ApiProvider {
    private _host: string;

    @Output() errorHandled$ = new EventEmitter();

    constructor(private _http: Http) {
        this._host = "http://localhost:5000";        
    }

    private errorHandler(response: Response): any {        
        if (response.status == 0)
        {            
            this.errorHandled$.emit({
                value: "ERR_CONNECTION_REFUSED"
            });
        }
        return null;
    }

    get(path: string): Promise<any> {
        var headers = new Headers();

        return this._http.get(this._host + path, { headers: headers })
            .toPromise()
            .then(response => {                         
                return response.json();
            })
            .catch((response: Response) => this.errorHandler(response));
    }

    post(path: string, body: string): Promise<any> {
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        return this._http.post(this._host + path, body, { headers: headers })
            .toPromise()
            .then((response: Response) => {
                return response.json();
            })
            .catch((response: Response) => this.errorHandler(response));
    }
}

app.component.ts

import 'rxjs/Rx';
import { Component } from '@angular/core';

import { ApiProvider } from './providers/api.provider';

@Component({
    selector: 'mii-app',
    templateUrl: './app.component.html'
})
export class AppComponent {    
    globalErrors: string[];

    constructor(private _api: ApiProvider) {
        this.globalErrors = [];

        _api.errorHandled$.subscribe(value => { console.log('subscribe'); this.globalErrors.push('error connection.')});          
    }

    clearErrors(): void
    {
        this.globalErrors = [];
    }
}

app.component.html

<div *ngIf="globalErrors.length > 0" class="alert alert-danger fade in">
    <a (click)="clearErrors()" class="close" aria-label="close">&times;</a>
    error...
</div>

We must register our ApiProvider in main.ts to have single instance from dependency injection.

main.ts

/// <reference path="../../typings/globals/core-js/index.d.ts" />

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent } from './app.component';
import { ApiProvider } from './providers/api.provider';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    ApiProvider
])
.catch(err => console.error(err));