Error Handler Angular 6 HttpClient – catchError + retry – with SpringBoot RestAPIs example

In the tutorial, we show how to handle error from Angular HttpClient with catchError & retry when request fails on the SpringBoot server, or in case of a poor network connection.

Related posts:
Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4

Technologies

  • Angular 6
  • RxJS 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0
  • SpringBoot

Error Handling

Error Object

Simple Angular HttpClient to request as below:

What happens if the request fails on the server, or if a poor network connection?

– Server is die -> console’s logs:

angular-6-retry-error-spring-boot-restapi---unknown-error-console-logs

– 404 error -> console’s logs:

angular-6-retry-error-spring-boot-restapi---404-error-console-logs

– 500 error -> console’s logs:

angular-6-retry-error-spring-boot-restapi---500-error-console-logs

-> HttpClient will return an error object.
We can handle it from Component code with .subcribe:

Error Details

Angular HttpClient provides HttpErrorResponse to capture error responses. We can use HttpErrorResponse to build detail user-friendly responses:

-> Now we pipe returned Observables with the error handler:

Retry

The RxJS library offers retry operator to automatically re-subscribes to a failed Observable with a specified number of times.

angular-6-retry-error-spring-boot-restapi---retry-error

Practice

We re-use the source-codes of Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4 tutorial.

How to handle error?
-> In Angular project, we need build a HttpErrorHandler service and ErrorComponent to notify on UI.

– Angular Project as below:

angular-6-retry-error-spring-boot-restapi---angular-project

– SpringBoot project:

angular-6-retry-error-spring-boot-restapi---spring-boot-project-structure

Implement Now ->

Generate HttpErrorHandler, Error service, Error component by cmd:

HttpErrorHandler Service

Implement the service ./src/app/http-error-handler.service.ts:

Add HttpErrorHandler service to providers of AppModule module:

Update Customer Service

./app/customer.service.ts ->

Error Service

./src/app/error.service.ts ->

Error Handler Component

./app/error/error.component.ts ->

./app/error/error.component.html ->

Run & Check Results
Server Die

Start SpringBoot server.
Run Angular Client with cmd -> ng serve

-> results:

angular-6-retry-error-spring-boot-restapi---normal-results

Stop SpringBoot server. Then make the request again ->

angular-6-retry-error-spring-boot-restapi---unknow-error-code

404 Error

In SpringBoot project, modify method getAll in file RestAPIs.java:

Restart SpringBoot server -> 404 error:

angular-6-retry-error-spring-boot-restapi---404-error-code

500 Error

In SpringBoot project, modify method getAll in file RestAPIs.java:

Restart SpringBoot server -> 500 error:

angular-6-retry-error-spring-boot-restapi---500-error-code

SourceCode

Angular-6-Http-Client-Handler-Retry
SpringBootRestAPIs

By grokonez | January 15, 2019.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*