Wie fange ich Exceptions für Observables ab, die in Angular template subskribiert wurden?

Question

In einer angularen (4.3.6) Anwendung beobachte ich Observable in der Template mit Async-Pipe.

In einigen Fällen, wenn ich einen 404 von einem HTTP GET bekomme, wird die Ausnahme von Angular durchgebrannt und die Anwendung reagiert nicht mehr. Ich habe gesehen, dass ich die .catch() Methode in meinem Dienst verwenden konnte, aber nicht direkt eine .subscribe() -Methode in meiner Komponente, wie kann ich mit der Ausnahme umgehen?

Document:

public getDocument() { 
    return this.getDocument(serverUrl).catch((err) => this.handleError(err)); 
} 

private handleError(error: Response) { 
    return Observable.throw(error); 
} 

Komponente:

public ngOnInit() { 

    const document$ = this.reference$ 
     .filter((i) => !!i) 
     .combineLatest(this.documentService.getBranch(), 
     (r: any, branch: string) => { 
      return this.documentService.getDocument(r.Id, r.targetId, this.GetHeadBranch(branch)); 
     }).switch(); 
    } 

Vorlage:

<div *ngIf="document$|async; let document;"> 
    .... 
</div> 

Ist t hier eine Best Practice, um eine Ausnahme mit Observablen wie in meinem Fall zu bekommen?

Answer 1

Soweit ich from the async source code sehen kann, gibt es keine Möglichkeit, die Pipe anweisen, was zu tun ist, wenn ein Fehler auftritt. Die Pipe wirft nur den Fehler. Es scheint also, Sie haben zwei Möglichkeiten:

Sie könnten eine eigene Pipe erstellen, die einen zusätzlichen Parameter benötigt. Vielleicht eine Callback-Funktion, die ausgeführt wird, wenn ein Fehler auftritt. Der Rückruf konnte die Quelle Observable zusammen mit dem Fehler übergeben übergeben werden, so dass Sie eine entsprechende Fehlermeldung anzeigen und sogar neu abonnieren können, wenn Sie möchten.

Sie könnten catch verwenden und den Fehler in Ihrem Dienst in einer Weise behandeln, die formatiert, was zurückgegeben wird, so dass es für die Ansicht geeignet ist.

private handleError(error: Response) { 
    // return Observable.throw(error); //will crash the app when fed to async pipe 
    return Observable.of(this.errorDocument); //something the async pipe can display 
} 

See my example