Extending the default fetch() method

so I'm working on a feature--lets call this f1--that requires a query made by another feature--lets call this f2--to work as intended. Essentially, I'm trying to intercept the network request that is being made by f2 and breaking that down to get my query. I'm having trouble capturing all of the network request and appreciate if someone can assist me with this. I'm working with React.

const interceptRequest = () => {
    const handleRequest = async (request) => {
      try {
        const response = await fetch(request.url);
        const responseData = await response.text();
        console.log('Response Data:', responseData);
      } catch (error) {
        console.error('Request failed:', error);
      }
    };
  
    // Replace or override the fetch function to intercept requests
    const originalFetch = window.fetch;
  
    window.fetch = function (url, options) {
      const request = { url, options };
      console.log('Request', originalFetch);
  
      // Call your handleRequest function asynchronously
      handleRequest(request);
  
      // Proceed with the original fetch request
      return originalFetch.apply(this, arguments);
    };
  };

It looks like you're creating a circular reference. Your updated fetch() implementation calls handleRequest() which in turn calls fetch() again and so on.

Amend the handleRequest() function to use originalFetch() instead.