web-dev-qa-db-fra.com

Angular 2/4 gestion globale des erreurs

Je dois implémenter la gestion globale des erreurs dans angular 4 app. C'est un mécanisme ErrorHandler, qui fonctionne dans certains cas, mais pas pour tous . Ex: quand nous avons une erreur critique, comme un modèle manquant ou quelque chose, ErrorHandler l'ignorer. Lorsque j'utilise une URL incorrecte pour le modèle, l'erreur Erreur Zone.js est affichée:

zone.js?fad3:567 Unhandled Promise rejection: Template parse errors:
'my-app' is not a known element:

Zone.js ne lève pas d'exception, c'est juste une erreur de console, donc window.onerror ne fonctionne pas aussi.

Gestionnaire d'erreur:

@Injectable()
export class CommonErrorHandler implements ErrorHandler {
    constructor(private injector: Injector) {

    }


    public handleError(error: any): void {
        console.log("error", error);
    }
}

Inscription dans app.module:

 providers: [
        AuthGuard,
        { provide: ErrorHandler, useClass: CommonErrorHandler }
}

UPD plnkr exemple ajouté:

Exemple

javascriptangularzone
8
John Doe

Angular utilise zone.js pour analyser les exceptions non gérées et les rejets: https://github.com/angular/zone.js/blob/master/dist/zone.js#L633

Vous devez utiliser le service NgZone pour analyser ces erreurs: https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html

L'API de NgZone est qualifiée d '"expérimentale" mais je ne sais pas en quoi elle se rapporte à la réalité. Un tas d'API largement utilisées sont encore "expérimentales".

Exemple:

import { NgZone } from '@angular/core';

@Component(...)
class AppComponent {
  constructor(protected zone: NgZone) {

    this.zone.onError.subscribe((e) => {
      console.log(e);
    });

    setTimeout(() => {
      throw new Error();
    }, 1000);

    setTimeout(() => {
      Promise.reject('unhandled');
    }, 1000);
  }
}

De cette façon, vous pouvez voir les deux erreurs.

@EDIT: J'ai trouvé ceci https://angular-2-training-book.rangle.io/handout/zones/ très utile.

9
rzelek

La solution acceptée ne fonctionnait pas pour moi car mon erreur est survenue lors de l'initialisation (par exemple, un composant non déclaré dans le module) et, comme j'ai une animation de chargement, je voulais l'arrêter.

Au lieu de cela, j'ai encapsulé avec un try attraper le code bootstrapModule dans try/catch

  try {
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch(err => {
        // Handle runtime error in angular
      });
  } catch (err) {
    // handle angular loading error here. I do that by hidding the animation div and showing the error div

    var node = document.getElementById('app-loading-error');
    if (node) {
      node.style.display = 'inherit';
    }

    var node = document.getElementById('app-loading-pending');
    if (node) {
      node.style.display = 'none';
    }

    throw err; // pass it back to the console
  }
0
Jeremy