Display HTTP Errors Worldwide with Angular 2

Question

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

Any good way to do this?

Answer 1

I have found a solution.

Main idea: use the 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 in order to have one instance from the 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)); 

Answer 2

You can create a custom component and display a list of errors in a pop-up window by enabling 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 where you want to display a list of errors

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

create an error model as such

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

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

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