Angularテンプレートで購読されているオブザーバブルの例外を捕捉する方法は？

Question

Angular（4.3.6）アプリケーションでは、私は非同期パイプを使ってテンプレートのオブザーバブルをサスペンドします。

場合によっては、HTTP GETから404を取得すると、例外がAngularでバブリングされ、アプリケーションが応答しなくなります。 私のサービスで.catch()メソッドを使用できますが、コンポーネントに直接.subscribe（）メソッドを持たないことがわかりましたが、どのように例外を処理できますか？

documentService：

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

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

はコンポーネント：

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

テンプレート：

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

はtです私の場合のように使用されたオブザーバブルで例外をキャッチするベストプラクティスはここにありますか？

Answer 1

私はfrom the async source codeを見る限り、エラーが発生したときに何をすべきかをパイプに指示する方法はありません。パイプはただエラーをスローします。だから、あなたは2つの選択肢があるようです：

追加のパラメータを取る独自のパイプを作成することができます。おそらく、エラーが発生したときに実行するコールバック関数です。適切なエラーメッセージを表示したり、必要に応じて再登録したりすることができるように、コールバックはソースから観測可能なエラーをスローさせて渡すことができます。

catchを使用して、返される内容をフォーマットする方法でサービスのエラーを処理して、ビューに適したものにすることができます。

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