angular2-notifications: Notifications with custom Angular 2 exception handler

Hi, just looking for information/help.

I’m trying to use the notification service along with a custom exception handler class that extends Angular 2’s ExceptionHandler.

@Injectable()
export class MyExceptionHandler extends ExceptionHandler {

    constructor(private logger : LoggerService, private notificationService : NotificationsService) {
        super(logger);
    }

    call(error, stackTrace = null, reason = null) {
        this.logger.error(error, "Logging the error");
        this.notificationService.error("Notify other components", ExceptionHandler.exceptionToString(error));
    }

}

MyExceptionHandler is provided on bootstrap so I provide the NotificationsService there also.

bootstrap(AppComponent, [
    // Other items...
    LoggerService, // Another custom class
    NotificationsService,
    {provide: ExceptionHandler, useClass: MyExceptionHandler}
]);

However, no notifications are shown when I try to raise an exception in AppComponent. My LoggerService (another custom class) is able to log the exception.

import { Component } from '@angular/core';
import { LoggerService }from './shared/services/logger/logger.service';
import {NotificationsService, SimpleNotificationsComponent} from "angular2-notifications";

@Component({
  selector: 'my-app',
  directives: [SimpleNotificationsComponent],
  template: `
              <h1>My First Angular 2 App</h1> 
              <button (click)="TestError()">Test Error</button>
              <simple-notifications></simple-notifications>
            `
})
export class AppComponent { 
  constructor(private logger : LoggerService, private notificationService : NotificationsService) {
  }
  TestError() {
    throw new Error("Test Error");
  }
}

Just to confirm everything is setup correctly, I can get notifications to show if I replace the line in TestError() with this:

this.notificationService.error("Error Title", "Error Content");

Am I missing something here or approaching this incorrectly?

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 1
Comments: 16 (4 by maintainers)

Most upvoted comments

Maybe not the best solution, but I was able to get it working by just wrapping the call in a setTimeout.

handleError(error: any) {
   let unwrappedError = error.originalError || error;
   setTimeout(() => {
      this.notificationsService.error('Error', unwrappedError.message);
   },1);
}

derekmt12 on Oct 17, 2016

Can confirm NgZone solution works with angular 5.2.9

handleError(error: any): void {
	this.zone.run(() => this.pageBundle.toast.error("Error", error.message || error));
	super.handleError(error);
}

Sky4CE on Jul 2, 2018

I’m using a different notification lib but I was facing the same problem. This solution worked for me:

handleError(error: any) {
    const appRef = this.injector.get(ApplicationRef)
    // <--- show notification here
    appRef.tick()
}

britvik on Jan 31, 2018

For me worked only this (run your notification in zone.run()):

handleError(error) { const dialog = this._injector.get(MatDialog); const zone: NgZone = this._injector.get(NgZone); zone.run(() => dialog.open(ModalInformationComponent).componentInstance.message = error.error); }

closirr on Jul 2, 2018

Alright, Plunker link: https://plnkr.co/edit/2jOVWxFZlHN36OcEaEV9

randyangeles on Jul 31, 2016