Catch timeout error when using ngrx in Angular

Question

I would like to handle Timeout error when effect make an Http Request.

Here's my effect

loadSchedulings$ = createEffect(() =>
  this.actions$.pipe(
    ofType(ESchedulesActions.GetSchedulesByDate),
    mergeMap(() =>
      this.apiCallsService.getSchedulings().pipe(
        map(trips => ({ type: ESchedulesActions.GetSchedulesByDateSuccess, payload: trips })),
        catchError(err => {
          console.log(err);
          return EMPTY;
        })
      )
    )
  )
);

Here's my getSchedulingService

getSchedulings() {
  return this.http.get<ISchedules>(this.urlData).pipe(
    map(data => {
      ...
      return groupByDate;
    }),
    timeout(2500),
    catchError(error => of(`Request timed out`))
  );
}

Actually no error is catched by catchError inside my effect , however I send error inside my service function.

How to do that using rxjs operators ?

Answer 1

The way I see this is that you are going to catch the error in your getSchedulings() call and you never propagate this error, instead you return a new observable of it. try replacing the of with a throwError:

    catchError(error => throwError(`Request timed out`))

which will then in turn be handled by your effect