Angular全局错误处理服务中angular-notifier通知需点击窗口才显示问题

问题描述 #

实现了GlobalErrorHandlerService全局错误处理服务，错误日志能正常输出到控制台，但添加angular-notifier后，通知必须点击当前窗口才会显示（多个通知需逐个点击触发）。常规组件中测试angular-notifier完全正常，但在该全局错误服务里无法正常工作，哪怕去掉forEach循环问题依旧。

相关代码 #

import {ErrorHandler, Injectable} from '@angular/core';
import {HttpErrorResponse} from "@angular/common/http";
import {NotifierService} from "angular-notifier";
import {ResponseFromServer} from "../entity/ResponseFromServer";

@Injectable({
 providedIn: 'root'
})
export class GlobalErrorHandlerService implements ErrorHandler{

 errorOnClientSide:Error|undefined
 private readonly notifier: NotifierService
 responseFromServer:ResponseFromServer|undefined

 constructor( notifierService:NotifierService) {
   this.notifier = notifierService;
   }

 handleError(error: any): void {
   if (error instanceof HttpErrorResponse){

     this.responseFromServer=error.error
     if (error.ok){
       this.notifier.notify('success',"Success!")
       console.log("success")
       console.log(this.responseFromServer)
     } else {
       console.log("error from server")
       this.responseFromServer?.errors?.forEach(err=> this.notifier.notify('error',err.toString()))
       console.log("GONE!")
     }
   } else {
     if (error instanceof Error) {
       this.errorOnClientSide=error
       this.notifier.notify('error',this.errorOnClientSide.message)
       console.error("Error on client-side "+error)
      } else {
       console.error("Unknown error:"+error)
     }
   }
 }
}

解决方案 #

原因分析 #

Angular的ErrorHandler捕获的错误可能来自Angular变更检测周期之外的上下文（比如某些异步回调、第三方库触发的错误），此时angular-notifier的DOM更新不会自动触发Angular的变更检测，导致通知直到用户触发交互（点击窗口）才会被渲染。

修复方案（二选一） #

方案1：用NgZone包裹通知逻辑

将notifier.notify调用包裹在NgZone.run()中，确保代码在Angular的执行上下文内运行，自动触发变更检测：

import {ErrorHandler, Injectable, NgZone} from '@angular/core';
import {HttpErrorResponse} from "@angular/common/http";
import {NotifierService} from "angular-notifier";
import {ResponseFromServer} from "../entity/ResponseFromServer";

@Injectable({
 providedIn: 'root'
})
export class GlobalErrorHandlerService implements ErrorHandler{

 errorOnClientSide:Error|undefined
 private readonly notifier: NotifierService
 responseFromServer:ResponseFromServer|undefined

 constructor( 
   notifierService: NotifierService,
   private ngZone: NgZone // 注入NgZone
 ) {
   this.notifier = notifierService;
   }

 handleError(error: any): void {
   if (error instanceof HttpErrorResponse){
     this.responseFromServer=error.error
     if (error.ok){
       // 用NgZone.run包裹通知调用
       this.ngZone.run(() => {
         this.notifier.notify('success',"Success!")
       });
       console.log("success")
       console.log(this.responseFromServer)
     } else {
       console.log("error from server")
       this.responseFromServer?.errors?.forEach(err=> {
         // 用NgZone.run包裹每个通知调用
         this.ngZone.run(() => {
           this.notifier.notify('error',err.toString())
         });
       });
       console.log("GONE!")
     }
   } else {
     if (error instanceof Error) {
       this.errorOnClientSide=error
       // 用NgZone.run包裹通知调用
       this.ngZone.run(() => {
         this.notifier.notify('error',this.errorOnClientSide.message)
       });
       console.error("Error on client-side "+error)
      } else {
       console.error("Unknown error:"+error)
     }
   }
 }
}

方案2：手动触发变更检测

注入ChangeDetectorRef，在调用notifier.notify后手动调用detectChanges()触发变更检测：

import {ErrorHandler, Injectable, ChangeDetectorRef} from '@angular/core';
import {HttpErrorResponse} from "@angular/common/http";
import {NotifierService} from "angular-notifier";
import {ResponseFromServer} from "../entity/ResponseFromServer";

@Injectable({
 providedIn: 'root'
})
export class GlobalErrorHandlerService implements ErrorHandler{

 errorOnClientSide:Error|undefined
 private readonly notifier: NotifierService
 responseFromServer:ResponseFromServer|undefined

 constructor( 
   notifierService: NotifierService,
   private cdr: ChangeDetectorRef // 注入ChangeDetectorRef
 ) {
   this.notifier = notifierService;
   }

 handleError(error: any): void {
   if (error instanceof HttpErrorResponse){
     this.responseFromServer=error.error
     if (error.ok){
       this.notifier.notify('success',"Success!")
       this.cdr.detectChanges(); // 手动触发变更检测
       console.log("success")
       console.log(this.responseFromServer)
     } else {
       console.log("error from server")
       this.responseFromServer?.errors?.forEach(err=> {
         this.notifier.notify('error',err.toString())
         this.cdr.detectChanges(); // 手动触发变更检测
       });
       console.log("GONE!")
     }
   } else {
     if (error instanceof Error) {
       this.errorOnClientSide=error
       this.notifier.notify('error',this.errorOnClientSide.message)
       this.cdr.detectChanges(); // 手动触发变更检测
       console.error("Error on client-side "+error)
      } else {
       console.error("Unknown error:"+error)
     }
   }
 }
}

说明 #

两种方案都能确保angular-notifier的DOM更新被Angular及时检测到，让通知立即显示，无需用户点击窗口触发。通常推荐使用NgZone方案，因为它更贴合Angular的执行上下文机制。

内容的提问来源于stack exchange，提问作者RobertcodeR