Angular 2: Exception personalizado: atraso na detecção de alterações do manipulador
Estou tentando implementar um costumeExceptionHandler
em um aplicativo Angular 2 que envia erros não capturados para um costumeAlertsService
. O objetivo é permitir que os principaisApp
componente para assinar os alertas fornecidos peloAlertsService
para que ele possa exibir os erros na interface do usuário.
O problema que estou vendo é que os erros enviados para oAlertsService
pelo costumeExceptionHandler
não são refletidos na interface do usuário até que outro erro seja encontrado. Isso faz com que a interface do usuário seja sempre um alerta por trás do que realmente está sendo fornecido peloAlertsService
.
Meu palpite é que esse comportamento tem algo a ver com a detecção de alterações e o caso especial do ExceptionHandler, mas não tenho certeza para onde ir a partir daqui. Procurando ajuda dos especialistas do Angular2!
Exemplo de código abaixo, clique aqui:https://plnkr.co/edit/xPoWCELA9IHqeLBS4wXs?p=preview
import { Component, ExceptionHandler, Injectable, OnInit, provide } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { Subject } from 'rxjs/Subject'
export interface Alert {
message: string;
}
@Injectable()
export class AlertsService {
private alertTriggeredSubject = new Subject<Alert>();
alertTriggered = this.alertTriggeredSubject.asObservable();
triggerAlert(message: string) {
this.alertTriggeredSubject.next(<Alert>{ message: message });
}
}
@Injectable()
export class CustomExceptionHander {
constructor(private alertsService: AlertsService) { }
call(exception, stackTrace = null, reason = null) {
this.alertsService.triggerAlert(exception.originalException);
console.error('EXCEPTION:', exception);
}
}
@Component({
selector: 'child-component',
template : `
<h3>Child</h3>
<div id="child">
<button (click)="breakMe()">Break Me!</button>
<div>Alerts Sent:</div>
<ul><li *ngFor="let error of errors">{{error}}</li></ul>
</div>`
})
export class ChildComponent {
errors: string[] = [];
numErrors = 0
breakMe() {
this.numErrors++;
let error = `I broke it (${this.numErrors})`;
// The error added to the array below is never reflected in the
// "Alerts Sent:" <ul>...not sure why
this.errors.push(error);
console.info('ChildComponent.errors', this.errors);
// Simulate unhandled exception
throw new Error(error);
}
}
@Component({
selector: 'my-app',
template : `
<h3>Parent</h3>
<div id="parent">
<div>Alerts Received:</div>
<ul><li *ngFor="let alert of alerts">{{alert.message}}</li></ul>
<child-component></child-component>
</div>`
directives: [ChildComponent]
})
export class App implements OnInit {
constructor(private alertsService: AlertsService) { }
alerts: Alert[] = [];
ngOnInit() {
this.alertsService.alertTriggered.subscribe(alert => {
this.alerts.push(alert);
// Alert gets received, but is not reflected in the UI
// until the next alert is received, even thought the
// alerts[] is up-to-date.
console.info('App alert received:', alert);
console.info('App.alerts:', this.alerts);
});
}
}
bootstrap(App, [
AlertsService,
provide(ExceptionHandler, { useClass: CustomExceptionHander })
]).catch(err => console.error(err));