Note: Intercepting requests on the web the hard way

Sometimes you may need to be able to watch the networking activities that happen on a WEB page. Particularly, let’s say you need to create a networking activity inspector (pretty much like what Chrome has to offer with its Network tab from DevTools), but with some additional capabilities.

Specifically, we need to be able to start and stop the requests watching routine. This should be done so because when the watcher catches a request it should be able to temporarily stop it, log all the meta data about the request and put it in pending state. Once the request is in the pending state, the user of this tool should be able to release the request and let it flow further. The tool would not be logging information about response bodies, only the meta data about the actual requests will be logged into the UI.

The goal is to be able to watch these three types of requests that usually occur on a web page:

1. fetch() API requests
2. Requests made with XMLHttpRequest objects
3. Form requests (Those are pretty hard to properly intercept & release)

The problem being stated, we can proceed to discuss the implementation of this tool. It will consist of 2 parts:

1. Construct the core inspector library
2. Build the UI around the library which allow us to visually interact with the library. We’ll use React for getting this done.

Andrei Glingeanu's notes and thoughts. You should follow him on Twitter, Instagram or contact via email. The stuff he loves to read can be found here on this site or on goodreads.