rxjs6 : apiでエラーが起きた場合にcatchErrorでキャッチできない

Question

redux-observableを使用しています。apiでデータの取得に失敗した場合にエラーハンドリングを行いたいのですが、上手くいきません。

const commentsFetchingEpic: Epic<IPayloadAction> = (actions$) => actions$.pipe(
  ofType(commentsActions.fetch.started.type),
  mergeMap((action: IPayloadAction) => concat(
    of(commentsActions.loading({ isLoading: true })),
    from(getComments(action.payload.url)).pipe(
      map((comments: IComments[]) => commentsActions.fetch.done({ params: action.payload.url, result: { comments } })),
      catchError(error => of(commentsActions.fetch.failed({ params: action.payload.url, error: { hasError: true } }))),
    ),
    of(commentsActions.loading({ isLoading: false })),
  )),
);

getCommentsがapi部分で、エラーの際にrejectするようになっています。

import 'whatwg-fetch';

export interface IComments {
  id: string;
  comment: string;
}

const getComments = (url: string) => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((response: any) => response.json())
      .then(comments => resolve(comments))
      .catch((e: any) => reject(e));
  })
}

export default getComments;

ドキュメントのやりかたとしては、これであっているはずなのですが。。。

エラーの場合でもcatchErrorは実行されず、mapが実行されてresult: {comments}のcommentsに"Not found"が入ってしまいます。api部分を、async await使ってerrorをcatchした場合にthrow new Error(e)なども試してみましたが、どれもうまくいかず。。

どなたか原因を推察できるかた、お助けお願いします。

Answer 1

公式ドキュメントに細々と解答があった。

ajaxを使うことで解決。

  ajax.getJSON(action.payload.url).pipe(
      map((comments: IComments[]) => commentsActions.fetch.done({ params: action.payload.url, result: { comments } })),
      catchError(_ => of(commentsActions.fetch.failed({ params: action.payload.url, error: { hasError: true } }))),
    ),