CDN is Actually a Single Point of Failure.
Yes, i know it is not only a Single Point of Failure and CDN helped a lot to be the web experience better but you already have experienced what is happening when the CDN fails and the truth is that this time this fail affected the Streamers only, but tomorrow maybe will be the games and the gamers since many implementations in games are using CDN services.
If you don't know or your already forgot, i will remind you the title from pcgamer.com site that wasn't affected from the recent CDN Denial of Service.
The Title was: This week's internet blackout was caused by a single user updating their settings 👇
So, it was one user's mistake because he messed the updating settings? No it wasn't. These type of failures can happen anytime and for any reason.
The porblem is that there is a solution that is easy, combatible with all browsers and unfortunately the webmasters on the big sites are not using it even it is well described from Mozilla: Here
The Solution for the CDN Failure.
Add to your cdn HTML <link> rel Attributes, scripts or even to the links for the images an onerror event handler. for example:
<link rel="stylesheet" href="cdn-urls.css" onerror="this.onerror=null;this.href='local.css';" />
<script src="cdn-js.min.js" onerror="this.onerror=null;this.href='local-js.js';" ></script>
<img src="cdn-image.webp" onerror="this.onerror=null;this.src='local-image.webp';" />
The this.onerror=null in the function is to stop browser from been stuck in an endless loop if the onerror image itself generates an error as explained on Mozilla Page.
Personal, i have used this solution on all CDN links i am using on GameLink.gr as you can see below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" onerror="this.onerror=null;this.href='/static/cssJs/bootstrap.min.css';" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" onerror="this.onerror=null;this.href='/static/cssJs/jquery.min.js';" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" onerror="this.onerror=null;this.href='/static/cssJs/bootstrap.min.js';"></script>
I hope these failures teach devs and make them implement to their code the onerror handler because the effects of these type of errors can't be avoided with any other solution easily. At the end of the day everything ends to their own server and CDN is a single point of Failure too that they simple can't.. control!
For the History these sites went down or had issues for more than an hour because of the fastly failure. Source: AFR, Age, Amazon, Boots, BuzzFeed, CNN, Deliveroo, Etsy, Evening Standard, Financial Times, Giphy, Horse and Hound, IGN, Imgur, Independent, Kickstarter, Le Monde, New York Times, PayPal, Pinterest, Reddit, Royal Mail, SMH, Spotify, Taboola, The Guardian, The Verge, Twitch, Twitter, UK Government website (including HM Revenue and Customs), Vimeo, Weightwatchers .
You can have a taste how was the Twitter effect by looking the image in my post👇.
fastlycdn that hosts #twitch and it seems #twitter too (look the image how it shows my previous post🤣😂😅👇) is Down too! pic.twitter.com/t6H23FSp1A
— 🕹StᴿrᴱeᴮaᴱmᴸerS⌨️💻🖱️ (@RebelStreamers) June 8, 2021
