Using network interceptors for error handling in JavaScript

More often than not, people approach error handling in calls using the approach —

While this works well for smaller applications with just a couple of calls, as your application scales, you have multiple network calls & each unexpected response to such call has to be dealt in a specified fashion.

Rewriting the handling code in the catch block introduces unnecessary code redundancy which makes it even more difficult to manage errors as your application scales.

In such a case, using a network interceptor should be the way to go. The fetch-intercept monkey patches the global fetch method and allows you the usage in Browser, Node and Webworker environments. In this demo, I’ll be using fetch-intercept as an example, but similar interceptors are available for axios too.

We start by installing our network interceptor, which can be done by using either

npm install fetch-intercept — save

yarn add fetch-intercept

Next up, we create a file intercept.ts at the root of our application or under the directory where we introduce utilities

Using network interceptors for handling 401 error

In this example, we are handling a 401 error by redirecting the user to a component which then dispatches the logout actions.

Quick sidenote — if you are using Reactjs, introducing react-redux bindings inside the interceptor may not be the best practice. Your store & interceptor should be separate entities.

Now, all we have to do is, load this file at a top level component, say index.ts. Once that’s done, all the network requests throughout the application pass through your network interceptor, hence you have one point of contact to handle every possible error.

You can learn more about fetch-intercept by checking https://github.com/werk85/fetch-intercept

My work straddles around webRTC, noise reduction, and everything to do with audio over the web

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

3 Important Thing About JavaScript Every Developer Should know

3 Important Thing About JavaScript Every Developer Should know

The Anatomy of a Pure CSS Heart

8 Different Ways To Implement Micro-Frontends With Vue.js

https://youtu.be/-JI4qa1XNqM

Getting started with React Native: Building UI

My ELI5 For Basic React Concepts: Lifting State Up

Docker — Three Ways To Create Container Images and Their Use Cases

Business Benefits & Types of Applications to Build with Angular Frontend Framework

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Viral Tagdiwala

Viral Tagdiwala

My work straddles around webRTC, noise reduction, and everything to do with audio over the web

More from Medium

The JavaScript Skills You Need For React

this in javascript

JavaScript syntax for CRUD operations

My channel for javascript developers