Как отображать ошибки в представлении компонентов с помощью Angular 2?

В моем недавнем проекте Angular 2 я пытаюсь добавить компонент, который отображает всевозможные ошибки. Я могу манипулировать ошибками и отображать их в консоли разработчика Chrome, но мне не удается сгенерировать из них выходные данные.

Для этого я добавил класс обслуживания, который расширяет ErrorHandler ядра Angular. Он содержит тему, на которую вы можете подписаться, чтобы получать новые сообщения.

import { Injectable, ErrorHandler } from '@angular/core';
import { Subject } from 'rxjs/Rx';

export interface IMiaErrorMessage {
    exception: string,
    stackTrace?: any,
    reason?: string
}


@Injectable()
export class MiaErrorHandlingService extends ErrorHandler {

    public errors: Subject<IMiaErrorMessage> = new Subject<IMiaErrorMessage>();

    handleError(exception: any): void {
        console.groupCollapsed('Fehler');
        console.error(exception);
        console.groupEnd();
        let error: IMiaErrorMessage = {
            "exception": ""+exception
        }
        console.log('error', error);
        this.errors.next(error);

    }
}

После этого я добавил компонент, который должен отображать сообщения об ошибках. Существует subscribe-вызов, который добавляет новые сообщения об ошибках в errors-массив. Две функции throwError и addError предназначены для тестирования. Когда я просто добавляю текст исключения с помощью функции addError, все работает нормально, но не тогда, когда я на самом деле выдаю ошибку с помощью throwError. Вывод консоли для обоих одинаковый.

import { Component, Input } from '@angular/core';
import { MiaErrorHandlingService, IMiaErrorMessage } from './../services/mia-error-handling.service';
import { Subject } from 'rxjs/Rx';

@Component({
    selector: 'mia-errors',
    templateUrl: 'errors.component.html',
    styleUrls: ['errors.component.scss'],
    providers: [MiaErrorHandlingService]

})
export class ErrorsComponent {
    title = 'Es ist ein Fehler aufgetreten';

    private errors: Array<IMiaErrorMessage> = [];

    constructor(private miaErrorHandlingService: MiaErrorHandlingService) {

        // Observer of the connection status
        this.miaErrorHandlingService.errors.subscribe(
            value => this.errors.push(value),
            error => console.info('ERROR', error),
            () => console.info('COMPLETE')
        );

    }

    private throwError() {
        console.log('throwError');
        throw Error('Hello again');
    }

    private addError() {
        console.log('addError');
        this.miaErrorHandlingService.handleError('Foo');
    }

}

Вывод консоли

errors.component.ts:35 addError
mia-error-handling.service.ts:18 Fehler
mia-error-handling.service.ts:19 FooMiaErrorHandlingService.handleError @ mia-error-handling.service.ts:19 ErrorsComponent.addError @ errors.component.ts:36_View_ErrorsComponent0._handle_click_13_0 @ ErrorsComponent.ngfactory.js:164(anonymous function) @ view.js:404(anonymous function) @ dom_renderer.js:249(anonymous function) @ dom_events.js:26ZoneDelegate.invoke @ zone.js:203onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:202Zone.runGuarded @ zone.js:110NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304
mia-error-handling.service.ts:24 error Objectexception: "Foo"__proto__: Object
errors.component.ts:30 throwError
mia-error-handling.service.ts:18 Fehler
mia-error-handling.service.ts:19 ViewWrappedError {_nativeError: Error: Error in ./ErrorsComponent class ErrorsComponent - inline template:10:8 caused by: Hello agai…, originalError: Error: Hello again
    at ErrorsComponent.throwError (http://localhost:4200/main.bundle.js:67888:15)…, context: DebugContext}MiaErrorHandlingService.handleError @ mia-error-handling.service.ts:19next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304
mia-error-handling.service.ts:24 error Objectexception: "Error: Error in ./ErrorsComponent class ErrorsComponent - inline template:10:8 caused by: Hello again"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()

Для полноты вот моя точка зрения

    <dl *ngFor="let error of errors">
        <dt>
            <app-icon>warning</app-icon>
        </dt>
        <dd>{{error.exception}}</dd>
    </dl>
<button (click)="throwError()">Do something wrong!</button>
<button (click)="addError()">addError</button>

Я благодарен за каждый вклад, который я могу получить.