Angular 4 Error handling

Angular 4 Error Handling - Logging, Retry Request and HttpCache!

What Happens If the Request fails on the Server Due to Poor Network Connection?
HttpClient will return an error instead of a successful response.

Example - Add an error handler to handle the errors
http.get('/api/users')
  .subscribe(data => {console.log(data);}, //Successful responses call the first callback.
      err => {console.log('Got error!'); //Errors - Something went wrong!
});

How To Get and Log an error in Angular 4?
Two types of errors -
1.     If the backend returns an unsuccessful response like - 404, 500 and so on
2.     If something goes wrong in the client side like -network error etc.

In the both cases - We are using HttpErrorResponse and return the useful information on what went wrong in this call!

Example –
http.get('/api/users')
  .subscribe(data => {console.log(data);}, //Successful responses call the first callback.
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
           console.log('Error - ', err.error.message);
        }else {
            console.log('Error status - ${err.status}, and Error Detail - ${err.error}');
        }
      }
});

How To handle and retry the failed request due to Poor Network Connection in Angular 4?

In Angular 4, simply retry the request using RxJS operator called .retry (). It is automatically presubscribed to an Observable, thus reissuing the request when an error occurred!

Import RxJS for using retry () method-
import 'rxjs/add/operator/retry';

HTTP Observables for retry the failed request 
http.get('/api/users')
  .retry(2) //Retry this request up to 2 times.
  .subscribe(data => {console.log(data);}, //Successful responses call the first callback.
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
           console.log('Error - ', err.error.message);
        }else {
            console.log('Error status - ${err.status}, and Error Detail - ${err.error}');
        }
      }
});

How to implement HttpCache in Angular 4?

We can use Http interceptors to implement caching.

@Injectable()
export class CachingInterceptor implements HttpInterceptor {
  constructor(private cache: HttpCache) {}
 
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Cache all GET requests and Skip other requist like POST, PUT etc.
    if (req.method !== 'GET') {
       return next.handle(req);
    }
 
    // Cached Response for all exists GET requests.
    const cachedResponse = this.cache.get(req);

    //If cached response is exists.
    if (cachedResponse) {
       return Observable.of(cachedResponse);
    }else{
       //If cached response is not exists.
       return next.handle(req).do(event => {
          if (event instanceof HttpResponse) {
         this.cache.put(req, event);// Update the cache.
          }
      });
    }
  }
}

References -

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book