Why does Cloudflare seem to be caching 522 responses for resources?

Question

I have a number of different websites hosted in cpanel and proxied through Cloudflare. The symptoms I'm getting are as follows:

One of my hosted customers will contact me to say something isn't working, so I check it out myself and see in the network pane of Chrome devtools that 1 or 2 of the JS files or images have returned a 522 error. Viewing the resource directly in the address bar shows a Cloudflare 522 timeout error.

I can refresh the browser several times, and still get the same files timing out.

I go into Cloudflare, turn developer mode on and pause cloudflare for that domain, refresh the website affected and lo and behold - all resources load fine.

I can then turn developer mode back off again and reactivate cloudflare and it still continues to work. It's as though Cloudflare has somehow cached the 522 errors, although a few posts on the Cloudflare community forum say that it doesn't cache such responses.

Has anyone else experienced this issue, and if so were you able to get to the bottom of it/find an answer?

Answer 1

I was able to resolve this issue by whitelisting all of Cloudflare's IP Ranges within ConfigServer Firewall in cPanel.

It appears that for some reason the server's own firewall has blacklisted some of Cloudflare's IP addresses, and I suspect that js files (which were most commonly returning 522) use a particular IP range.

Some of this is speculation on my part, but I can say for certain that as soon as I whitelisted the IPs, it started working normally immediately. Hopefully this will help someone else with a similar issue.