Fix retry on timeout for AJAX requests

This commit is contained in:
Omar Roth 2019-06-15 10:08:06 -05:00
parent a3164177f8
commit 552f616305
No known key found for this signature in database
GPG key ID: B8254FB7EC3D37F2
9 changed files with 110 additions and 53 deletions

View file

@ -1,5 +1,5 @@
function get_playlist(plid, timeouts = 1) {
if (timeouts >= 10) {
function get_playlist(plid, retries = 5) {
if (retries <= 0) {
console.log('Failed to pull playlist');
return;
}
@ -18,7 +18,6 @@ function get_playlist(plid, timeouts = 1) {
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', plid_url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
@ -51,10 +50,17 @@ function get_playlist(plid, timeouts = 1) {
}
}
xhr.ontimeout = function () {
console.log('Pulling playlist timed out... ' + timeouts + '/10');
get_playlist(plid, timeouts++);
xhr.onerror = function () {
console.log('Pulling playlist failed... ' + retries + '/5');
setTimeout(function () { get_playlist(plid, retries - 1) }, 1000);
}
xhr.ontimeout = function () {
console.log('Pulling playlist failed... ' + retries + '/5');
get_playlist(plid, retries - 1);
}
xhr.send();
}
if (video_data.plid) {

View file

@ -1,15 +1,14 @@
var notifications, delivered;
function get_subscriptions(callback, timeouts = 1) {
if (timeouts >= 10) {
return
function get_subscriptions(callback, retries = 5) {
if (retries <= 0) {
return;
}
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', '/api/v1/auth/subscriptions', true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
@ -20,10 +19,17 @@ function get_subscriptions(callback, timeouts = 1) {
}
}
xhr.ontimeout = function () {
console.log('Pulling subscriptions timed out... ' + timeouts + '/10');
get_subscriptions(callback, timeouts++);
xhr.onerror = function () {
console.log('Pulling subscriptions failed... ' + retries + '/5');
setTimeout(function () { get_subscriptions(callback, retries - 1) }, 1000);
}
xhr.ontimeout = function () {
console.log('Pulling subscriptions failed... ' + retries + '/5');
get_subscriptions(callback, retries - 1);
}
xhr.send();
}
function create_notification_stream(subscriptions) {
@ -77,7 +83,7 @@ function create_notification_stream(subscriptions) {
notifications.onerror = function (event) {
console.log('Something went wrong with notifications, trying to reconnect...');
notifications.close();
get_subscriptions(create_notification_stream);
setTimeout(function () { get_subscriptions(create_notification_stream) }, 100);
}
notifications.ontimeout = function (event) {
@ -97,6 +103,7 @@ window.addEventListener('load', function (e) {
} else {
setTimeout(function () {
if (!localStorage.getItem('stream')) {
notifications = true;
get_subscriptions(create_notification_stream);
localStorage.setItem('stream', true);
}
@ -110,6 +117,7 @@ window.addEventListener('load', function (e) {
} else {
setTimeout(function () {
if (!localStorage.getItem('stream')) {
notifications = true;
get_subscriptions(create_notification_stream);
localStorage.setItem('stream', true);
}

View file

@ -218,7 +218,6 @@ if (!video_data.params.listen && video_data.params.annotations) {
xhr.responseType = 'text';
xhr.timeout = 60000;
xhr.open('GET', '/api/v1/annotations/' + video_data.id, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
@ -251,6 +250,8 @@ if (!video_data.params.listen && video_data.params.annotations) {
window.open(path, '_blank');
}
});
xhr.send();
}
// Since videojs-share can sometimes be blocked, we defer it until last

View file

@ -7,8 +7,8 @@ if (subscribe_button.getAttribute('data-type') === 'subscribe') {
subscribe_button.onclick = unsubscribe;
}
function subscribe(timeouts = 1) {
if (timeouts >= 10) {
function subscribe(retries = 5) {
if (retries <= 0) {
console.log('Failed to subscribe.');
return;
}
@ -20,7 +20,6 @@ function subscribe(timeouts = 1) {
xhr.timeout = 20000;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=' + subscribe_data.csrf_token);
var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = unsubscribe;
@ -35,14 +34,21 @@ function subscribe(timeouts = 1) {
}
}
xhr.ontimeout = function () {
console.log('Subscribing timed out... ' + timeouts + '/10');
subscribe(timeouts++);
xhr.onerror = function () {
console.log('Subscribing failed... ' + retries + '/5');
setTimeout(function () { subscribe(retries - 1) }, 1000);
}
xhr.ontimeout = function () {
console.log('Subscribing failed... ' + retries + '/5');
subscribe(retries - 1);
}
xhr.send('csrf_token=' + subscribe_data.csrf_token);
}
function unsubscribe(timeouts = 1) {
if (timeouts >= 10) {
function unsubscribe(retries = 5) {
if (retries <= 0) {
console.log('Failed to subscribe');
return;
}
@ -54,7 +60,6 @@ function unsubscribe(timeouts = 1) {
xhr.timeout = 20000;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=' + subscribe_data.csrf_token);
var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = subscribe;
@ -69,8 +74,15 @@ function unsubscribe(timeouts = 1) {
}
}
xhr.ontimeout = function () {
console.log('Unsubscribing timed out... ' + timeouts + '/10');
unsubscribe(timeouts++);
xhr.onerror = function () {
console.log('Unsubscribing failed... ' + retries + '/5');
setTimeout(function () { unsubscribe(retries - 1) }, 1000);
}
xhr.ontimeout = function () {
console.log('Unsubscribing failed... ' + retries + '/5');
unsubscribe(retries - 1);
}
xhr.send('csrf_token=' + subscribe_data.csrf_token);
}

View file

@ -9,10 +9,11 @@ toggle_theme.addEventListener('click', function () {
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', url, true);
xhr.send();
set_mode(dark_mode);
localStorage.setItem('dark_mode', dark_mode);
xhr.send();
});
window.addEventListener('storage', function (e) {

View file

@ -109,10 +109,10 @@ function number_with_separator(val) {
return val;
}
function get_playlist(plid, timeouts = 1) {
function get_playlist(plid, retries = 5) {
playlist = document.getElementById('playlist');
if (timeouts >= 10) {
if (retries <= 0) {
console.log('Failed to pull playlist');
playlist.innerHTML = '';
return;
@ -136,7 +136,6 @@ function get_playlist(plid, timeouts = 1) {
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', plid_url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
@ -174,20 +173,31 @@ function get_playlist(plid, timeouts = 1) {
}
}
xhr.onerror = function () {
playlist = document.getElementById('playlist');
playlist.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
console.log('Pulling playlist timed out... ' + retries + '/5');
setTimeout(function () { get_playlist(plid, retries - 1) }, 1000);
}
xhr.ontimeout = function () {
playlist = document.getElementById('playlist');
playlist.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
console.log('Pulling playlist timed out... ' + timeouts + '/10');
get_playlist(plid, timeouts++);
console.log('Pulling playlist timed out... ' + retries + '/5');
get_playlist(plid, retries - 1);
}
xhr.send();
}
function get_reddit_comments(timeouts = 1) {
function get_reddit_comments(retries = 5) {
comments = document.getElementById('comments');
if (timeouts >= 10) {
if (retries <= 0) {
console.log('Failed to pull comments');
comments.innerHTML = '';
return;
@ -204,7 +214,6 @@ function get_reddit_comments(timeouts = 1) {
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
@ -239,8 +248,8 @@ function get_reddit_comments(timeouts = 1) {
comments.children[0].children[1].children[0].onclick = swap_comments;
} else {
if (video_data.params.comments[1] === 'youtube') {
console.log('Pulling comments timed out... ' + timeouts + '/10');
get_youtube_comments(timeouts++);
console.log('Pulling comments failed... ' + retries + '/5');
setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
} else {
comments.innerHTML = fallback;
}
@ -248,16 +257,23 @@ function get_reddit_comments(timeouts = 1) {
}
}
xhr.ontimeout = function () {
console.log('Pulling comments timed out... ' + timeouts + '/10');
get_reddit_comments(timeouts++);
xhr.onerror = function () {
console.log('Pulling comments failed... ' + retries + '/5');
setInterval(function () { get_reddit_comments(retries - 1) }, 1000);
}
xhr.ontimeout = function () {
console.log('Pulling comments failed... ' + retries + '/5');
get_reddit_comments(retries - 1);
}
xhr.send();
}
function get_youtube_comments(timeouts = 1) {
function get_youtube_comments(retries = 5) {
comments = document.getElementById('comments');
if (timeouts >= 10) {
if (retries <= 0) {
console.log('Failed to pull comments');
comments.innerHTML = '';
return;
@ -275,7 +291,6 @@ function get_youtube_comments(timeouts = 1) {
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
@ -305,7 +320,7 @@ function get_youtube_comments(timeouts = 1) {
comments.children[0].children[1].children[0].onclick = swap_comments;
} else {
if (video_data.params.comments[1] === 'youtube') {
get_youtube_comments(timeouts++);
setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
} else {
comments.innerHTML = '';
}
@ -313,12 +328,21 @@ function get_youtube_comments(timeouts = 1) {
}
}
xhr.onerror = function () {
comments.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
console.log('Pulling comments failed... ' + retries + '/5');
setInterval(function () { get_youtube_comments(retries - 1) }, 1000);
}
xhr.ontimeout = function () {
comments.innerHTML =
'<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
console.log('Pulling comments timed out... ' + timeouts + '/10');
get_youtube_comments(timeouts++);
console.log('Pulling comments failed... ' + retries + '/5');
get_youtube_comments(retries - 1);
}
xhr.send();
}
function get_youtube_replies(target, load_more) {
@ -338,7 +362,6 @@ function get_youtube_replies(target, load_more) {
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
@ -373,9 +396,11 @@ function get_youtube_replies(target, load_more) {
}
xhr.ontimeout = function () {
console.log('Pulling comments timed out.');
console.log('Pulling comments failed.');
body.innerHTML = fallback;
}
xhr.send();
}
if (video_data.play_next) {

View file

@ -9,7 +9,6 @@ function mark_watched(target) {
xhr.timeout = 20000;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=' + watched_data.csrf_token);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
@ -18,6 +17,8 @@ function mark_watched(target) {
}
}
}
xhr.send('csrf_token=' + watched_data.csrf_token);
}
function mark_unwatched(target) {
@ -33,7 +34,6 @@ function mark_unwatched(target) {
xhr.timeout = 20000;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=' + watched_data.csrf_token);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
@ -43,4 +43,6 @@ function mark_unwatched(target) {
}
}
}
xhr.send('csrf_token=' + watched_data.csrf_token);
}

View file

@ -68,7 +68,6 @@ function remove_subscription(target) {
xhr.timeout = 20000;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
@ -78,5 +77,7 @@ function remove_subscription(target) {
}
}
}
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
}
</script>

View file

@ -60,7 +60,6 @@ function revoke_token(target) {
xhr.timeout = 20000;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
@ -70,5 +69,7 @@ function revoke_token(target) {
}
}
}
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
}
</script>