Exception Handling with Angular (6.0.7)

Our target : globally catch errors.

The angular way to catch error globally is to implement a custom ErrorHandler.

Basically, I would like to act differently when we have server or client errors.

When the server notifies an error, Angular throws an HttpErrorResponse. For client-side error we will have an Error instance instead.

When the user is not authorized (401), he may be redirected to the login page.
When the user is not allowed to see a resource (403), he may be redirected to the forbidden page.

1. The errors service



Basically, this service takes all errors information and send them to an endpoint (e.g. Help Desk).


2. The errors handler



The router navigation should only be triggered inside Angular zone.

3. The core routing module



Please take a look at my demo.

Don't hesitate to share and comment...

Comments

Post a Comment

Popular posts from this blog

Spring JPA : Using Specification with Projection

You may probably know that using Specification with Projection is not possible at this moment. I'll show you how you can easily bypass this problem using the JPA Criteria. 1. Create an extended repository We begin by creating an extending global repository as follow : You can find more information here . 2. Add our custom method In order to limit the fields returned for each item, the consumer of my API must provide the required fields this way: /orders?fields=productId,name,quantity . ( Best Practices ) Basically, I'm defining the SELECT clause with the returned fields (cf. getSelections() ): 😎Happy coding...
Read more

Chip input using Reactive Form

The Chips component documentation from the angular material website, describes how to use the MatChipInput directive with a chip-list for adding or removing chips. I'll show you how you can implement the same component using Reactive Form. The HTML template: The TS component file:   As you can see, we use the FormBuilder class to simplify the form creation. We define our requirements as a  FormArray within our FormGroup. The requirements will be accessed in our template with this expression inside the *ngFor of <mat-chip></mat-chip> : *ngFor="let requirement of form.get('requirements').controls; let i = index;" In the ChipComponent class, the requirements array is accessed by using this expression: this.form.get('requirements') as FormArray; Thanks
Read more