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

View file

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

View file

@ -218,7 +218,6 @@ if (!video_data.params.listen && video_data.params.annotations) {
xhr.responseType = 'text'; xhr.responseType = 'text';
xhr.timeout = 60000; xhr.timeout = 60000;
xhr.open('GET', '/api/v1/annotations/' + video_data.id, true); xhr.open('GET', '/api/v1/annotations/' + video_data.id, true);
xhr.send();
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
@ -251,6 +250,8 @@ if (!video_data.params.listen && video_data.params.annotations) {
window.open(path, '_blank'); window.open(path, '_blank');
} }
}); });
xhr.send();
} }
// Since videojs-share can sometimes be blocked, we defer it until last // 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; subscribe_button.onclick = unsubscribe;
} }
function subscribe(timeouts = 1) { function subscribe(retries = 5) {
if (timeouts >= 10) { if (retries <= 0) {
console.log('Failed to subscribe.'); console.log('Failed to subscribe.');
return; return;
} }
@ -20,7 +20,6 @@ function subscribe(timeouts = 1) {
xhr.timeout = 20000; xhr.timeout = 20000;
xhr.open('POST', url, true); xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=' + subscribe_data.csrf_token);
var fallback = subscribe_button.innerHTML; var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = unsubscribe; subscribe_button.onclick = unsubscribe;
@ -35,14 +34,21 @@ function subscribe(timeouts = 1) {
} }
} }
xhr.ontimeout = function () { xhr.onerror = function () {
console.log('Subscribing timed out... ' + timeouts + '/10'); console.log('Subscribing failed... ' + retries + '/5');
subscribe(timeouts++); 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) { function unsubscribe(retries = 5) {
if (timeouts >= 10) { if (retries <= 0) {
console.log('Failed to subscribe'); console.log('Failed to subscribe');
return; return;
} }
@ -54,7 +60,6 @@ function unsubscribe(timeouts = 1) {
xhr.timeout = 20000; xhr.timeout = 20000;
xhr.open('POST', url, true); xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=' + subscribe_data.csrf_token);
var fallback = subscribe_button.innerHTML; var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = subscribe; subscribe_button.onclick = subscribe;
@ -69,8 +74,15 @@ function unsubscribe(timeouts = 1) {
} }
} }
xhr.ontimeout = function () { xhr.onerror = function () {
console.log('Unsubscribing timed out... ' + timeouts + '/10'); console.log('Unsubscribing failed... ' + retries + '/5');
unsubscribe(timeouts++); 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.responseType = 'json';
xhr.timeout = 20000; xhr.timeout = 20000;
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.send();
set_mode(dark_mode); set_mode(dark_mode);
localStorage.setItem('dark_mode', dark_mode); localStorage.setItem('dark_mode', dark_mode);
xhr.send();
}); });
window.addEventListener('storage', function (e) { window.addEventListener('storage', function (e) {

View file

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

View file

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

View file

@ -60,7 +60,6 @@ function revoke_token(target) {
xhr.timeout = 20000; xhr.timeout = 20000;
xhr.open('POST', url, true); xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 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() { xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { 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> </script>