Skip to content

Commit

Permalink
Hotfix: prevent site hanging if a static server is completely dead
Browse files Browse the repository at this point in the history
  • Loading branch information
@cr-nz
cr-nz committed Aug 13, 2019
1 parent 3806901 commit cf42308
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 11 deletions.
Binary file added loading-sprite_v4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added loading-sprite_v4@2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 34 additions & 11 deletions secureboot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ var fetchStreamSupport = window.fetch && typeof ReadableStream === 'function' &&
var staticServerLoading = {
loadFailuresOriginal: 0, // Count of failures on the original static server (from any thread)
loadFailuresDefault: {}, // Count of failures on the EU static server per file
maxRetryAttemptsOriginal: 3, // Max retry attempts on the original static server before switching to the default
maxRetryAttemptsOriginal: 2, // Max retry attempts on the original static server before switching to the default
maxRetryAttemptsDefault: 3, // Max retry attempts on the default static server per file before it shows dialog
failureLoggedOriginal: false, // Flag to indicate failure of original static server was logged to the API
failureLoggedDefault: false, // Flag to indicate failure of the default static server was logged to the API
Expand Down Expand Up @@ -1495,7 +1495,7 @@ function siteLoadError(error, filename) {

logStaticServerFailure(error, filename, staticpath);

var message = ['MEGA failed to load because of '];
var message = ['MEGA failed to load because '];
if (location.host !== 'mega.nz') {
message[0] += '..';
}
Expand All @@ -1520,8 +1520,10 @@ function siteLoadError(error, filename) {
"update your browser and MEGA browser extension to the latest version. " +
"If that does not help, contact support@mega.nz");

message.push('BrowserID: ' + (typeof mozBrowserID !== 'undefined' ? mozBrowserID : ua));
message.push('Static server: ' + staticpath);
message.push('BrowserID: ' + (typeof mozBrowserID !== 'undefined' ? mozBrowserID : ua) + '\n' +
'Static server: ' + staticpath + '\n' +
'Flipped to default static: ' + (staticServerLoading.flippedToDefault ? 'yes' : 'no') + '\n' +
'Date/time: ' + new Date().toISOString());

message = message.join("\n\n");
console.error(message);
Expand Down Expand Up @@ -2965,9 +2967,13 @@ else if (!browserUpdate) {
}
}

// Set no timeout, let the lower layers handle it
var xhr_timeout = 0;
var urlErrors = {};
// Set a 10 second timeout for receiving an initial response from the static server. If the static server is
// completely dead, the longest wait a user will have is 10 seconds before they are switched to the EU servers. If
// the server is ok, but their connection is slow, then it's likely they will still receive an initial response
// within 10 seconds. Once that first byte is received then the XHR onprogress handler will set the timeout to
// unlimited (0 ms) and let the lower layers handle it (e.g. use the browser default timeout) which can let the
// site load slowly over 5 minutes if they are on a really bad connection.
var xhr_timeout = 10000;

/**
* Handles the XHR loading error. It tries reloading the file multiple times and switches the static path to the
Expand Down Expand Up @@ -3016,6 +3022,11 @@ else if (!browserUpdate) {

// Set flag to show the static server was flipped to the default EU server
staticServerLoading.flippedToDefault = true;

// Log that the loading was flipped to load from the default static servers
if (d) {
console.log('Flipped to failsafe static server path: ' + defaultStaticPath);
}
}
}

Expand Down Expand Up @@ -3116,6 +3127,14 @@ else if (!browserUpdate) {
if (localStorage.dd) url += '?t=' + Date.now();
xhr_stack[xhri].open("GET", bootstaticpath + url, true);
xhr_stack[xhri].timeout = xhr_timeout;

// If a response is received (after 50ms or the 1st byte), set the timeout to 0 so that we wait as long as
// possible to receive the rest of the files. This means even slow connections (< GPRS) can load the site.
xhr_stack[xhri].onprogress = function() {
this.timeout = 0;
xhr_timeout = 0;
};

if (is_chrome_firefox || is_firefox_web_ext) {
xhr_stack[xhri].overrideMimeType('text/plain');
}
Expand Down Expand Up @@ -3336,15 +3355,19 @@ else if (!browserUpdate) {
}
}

var istaticpath = staticpath;
// For live we want the loading-sprite served from the root web servers so that if a static server is down we can
// detect that quickly with our JS static loading logic. Otherwise, these images will block the loading before then
var istaticpath = '/';

// The loading-sprite images are embedded inside the extensions
if (is_chrome_web_ext || is_firefox_web_ext) {
istaticpath = '../';
istaticpath = '../images/mega/';
}
else if (is_chrome_firefox) {
istaticpath = 'chrome://mega/content/';
istaticpath = 'chrome://mega/content/images/mega/';
}

mCreateElement('style', {type: 'text/css'}, 'body').textContent = '.div, span, input {outline: none;}.hidden {display: none;}.clear {clear: both;margin: 0px;padding: 0px;display: block;}.loading-main-block {width: 100%;height: 100%;position: fixed;z-index: 10000;font-family:Arial, Helvetica, sans-serif;}.toast-notification{visibility:hidden}.bottom-page.scroll-block{display:none}.loading-mid-white-block {height: 100%;width:100%;}.loading-cloud {width: 222px;position: fixed;height: 158px;background-image: url(' + istaticpath + 'images/mega/loading-sprite_v4.png);background-repeat: no-repeat;background-position: 0 0;left:50%;top:50%;margin:-79px 0 0 -111px;}.loading-m-block{width:60px;height:60px;position:absolute; left:81px;top:65px;background-color:white;background-image: url(' + istaticpath + 'images/mega/loading-sprite_v4.png);background-repeat: no-repeat;background-position: -81px -65px;border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;z-index:10;}.loading-percentage { width: 80px;height: 80px; background-color: #e1e1e1;position: absolute;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;overflow: hidden;background-image: url(' + istaticpath + 'images/mega/loading-sprite_v4.png);background-repeat: no-repeat;background-position: -70px -185px;left:71px;top:55px;}.loading-percentage ul {list-style-type: none;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;overflow: hidden;}.loading-percentage li {position: absolute;top: 0px;}.loading-percentage p, .loading-percentage li, .loading-percentage ul{width: 80px;height: 80px;padding: 0;margin: 0;}.loading-percentage span {display: block;width: 40px;height: 80px;}.loading-percentage ul :nth-child(odd) {clip: rect(0px, 80px, 80px, 40px);}.loading-percentage ul :nth-child(even) {clip: rect(0px, 40px, 80px, 0px);}.loading-percentage .right-c span {-moz-border-radius-topleft: 40px;-moz-border-radius-bottomleft: 40px;-webkit-border-top-left-radius: 40px;-webkit-border-bottom-left-radius: 40px;border-top-left-radius: 40px;border-bottom-left-radius: 40px;background-color:#dc0000;}.loading-percentage .left-c span {margin-left: 40px;-moz-border-radius-topright: 40px;-moz-border-radius-bottomright: 40px;-webkit-border-top-right-radius: 40px;-webkit-border-bottom-right-radius: 40px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;background-color:#dc0000;}.loading-main-bottom {max-width: 940px;width: 100%;position: absolute;bottom: 20px;left: 50%;margin: 0 0 0 -470px;text-align: center;}.loading-bottom-button {height: 29px;width: 29px;float: left;background-image: url(' + istaticpath + 'images/mega/loading-sprite_v4.png);background-repeat: no-repeat;cursor: pointer;}.st-social-block-load {position: fixed;bottom: 20px;left: 0;width: 100%;height: 43px;text-align: center;}.st-bottom-button {height: 24px;width: 24px;margin: 0 8px;display: inline-block;background-image: url(' + istaticpath + 'images/mega/loading-sprite_v4.png);background-repeat: no-repeat;background-position:11px -405px;cursor: pointer;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;-webkit-transition: all 200ms ease-in-out;-moz-transition: background-color 200ms ease-in-out;-o-transition: background-color 200ms ease-in-out;-ms-transition: background-color 200ms ease-in-out;transition: background-color 200ms ease-in-out;background-color:#999999;}.st-bottom-button.st-google-button {background-position: 11px -405px;}.st-bottom-button.st-google-button {background-position: -69px -405px;}.st-bottom-button.st-twitter-button{background-position: -29px -405px;}.st-bottom-button:hover {background-color:#334f8d;}.st-bottom-button.st-twitter-button:hover {background-color:#1a96f0;}.st-bottom-button.st-google-button:hover {background-color:#d0402a;}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {.maintance-block, .loading-percentage, .loading-m-block, .loading-cloud, .loading-bottom-button,.st-bottom-button, .st-bottom-scroll-button {background-image: url(' + istaticpath + 'images/mega/loading-sprite_v4@2x.png); background-size: 222px auto;}}';
mCreateElement('style', {type: 'text/css'}, 'body').textContent = '.div, span, input {outline: none;}.hidden {display: none;}.clear {clear: both;margin: 0px;padding: 0px;display: block;}.loading-main-block {width: 100%;height: 100%;position: fixed;z-index: 10000;font-family:Arial, Helvetica, sans-serif;}.toast-notification{visibility:hidden}.bottom-page.scroll-block{display:none}.loading-mid-white-block {height: 100%;width:100%;}.loading-cloud {width: 222px;position: fixed;height: 158px;background-image: url(' + istaticpath + 'loading-sprite_v4.png);background-repeat: no-repeat;background-position: 0 0;left:50%;top:50%;margin:-79px 0 0 -111px;}.loading-m-block{width:60px;height:60px;position:absolute; left:81px;top:65px;background-color:white;background-image: url(' + istaticpath + 'loading-sprite_v4.png);background-repeat: no-repeat;background-position: -81px -65px;border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;z-index:10;}.loading-percentage { width: 80px;height: 80px; background-color: #e1e1e1;position: absolute;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;overflow: hidden;background-image: url(' + istaticpath + 'loading-sprite_v4.png);background-repeat: no-repeat;background-position: -70px -185px;left:71px;top:55px;}.loading-percentage ul {list-style-type: none;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;overflow: hidden;}.loading-percentage li {position: absolute;top: 0px;}.loading-percentage p, .loading-percentage li, .loading-percentage ul{width: 80px;height: 80px;padding: 0;margin: 0;}.loading-percentage span {display: block;width: 40px;height: 80px;}.loading-percentage ul :nth-child(odd) {clip: rect(0px, 80px, 80px, 40px);}.loading-percentage ul :nth-child(even) {clip: rect(0px, 40px, 80px, 0px);}.loading-percentage .right-c span {-moz-border-radius-topleft: 40px;-moz-border-radius-bottomleft: 40px;-webkit-border-top-left-radius: 40px;-webkit-border-bottom-left-radius: 40px;border-top-left-radius: 40px;border-bottom-left-radius: 40px;background-color:#dc0000;}.loading-percentage .left-c span {margin-left: 40px;-moz-border-radius-topright: 40px;-moz-border-radius-bottomright: 40px;-webkit-border-top-right-radius: 40px;-webkit-border-bottom-right-radius: 40px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;background-color:#dc0000;}.loading-main-bottom {max-width: 940px;width: 100%;position: absolute;bottom: 20px;left: 50%;margin: 0 0 0 -470px;text-align: center;}.loading-bottom-button {height: 29px;width: 29px;float: left;background-image: url(' + istaticpath + 'loading-sprite_v4.png);background-repeat: no-repeat;cursor: pointer;}.st-social-block-load {position: fixed;bottom: 20px;left: 0;width: 100%;height: 43px;text-align: center;}.st-bottom-button {height: 24px;width: 24px;margin: 0 8px;display: inline-block;background-image: url(' + istaticpath + 'loading-sprite_v4.png);background-repeat: no-repeat;background-position:11px -405px;cursor: pointer;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;-webkit-transition: all 200ms ease-in-out;-moz-transition: background-color 200ms ease-in-out;-o-transition: background-color 200ms ease-in-out;-ms-transition: background-color 200ms ease-in-out;transition: background-color 200ms ease-in-out;background-color:#999999;}.st-bottom-button.st-google-button {background-position: 11px -405px;}.st-bottom-button.st-google-button {background-position: -69px -405px;}.st-bottom-button.st-twitter-button{background-position: -29px -405px;}.st-bottom-button:hover {background-color:#334f8d;}.st-bottom-button.st-twitter-button:hover {background-color:#1a96f0;}.st-bottom-button.st-google-button:hover {background-color:#d0402a;}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {.maintance-block, .loading-percentage, .loading-m-block, .loading-cloud, .loading-bottom-button,.st-bottom-button, .st-bottom-scroll-button {background-image: url(' + istaticpath + 'loading-sprite_v4@2x.png); background-size: 222px auto;}}';

mCreateElement('div', { "class": "loading-main-block", id: "loading"}, 'body')
.innerHTML =
Expand Down

0 comments on commit cf42308

Please sign in to comment.