I'm developing a universal error handling system to display a Bootstrap modal dialog with error details. This is my current configuration:
https://i.sstatic.net/LSBeu.png
The error modal component contains an open() method, and its template includes a button (for debugging) that triggers the open() function successfully. The modal displays correctly with the assigned text.
ErrorModalComponent code:
import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { GlobalErrorHandler } from './global-error-handler.service';
@Component({
selector: 'app-error-modal',
templateUrl: './error-modal.component.html',
styles: []
})
export class ErrorModalComponent {
private _message: string;
@ViewChild('content') _modalTemplate: TemplateRef<any>;
constructor(private _modalService: NgbModal, private _globalErrorHandler: GlobalErrorHandler) {
this._globalErrorHandler.errorEventSource$.subscribe(errorMessage => {
this._message = errorMessage.toString();
this.open();
});
}
open() {
this._modalService.open(this._modalTemplate);
this._message = "A change test";
}
public get message(): string {
return this._message;
}
}
ErrorModalComponent html:
<button class="btn btn-info" (click)="open()">Show Modal</button>
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">It's not you, it's me: unhandled error</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>We are sorry but something has slipped by and we have an uncontrolled error.</p>
<p>A notification has been sent to us and we will process it soon.</p>
<p>{{message}}</p>
</div>
<div class="modal-footer">
<div class="col-4">
<button type="button" class="btn btn-danger btn-block" (click)="c('Close click')" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</ng-template>
GlobalErrorHandler code:
import { ErrorHandler, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
private errorEventSource = new Subject<string>();
errorEventSource$ = this.errorEventSource.asObservable();
handleError(error: any) {
this.errorEventSource.next(error);
}
}
When I intentionally create an exception in the code, the event is triggered, the open method is called, but the modal does not display correctly and the connected text is missing. It shows up at the bottom of the page as disabled, making it impossible to interact with anything.
I am puzzled by this inconsistency when calling the same method from different locations. Any suggestions?
This is how the modal appears after clicking the button:
https://i.sstatic.net/dnMhp.png
And this is the appearance of the modal after triggering an exception: