Global HTTP error catching in Angular 4.3+

Whenever you do an HTTP request, there are things that could go wrong. If things go wrong the request will return a response with an error code. Based on this error code you for example want to inform the user what went wrong. now, would it be handy if you can put this logic in one place and reuse it everywhere? Read on! Photo by on Duffy Brook Unsplash You can only deal with errors if you attach a to your request. This can possibly look like this: http catch When your application grows, the amount of HTTP requests increases as well. Attaching a to every request is not exactly DRY. As of 4.3, where a new HttpModule is introduced, we can finally use the traditional interceptor again. catch Angular Using an http Interceptor When using an http interceptor the basic idea is that all the requests that are made within your module are routed trough this interceptor. This means you can automatically add or remove properties to each request. This can be handy when you’re talking to a protected API and need to send an api-key with each request. Since every request you’re making goes trough this interceptor, we can also use this interceptor to catch all requests that return as an instance of . This is how you do that: HttpErrorResponse We send the request to the and then execute the request. In the callback function we check for errors. If the error is an instance of we can send the request to an error handler that displays a nice little message with what went wrong. HttpHandler HttpErrorResponse In the stackblitz below, you can see a fully working example. What this does not catch As mentioned several times before this way of intercepting will only catch http response with an instance of . This means that if you for example create a on your request to format your response and make an error in there, this will not catch it. HttpErrorResponse map Conclusion Using this interceptor setup is especially useful when you’re application relies a lot on interaction with an external rest API. If the API is properly setup it will return a nice error message when a request was incorrect. This message can now easily be displayed and showed to the user. If you do a lot of client-side formatting on your Http requests you should still create logic for handling potential errors there. Looking for a job in Amsterdam? I work for as a Senior front-end developer and we are looking for medior/senior developers that specialise in Angular, React, Java or Scala. Sytac is a very ambitious consultancy company in the Netherlands that works for a lot of renowned companies in banking, airline, government and retail sectors. You can think of companies like ING, KLM, Deloitte, Ahold Delhaize, ABN AMRO, Flora holland and many more. Sytac From a personal opinion Sytac really sets itself apart with their client portfolio, but also with how they take care of their employees. They do really care about the wellbeing of their employees. Apart from a good salary (50K-75k), you will notice this in regular meetings with the consultant managers but also by the amount of events they organise and all the other perks they offer to keep all employees happy. If you think you have what it takes to work with the best, send me an email on and i’m happy to tell you more. luuk.gruijs@sytac.io