Gutenberg editor not loading – Cloudflare 522 on JS react files

  • kcaluwae

    (@kcaluwae)


    2 days, 22 hours ago

    I’m using Wordfence, and my site is on cloudflare.
    The Gutenberg editor is no longer working and I’m not aware how to fix this as I’m not aware what I did to break it.
    When opening a post in the editor I see a long list of 522 errors followed by TypeErrors.
    The first one is this one : net::ERR::ABORTED 522.
    So Cloudflare doesn’t manage to access this file on my host.
    If I bypass Cloudflare and go directly to that URL there’s no problem. But if I try to access just that file directly in a browser with Cloudflare enabled I get a 522 as well.
    If I bypass Cloudflare the Gutenberg editor opens without problems.
    What could be causing these problems for Cloudflare to access these Javascript files?
    I experience the same problems on two wordpress sites, both hosted on the same server.
    One is also using a caching plugin but as the problem is on both I don’t think the caching plugin is part of the problem.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator threadi

    (@threadi)

    2 days, 21 hours ago

    What does Cloudflare Support have to say about this? Because it seems their rules are the ones causing the problem here – since it works just fine without them.

    Christopher Neuman

    (@neumanc)

    2 days, 19 hours ago

    The first thing I would do is temporarily disable the Cloudflare proxy for the domain (turn the orange cloud gray) and test the site again. Since you mentioned Gutenberg works when Cloudflare is bypassed, that should help confirm the problem is between Cloudflare and your hosting server.

    A 522 generally means Cloudflare is having trouble connecting to the origin server.

    I would also check with your hosting provider to make sure the server isn’t experiencing an outage, high load, networking problems, or other issues. Since you’re seeing the same problem on two WordPress sites hosted on the same server, that makes me suspect the server or its firewall/security configuration before an individual WordPress plugin.

    While reproducing the problem, check your website/server error logs. If you’re using cPanel, Plesk, or DirectAdmin, you should be able to view these from your hosting control panel.

    I would also check whether Wordfence or a server-level firewall/security system is blocking or rate-limiting Cloudflare IP addresses.

    Once you find and correct the underlying issue, turn the Cloudflare proxy back on and test again.

    Since both sites on the same server are affected and they work when Cloudflare is bypassed, I wouldn’t focus on the caching plugin first. I’d start with the host/server, firewall, and the connection between Cloudflare and the origin.

    Thread Starter kcaluwae

    (@kcaluwae)

    2 days, 14 hours ago

    @threadi I’m on a free Cloudflare account so no support (except the community). I’m not sure that the problem is on their site, a 522 means Cloudflare can’t contact the host so I think it’s more likely to be a problem at the host.

    I’ve created a support ticket with Hetzner, as I start to think this is not something I will be able to solve myself. Rather a firewall on the server that is blocking these things. I have Wordfence but if I look at the security logs of firewall when I try to open the editor there’s nothing there so it seems like the requests are blocked before they reach my wordfence.

    @neumanc Yes, that’s what I did, turned the orange cloud grey, to bypass Cloudflare, and then it works. The server is running perfectly fine I guess, if I bypass Cloudflare I can work in the editor, and the other parts of the wordpress dashboard seem to be more performant than with Cloudflare enabled.
    I suppose this all points to a rate limiting/blocking of Cloudflare IP’s at Hetzner.

    Christopher Neuman

    (@neumanc)

    2 days, 12 hours ago

    @kcaluwae Based on what you found, I really don’t think this is a Gutenberg or WordPress problem.

    The biggest clue is everything works when you turn off the Cloudflare proxy, but you start getting the 522 errors again as soon as Cloudflare is enabled. Since you’re also seeing the same thing on two sites on the same Hetzner server, I would focus on Cloudflare and the connection between Cloudflare and your server.

    I would first check your Cloudflare settings. If you have WAF rules, rate limiting, Bot Fight Mode, Rocket Loader, or any custom Cache Rules enabled, try temporarily disabling them one at a time and see if the problem goes away.

    I would also check your DNS records in Cloudflare. If you have an AAAA record, make sure IPv6 is actually configured and working correctly on the server.

    Since this is a 522, I would also check the server itself to make sure something isn’t blocking or rate limiting Cloudflare. This could be the Hetzner firewall or something on the server such as CSF, Fail2Ban, firewalld, iptables/nftables, ModSecurity, or another security system.

    One thing that could really help narrow this down is watching your server access/error logs while you reproduce the problem. When one of those JavaScript files gets a 522, check if the request actually shows up in your web server access log.

    If the request never reaches the web server, then I would suspect something is blocking or timing out the connection between Cloudflare and the server.

    Since everything works perfectly when you bypass Cloudflare, I wouldn’t spend much more time changing WordPress, Gutenberg, PHP, or plugins. I would focus on figuring out what is happening between Cloudflare and the Hetzner server.

    Thread Starter kcaluwae

    (@kcaluwae)

    22 hours, 40 minutes ago

    Since this is a 522, I would also check the server itself to make sure something isn’t blocking or rate limiting Cloudflare. This could be the Hetzner firewall or something on the server such as CSF, Fail2Ban, firewalld, iptables/nftables, ModSecurity, or another security system.

    One thing that could really help narrow this down is watching your server access/error logs while you reproduce the problem. When one of those JavaScript files gets a 522, check if the request actually shows up in your web server access log.

    I tried disabling Rocket Loader, except for that I’m not using any of the Cloudflare features you mentioned.

    I’m on shared hosting so it looks like I don’t have access to firewall settings, ModSecurity or any of those other things you mentioned. Access & error logs I can only see the next day.
    I created a ticket with Hetzner 2 days ago, they said they modified some firewall settings and the problem should be solved, but it isn’t. I’ve let them now the error persists but it’s frustrating that I cannot do much except wait apparently…

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.