Error Handler Angular 6 HttpClient – catchError + retry – with Node.js/Express example

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

Related posts:
Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4

Technologies

  • Angular 6
  • RxJS 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0
  • Nodejs – v8.11.3

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-error-handling-catch-error + error

– 404 error -> console’s logs:

angular-6-error-handling-catch-error + error-404

– 500 error -> console’s logs:

angular-6-error-handling-catch-error + 500-error

-> 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-error-handling-catch-error + retry-404-error

Practice

We re-use the source-codes of Angular 6 HttpClient – Node.js/Express RestAPIs 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-error-handling-catch-error + project-structure

– Node.js project:

angular-6-error-handling-catch-error + nodejs-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 Node.js server with cmd -> npm start
Run Angular Client with cmd -> ng serve

-> results:

angular-6-error-handling-catch-error + normal-request

Stop Node.js server. Then make the request again ->

angular-6-error-handling-catch-error + get-all-customers

404 Error

In Node.js project, modify the file customer.routes.js, command out a router:
// router.get('/api/customers', customers.findAll);

Restart Node.js server -> 404 error:

angular-6-error-handling-catch-error + get-all-customer-404-error

500 Error

Now remove above command for the router:
router.get('/api/customers', customers.findAll);.

And change findAll funtion in file ./app/controllers/customer.controller.js as below:

Restart Node.js server -> 500 error:

angular-6-error-handling-catch-error + 500-ui-error

SourceCode

Angular-6-Http-Client
Node.js-RestAPIs

By grokonez | July 19, 2018.



Related Posts


1 thought on “Error Handler Angular 6 HttpClient – catchError + retry – with Node.js/Express example”

Got Something To Say:

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

*