Angular error handling - redirect / show notification

Question

Hi, right now I am developing Angular application and implementing the error handling. Based upon the response with error from the backend I want to sometimes show the notification that something went wrong, but sometimes simply redirect the user to another page. The problem is that I can't really distinguish between different errors having only status code from the response. It'll be easier to understand if I describe flow of my application. Let's say that I've got the bakery application and I am working with orders, the flow is as follows

I've got the component which needs some data so I am using the orderFacade.ts (class that's masking more complex logic) and I'm invoking orderFacade.getOrders()
The orderFacade.getOrders function then dispatches the action store.dispatch(OrderActions.getOrders())
Then I've got the effect which makes the request using the orderService just like that

getOrders$ = createEffect(() =>
    this.actions$.pipe(
      ofType(OrderActions.getOrders),
      switchMap(() =>
        this.orderService.getOrders().pipe(
          map(orders => SurveyActions.getOrdersSuccess({orders: orders})),
          catchError((errorMessage: string) => of(SurveyActions.getOrdersFailure({errorMessage})))
        )
      )
    )

The success action sets the data and hides the loader, the failure action sets the orders to empty array and hides the loader. I also have success effect I can subscribe to

getOrdersSuccess$ = createEffect(
    () =>
    this.actions$.pipe(
        ofType(SurveyActions.getOrders),
        map(({
            orders
        }) => orders)
    ), {
        dispatch: false
    }
)

The orderService looks like that

public getOrders(): Observable < Order[] > {
    return this.http.get < Order[] > (this.api.getUrl('api/orders'), this.api.getHeaders())
}

So if everything goes okay, I simply set the state in the store
But if something goes wrong for example the server responds with the 404 status code, which indicates the there is no any orders I want to show the notification to the user which says 'There is no any orders at the moment' and here is my question, how should I handle the errors

I've got the server interceptor which looks like that

intercept(request: HttpRequest < unknown > , next: HttpHandler): Observable < HttpEvent < unknown >> {
    return next.handle(request).pipe(
        retry(2),
        catchError((errorResponse: HttpErrorResponse) => {
            this.injector.get(ErrorHandler).handleError(errorResponse)
            return throwError(errorResponse)
        })
    )
}

then I can handle the errors in the global error handler, but here's the trick, what if sometimes I want to show the notification, sometimes redirect the user to the home page or something else different, but I can't check neither in the interceptor nor in the error handler what I should really do. I need a way to distinguish the errors, but the error from the backend only contains status code (like 404) and message. I thought maybe I could add another property to the error like type which might be equal to notification or redirect, but I think it's not a good solution because I kinda control the frontend behaviour using the backend (what if somebody else will use my api). So my very best solution so far is to create an error class hierarchy, each class contains informations what should be done to handle the error, but how I'd set those classes you might ask. The answer is simple I'd throw the error in the failure actions effects, exactly like in this post https://stackoverflow.com/a/48070207. In the action I know exactly which endpoint's been invoked so I know that if there is no any orders (404 error) for example I show the notification, but if something else goes wrong, for example the user is not authorized (403 error) to get access to that data I want to redirect the user. What do you guys think about this solution, any better ideas? I really do appreciate any answer, thanks a lot in advance.

Angular error handling - redirect / show notification

0 Answers0