Debugging Network Requests: Client-Side Caching Issues

TL;DR

• Frontend network requests were not reaching the backend as expected.
• Determined issue was due to client-side caching or deduplication logic.
• Verified by inserting console logs at multiple code execution points.
• Bypassed intermediate logic to directly use Axios, helping identify the problem.
• Altered deduplication key construction to include the URL, addressing caching problem.

Debugging Steps

Today I tackled a curious issue where network requests from the frontend seemed to be cached or not reaching the backend as anticipated. Here’s a breakdown of the steps I took:

1. Initial Verification:

   • Confirmed that the client made requests to the backend endpoint by logging outputs at various function calls on the frontend.

2. Testing Backend Reception:

   • Added simple middleware at the server entry point to log each request’s URL. Despite the client’s actions, these logs did not reflect the expected endpoint calls.

3. Direct Axios Calls:

   • Suspected that client-side caching was at fault. Bypassed intermediate logic by using the Axios instance directly to ensure requests executed properly.

4. Investigating Deduplication:

   • The network call utility deduplicated requests based on a generated key, which didn’t adequately include the URL. This could return cached responses.

5. Solution Implementation:

   • Adjusted key generation for deduplication by incorporating the request URL, ensuring that unique calls were treated distinctly, effectively addressing the issue.

These steps helped pinpoint and resolve a tricky client-side caching problem disrupting backend communication.