An uncaught exception (injector or just random error) in any component during bootstrap may lead to bootstrap failure.
Due to browser incompatibility the app may not start bootstrap process at all.
I'm looking for a way to notify a user (with alert, modal, etc) on critical error that happened during Angular 2 app initialization, so a user could be sure that the app not just loads forever but failed for some reason.
What's the good recipe to handle this case in Angular 2?
PlatformRef.bootstrapModule
return's a promise where we can .catch
the error, while bootstrap
(initializing) the app.
platformBrowserDynamic().bootstrapModule(<AppName>)
.catch(err => console.error(err));
There was a bug, which was just resolved(changelog). Thanks to @estus, for pointing it out.
It was possible to fix this with altered deferred pattern. However, the solution is based on the assumption that bootstrapping is synchronous and happens within one tick, which may be wrong.
Still not sure if there are better approaches.
class InitDeferred {
promise: Promise<any>;
private fulfilled: boolean;
constructor() {
this.promise = new Promise((resolve, reject) => {
setTimeout(() => this.fulfilled === true ? resolve() : reject('init error'));
});
}
resolve() {
this.fulfilled = true;
}
reject() {
this.fulfilled = false;
}
}
const initDeferred = new InitDeferred;
export default initDeferred;
@Injectable()
export class InitErrorHandler extends ErrorHandler {
handleError(error: any): void {
initDeferred.reject();
super.handleError(error);
}
}
@Component(...)
export class App extends OnInit {
ngOnInit() {
initDeferred.resolve();
}
}
@NgModule({
...
providers: [{ provide: ErrorHandler, useClass: InitErrorHandler }]
})
export class AppModule {}
initDeferred.promise.catch(alert);
platformBrowserDynamic().bootstrapModule(AppModule);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With