javascript - Notificar sobre error de inicialización de la aplicación Angular 2

Una excepción no capturada (inyector o simplemente error aleatorio) en cualquier componente durante el arranque puede conducir a un fallo en el arranque.

Debido a la incompatibilidad del navegador, la aplicación puede no iniciar el proceso de arranque en absoluto.

Estoy buscando una manera de notificar a un usuario (con alerta, modal, etc.) sobre un error crítico que ocurrió durante la inicialización de una aplicación Angular 2, para que el usuario pueda estar seguro de que la aplicación no solo se carga para siempre, sino que falló por alguna razón.

¿Cuál es la buena receta para manejar este caso en Angular 2?

Respuesta #1

PlatformRef.bootstrapModule devuelve una promesa donde podemos usar .catch para capturar el error, mientras que bootstrap (inicializando) la aplicación.

platformBrowserDynamic().bootstrapModule(<AppName>)
    .catch(err => console.error(err));

Hubo un error, que acaba de ser resuelto (registro de cambios). Gracias a @estus por señalarlo.

Respuesta #2

Era posible solucionar esto con un patrón diferido modificado. Sin embargo, la solución se basa en la suposición de que el arranque es sincrónico y ocurre dentro de un ciclo, lo cual puede ser incorrecto.

Todavía no estoy seguro de si hay mejores enfoques.

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);