CDN caching issue involving Cloudfront and Cloudflare

Recently, some Neeto customers reported experiencing a very long page load time. For some of them, the page didn't even load. We found that the issue is related to CDN caching.

Neeto uses React.js for the front-end code, and the asset files are hosted at CloudFront. To complicate matters, we use CloudFlare as our DNS resolver. Between CloudFlare and Cloudfront, we were not sure what was being cached and at what level. Since this problem was being faced only by our customers it was a bit difficult to reproduce and debug.

The whole setup is like this:

• Browsers make requests to https://cdn.neetox.com/assets/xyz.js
• Clouflare forwards the rquest to Cloudfront
• Cloudfront acting as the caching layer will try to get the data from the NeetoDeploy server and will cache the result

If browser is not getting the requested file then in this chain something didn't work correctly.

After some investigation, the root cause of the problem was identified. During the investigation, we found that Cloudflare was being a bit mischievous and was doing things it should not be doing. Watch the video to see what I mean.

The video mentioned below is the one I created for the internal Neeto folks. The video is being published as-is without any modifications.

You can see the transcript of the video here.