I have and effect that sends a request to an API Endpoint. If an error occurs, the server responses with an error message.
I want to be able to re-throw that error to upper layer to handle it there. I have tried try and catch but that seems to be not working as I would expect. Any ideas?
Store effect:
createUser$ = createEffect(() =>
this.actions$.pipe(
ofType(UserActions.createUser),
mergeMap((user) =>
this.http.post<User>('/api/users', user).pipe(
map((newUser) => {
return UserActions.createUserSuccess(newUser)
}),
catchError((err: HttpErrorResponse) => {
UserActions.createUserFailure(err)
// Here I am re-throwing the error
return throwError(() => err.error)
}),
),
),
),
)
Facade:
addUser(user: User) {
this.store.dispatch(UserActions.createUser(user))
}
Usage in component:
try {
this.userFacade.addUser(user)
} catch (error) {
// Here I want to catch the error and display it
this.messageService.showError(error.message)
}
UI is driven via store, so you need to create an action
createUserFail
pass error payload message to state and then use selector to map the error message on the Frontend.
Make a slight modification to your effect as mentioned below.
createUser$ = createEffect(() =>
this.actions$.pipe(
ofType(UserActions.createUser),
mergeMap((user) =>
this.http.post<User>('/api/users', user).pipe(
map((newUser) => {
return UserActions.createUserSuccess(newUser)
}),
catchError((err: HttpErrorResponse) => {
// Here I am re-throwing the error
return throwError(() => err.error)
}),
),
),
catchError(err => {
return UserActions.createUserFailure({ payload: err.message })
})
),
)