javascript - Notify on Angular 2 app initialization error - Stack Overflow

admin管理员组

文章数量:1277336

An uncaught exception (injector or just random error) in any ponent during bootstrap may lead to bootstrap failure.

Due to browser inpatibility 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?

An uncaught exception (injector or just random error) in any ponent during bootstrap may lead to bootstrap failure.

Due to browser inpatibility 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?

• javascript
• angular
• typescript

Share Improve this question Follow edited Nov 3, 2016 at 0:47 Estus Flask asked Nov 2, 2016 at 21:51 Estus FlaskEstus Flask 223k7878 gold badges471471 silver badges608608 bronze badges 3

• 1 How about platformBrowserDynamic().bootstrapModule(<AppName>).catch(err => console.error(err)); – Bhavik Commented Nov 5, 2016 at 6:38
• 1 @Bhavik That would be a good place to catch it. But it can't catch Can't resolve all parameters for ... injector errors (the promise is pending), and who knows what else. – Estus Flask Commented Nov 5, 2016 at 12:36
• 1 @Bhavik There was a bug that prevented bootstrapModule promise from catching all errors. It has been fixed in master, and for previous versions Promise.resolve().then(() => platformBrowserDynamic().bootstrapModule(...)).catch(...)) solves the problem. Feel free to post this as an answer. – Estus Flask Commented Nov 11, 2016 at 17:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +150

PlatformRef.bootstrapModule return's a promise where we can .catch the error, while bootstrap(initializing) the app.

platformBrowserDynamic().bootstrapModule(<AppName>)
    .catch(er‌​r => 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);

本文标签： javascriptNotify on Angular 2 app initialization errorStack Overflow