Angular 错误处理 - catchError 不返回错误 object 用于 rxjs 效果

Question

I have been working on error handling process for creating a post in a social media website like facebook. When a user tries to create a post, but the backend server returns an error for that process, the user must see the error.

If the backend server returns an error, catchError function must be triggered. After that, a state that is called PostState must be filled by using reducer.

If create post process has a fail, and the backend server returns an error for this process, PostActionTypes.CreatePostFail case must be worked for postReducer.

PostActionTypes.CreatePostSuccess works with or without an error.

I can not handle error process by using Ngrx effect.

How can I handle error process by using Ngrx effects?

export interface PostState {
showPostId: boolean;
currentPost: Post;
currentPostId: number;
posts: Post[];
commentPost: Post;
isNewPost: boolean;
error: string;
isNewComment: boolean; }

const initialState: PostState = {
showPostId: true,
currentPost: null,
currentPostId: null,
posts: [],
commentPost: null,
isNewPost: false,
error: '',
isNewComment: false };

export function postReducer(state = initialState, action: PostActions): PostState {
switch (action.type) {

    case PostActionTypes.CreatePost:
        return {
            ...state,
            isNewPost: true
        };

    case PostActionTypes.CreatePostSuccess:
        return {
            ...state,
            posts: [...state.posts, action.payload].sort((a, b) => <any>new Date(b.createdDate) - <any>new Date(a.createdDate)),
            error: '',
            isNewPost: false
        };

    case PostActionTypes.CreatePostFail:
        return {
            ...state,
            error: action.payload,
            isNewPost: false
        };

    default:
        return state;
}

}

Here is my createPost service implementations.

createPost(post: any): Observable<Post> {
const headers = new HttpHeaders
  ({
    "Authorization": "Bearer " + this.authService.getToken
  });
return this.http.post(this.postUrl + "createpost", post, { headers: headers })
  .pipe(
    tap((data: any) => { console.log(data) }),
    catchError(this.handleError)
  ); }

Here is handleError function implementations.

private handleError(err: any) {
let errorMessage: string;
if (err.error instanceof ErrorEvent) {
  errorMessage = `An error occurred: ${err.error.message}`;
} else {
  errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
}
console.error(err);
return throwError(errorMessage); }

You can see createPost$ effect implementations below.

   @Effect()
createPost$: Observable<Action> = this.actions$.pipe(
    ofType(postActions.PostActionTypes.CreatePost),
    map(((action: postActions.CreatePost) => action.payload)),
    mergeMap((post: any) =>
        this.postService.createPost(post).pipe(
            map((newPost: any) => (new postActions.CreatePostSuccess(newPost.result))),
            catchError(err => of(new postActions.CreatePostFail(err)))
        )
    )
);

Here is an example of a backend server error

If you would like to examine the project, you can see the Github repo in the below.

https://github.com/dogaanismail/DevPlatform/tree/master/DevPlatform.Api/DevPlatformSpa

Answer 1

I've seen a similar approach to catching errors in a different post and it had the same problem, that the catchError action was not returned. I believe this article sums it up nicely Handling Errors in NgRx Effects .

TLDR: Try it with switchMap and catch error outside of the createPost stream

@Effect
createPost$: Observable<Action> = this.actions$.pipe(
  ofType(postActions.PostActionTypes.CreatePost),
  map((action: postActions.CreatePost) => action.payload),
  switchMap((post: any) =>
    this.postService.createPost(post).pipe(
      map((newPost: any) => new postActions.CreatePostSuccess(newPost.result)),
    ),
    catchError(err => (new postActions.CreatePostFail(err)))
  )
);