使用Material Design的Angular2应用程序的一般错误处理程序
我试图为我的Angular4应用程序实现一般的ErrorHandler,目的是显示一个对话框,其中包含有关我收到的错误的一些信息。使用Material Design的Angular2应用程序的一般错误处理程序
这是错误处理程序:
import { ErrorHandler, Injectable, Injector } from '@angular/core'
// import { Router } from '@angular/router'
import { MatDialog } from '@angular/material'
import { HttpErrorResponse } from '@angular/common/http'
import { MessageDialog } from './message.dialog'
// import { LoginService } from '../login/main.service'
@Injectable()
export class DialogErrorHandler implements ErrorHandler {
constructor(private injector: Injector) {
}
handleError(error: any): void {
let localError = error;
let finalMessage: string = "Errore sconosciuto";
let finalCallback:() => void =() => { console.log("default callback")};
let dialog: MatDialog = this.injector.get(MatDialog);
// let login: LoginService = this.injector.get(LoginService);
// let router: Router = this.injector.get(Router);
if(localError instanceof HttpErrorResponse && localError.error instanceof Error){
localError = localError.error
}
if (localError instanceof HttpErrorResponse) {
console.log("http error");
let errorDesc = localError.status + " " + localError.statusText + ": ";
switch (localError.status) {
case 403:
finalMessage = "La sessione è scaduta, ripeti il login.";
// finalCallback =() => { login.logout(); router.navigate['/login']; };
break;
case 500:
finalMessage = "Errore sul server - " + errorDesc + localError.error;
break;
default:
finalMessage = errorDesc;
}
} else {
finalMessage = localError.toString();
finalCallback =() => { location.reload() };
}
dialog.open(MessageDialog, {
data: {
message: finalMessage,
callback: finalCallback
}
})
console.log(error);
}
}
虽然这是对话框:
import { Component, Inject } from '@angular/core'
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'
@Component({
selector: 'message-dialog',
template: `
<p mat-dialog-title color="primary" class="centered">Attenzione</p>
<div mat-dialog-content>{{message}}</div>
<div mat-dialog-actions style="display: flex; justify-content: center">
<button mat-button mat-dialog-close (click)="handleClick()">
OK
</button>
</div>
`,
styleUrls: ['../common/style.css']
})
export class MessageDialog {
message: string = "cose";
callback:() => void;
constructor(@Inject(MAT_DIALOG_DATA) private data,
private diagref: MatDialogRef<MessageDialog>) {
if (data) {
this.message = data.message;
this.callback = data.callback;
}
}
handleClick() {
this.diagref.close();
if (this.callback) {
this.callback();
}
}
}
这是我得出了一个plunkr:现在https://plnkr.co/edit/dZ9yNf?p=preview
,问题是在我发布错误之后,MatDialog I显示器不显示消息并且不关闭。它正确地执行回调函数,但它保持在那里。
- 我一直无法重现plunkr中的行为。我不知道为什么,但我怀疑它与这个事实有关,plunkr将我的HttpErrorResponse对象包含在另一个错误中。尽管如此,在我的开发环境中,即使我评论考虑错误类型的所有代码,也存在错误。
- 我试着用MatSnackBar代替MatDialog,没有运气,仍然是同样的问题,小吃店出现并且不想消失。
- 对话框本身也用于其他情况,在正常关闭的情况下,不会给出任何问题。
- 调试我发现问题是,对话框试图关闭自己,但从未发布MatDialogContainer上的状态更改事件,因为执行后我看到状态正在改变,但未调用回调。
我在做什么错?为什么这个奇怪的行为你有什么建议吗?
P.S.评论的东西是我将需要的东西,但我已经能够取出来简化处理程序而不解决问题。它在那里,不会被注释,但它不是问题。
编辑︰9天后,一个风滚草徽章和其他的东西,我已经能够重现错误。相同的plunkr,差异在于错误的根源。特别是:
handleClick(){
Observable.throw(new Error("local error")).subscribe(
() => {},
(err) => {throw err)
)
}
throwError(){
this.http.get("http://www.google.com/thisshouldnotexist").subscribe(
() => {},
(err) => {throw err}
)
}
在这种情况下,顺利,而throwError
挂在那儿。如果有人知道解决方案,请帮忙。
好像我在解决它之后没有回答自己。原来这是一个角度为here the issue I opened的错误,但不是你可能会想到的错误。实际上,通缉行为是“非关闭”行为,实际上UI并未更新。
原因是错误发生后,错误处理程序在NgZone之外执行,这意味着角度不会知道您所做的UI更改。 (我不得不谷歌zone.js了解所有这一切。)
解决方案是再次注入NgZone并在区域内手动运行东西。它可以工作,但由于区域内的错误被发送回处理程序,因此可能会导致无限循环(错误,操作显示错误会导致新错误,新错误会触发相同的操作,从而再次抛出错误等等) ...)。我所做的是避免这样做,即让警卫不要向用户界面显示一个以上的错误,这样除非用户告诉我它没问题,否则任何后续错误都会发送给控制台。这里是工作代码:
import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core'
import { Router } from '@angular/router'
import { MatDialog } from '@angular/material'
import { HttpErrorResponse } from '@angular/common/http'
import { MessageDialog } from '../dialogs/message.dialog'
import { LoginService } from '../login/main.service'
@Injectable()
export class DialogErrorHandler extends ErrorHandler {
private elaborating: boolean = false;
constructor(private injector: Injector, private ngzone: NgZone) {
super();
}
handleError(error: any): void {
if (!this.elaborating) {
this.elaborating = true;
let localError = error;
let finalMessage: string = "Errore sconosciuto";
let finalCallback:() => void =() => { console.log("default callback") };
let dialog: MatDialog = this.injector.get(MatDialog);
let login: LoginService = this.injector.get(LoginService);
let router: Router = this.injector.get(Router);
// nessun dialog per TypeError, evita problemi con MatSelect
if (localError instanceof TypeError) {
this.elaborating = false;
} else {
if (localError instanceof HttpErrorResponse && localError.error instanceof Error) {
localError = localError.error
}
if (localError instanceof HttpErrorResponse) {
let errorDesc = 'Request to ' + localError.url + "\n" + localError.status +
" " + localError.statusText + ": " + localError.error;
switch (localError.status) {
case 403:
finalMessage = "La sessione è scaduta, ripeti il login.";
finalCallback =() => { login.logout(); router.navigate['/login']; };
break;
case 500:
finalMessage = "Errore sul server - " + errorDesc;
break;
default:
finalMessage = errorDesc;
}
} else {
finalMessage = localError.message;
}
this.ngzone.run(() => {
dialog.open(MessageDialog, {
data: {
message: finalMessage,
callback:() => { finalCallback(); this.elaborating = false; }
}
})
})
}
}
super.handleError(error);
}
}
我注入NgZone的处理程序,并用它来显示对话框,和我有诠布尔值,应避免无限递归。