This is a post for web developers.
What do you do when your CDN fails to serve a resource to a visitor?
For a year or two, we’ve had a message at the top of our site that more or less said “If you’re seeing this message, our style sheet has failed to load. Try clearing your cache, wait a few minutes and try again, etc”. Of course you wouldn’t see this message if it our stylesheet had loaded, because our stylesheet had a rule to hide it.
That’s a reasonable first step. At least we’re communicating that we know something is wrong. But we still get customers emailing in a few times a month and the CDN just wouldn’t work no matter what they tried. Maybe a CDN server in their location was having an outage, even though traffic should get routed around that, failures still happen. Maybe the customer’s DNS is failing. Lots of possibilities, and almost always impossible to track down because eventually, within a day or two at the most, it would always start working for them again.
As you can see, this goes right at the top of the BODY tag. There are two reasons we need to wait until the BODY tag. First, we are creating an element to test its visibility immediately. We have to wait until BODY to do that. Second, if there is a CSS failure, we need to inject a new CSS element into the HEAD tag, but we can’t do that until we are closed out of the HEAD tag. So, we wait until BODY.
Here’s how the code works.
After the 500 milliseconds, we start the CSS visibility test. We use jQuery to find the element #cdnfailtest and see if it’s visible. (If jQuery still isn’t loaded, we assume something is wrong and force load the CSS from the web server anyways, just to be safe). If it is visible, that means the CSS did not load, because otherwise its rules would hide the element.
Anyways, this is our solution to this problem. If you have had to come up with your own solution, we’d be interested to see how yours works.