NgRx effect does not trigger fail condition

Question

I am trying to simulate a fail case with my effect, but for some reason, it does not catch an error and fire AuthActions.signInError.

facebookSignIn$ = createEffect(() =>
  this.actions$.pipe(
    ofType(AuthActions.facebookSignIn),
    switchMap(() =>
      from(this.authService.facebookSignIn()).pipe(
        map(() => AuthActions.signInSuccess()),
        catchError((err) =>
          of(
            AuthActions.signInError({
              errorMessage: err.message,
              errorCode: err.code,
            })
          )
        )
      )
    )
  )
);

Here is the service:

facebookSignIn(course: ICourse = null): Promise<void> {
  const provider = new firebase.auth.FacebookAuthProvider();
  return this.afAuth
    .signInWithPopup(provider)
    .then(async (result) => {
      if (result) {
        const doc = await this.firebaseService.docExists(`/users/${result.user.uid}/`);
        if (!doc) {
          const user: IUser = {
            uid: result.user.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL,
          };
          await this.userService.processNewUser(
            user,
            result.additionalUserInfo.profile['first_name'],
            result.additionalUserInfo.profile['last_name']
          );
        }
        if (course) {
          this.builderSignIn(course, result.user.uid);
        }
      }
    })
    .catch((error) => {
      this.toastrService.warning('Something has gone wrong. Please try again.', 'Oops!');
      this.logger.debug('An error occurred during Facebook Sign In');
      this.logger.error(error.message);
    });
}

Here is are the logs from the call:

Answer 1

In the promise catch you may need to re-throw the error for it to be caught in the observable stream:

.then(....)
.catch((error) => {
  ....
  this.logger.error(error.message);
  throw error; // or throw new Error(error.message)
});