fix error handling for Fetch API

This commit is contained in:
AlecM33
2023-08-13 18:47:38 -04:00
parent 0b7dd9f4d7
commit da0d69062e
9 changed files with 81 additions and 55 deletions

View File

@@ -137,21 +137,35 @@ export class GameCreationStepManager {
)
}).catch((e) => {
restoreButton();
if (e.status === 429) {
toast('You\'ve sent this request too many times.', 'error', true, true, 'medium');
} else if (e.status === 413) {
toast('Your request is too large.', 'error', true, true);
} else {
toast(e.content, 'error', true, true, 'medium');
}
toast(e.content, 'error', true, true, 'medium');
}).then(res => {
res.json().then(json => {
UserUtility.setAnonymousUserId(json.cookie, json.environment);
window.location.replace(
window.location.protocol + '//' + window.location.host +
'/game/' + json.accessCode
);
});
switch (res.status) {
case 429:
toast('You\'ve sent this request too many times.', 'error', true, true, 'medium');
restoreButton();
break;
case 413:
toast('Your request is too large.', 'error', true, true);
restoreButton();
break;
case 400:
toast('Your game has invalid parameters..', 'error', true, true);
restoreButton();
break;
case 201:
res.json().then(json => {
UserUtility.setAnonymousUserId(json.cookie, json.environment);
window.location.replace(
window.location.protocol + '//' + window.location.host +
'/game/' + json.accessCode
);
});
break;
default:
toast(res.content, 'error', true, true, 'medium');
restoreButton();
break;
}
});
}
}

View File

@@ -19,7 +19,7 @@ export const SharedStateUtil = {
restartHandler: (stateBucket, status = STATUS.IN_PROGRESS) => {
fetch(
'/api/games/' + stateBucket.currentGameState.accessCode + '/restart?status=' + status,
'/api/games/' + stateBucket.currentGameState.accessCode + '/restart',
{
method: 'PATCH',
mode: 'cors',

View File

@@ -27,9 +27,13 @@ export const gameHandler = (socket, window, gameDOM) => {
method: 'GET',
mode: 'cors'
}
).catch((res) => {
reject(res.content);
).catch(() => {
reject(new Error('There was a problem connecting to the room.'));
}).then((response) => {
if (!response.ok) {
reject(new Error('HTTP ' + response.status + ': Could not connect to the room'));
return;
}
response.text().then((text) => {
stateBucket.environment = text;
socket.on('connect', () => {

View File

@@ -6,5 +6,5 @@ import { toast } from '../modules/front_end_components/Toast.js';
gameHandler(io('/in-game'), window, gameTemplate).then(() => {
toast('Connecting...', 'warning', true, false);
}).catch((e) => {
toast(e, 'error', true);
toast(e.message, 'error', true, false);
});

View File

@@ -31,7 +31,19 @@ function attemptToJoinGame (event) {
mode: 'cors'
}
).then((res) => {
if (res.status === 200) {
if (!res.ok) {
switch (res.status) {
case 404:
toast('Game not found', 'error', true);
break;
default:
toast('There was a problem joining the game', 'error', true);
break;
}
form.addEventListener('submit', attemptToJoinGame);
form.classList.remove('submitted');
document.getElementById('join-button')?.setAttribute('value', 'Join');
} else {
res.json().then(json => {
window.location = window.location.protocol + '//' + window.location.host +
'/join/' + encodeURIComponent(json.accessCode) +
@@ -39,17 +51,11 @@ function attemptToJoinGame (event) {
'&timer=' + encodeURIComponent(getTimeString(json.timerParams));
});
}
}).catch((res) => {
}).catch(() => {
form.addEventListener('submit', attemptToJoinGame);
form.classList.remove('submitted');
document.getElementById('join-button')?.setAttribute('value', 'Join');
if (res.status === 404) {
toast('Game not found', 'error', true);
} else if (res.status === 400) {
toast(res.content, 'error', true);
} else {
toast('An unknown error occurred. Please try again later.', 'error', true);
}
toast('An unknown error occurred. Please try again later.', 'error', true);
});
} else {
toast('Invalid code. Codes are 4 numbers or letters.', 'error', true, true);

View File

@@ -28,13 +28,31 @@ const joinHandler = (e) => {
if (validateName(name)) {
sendJoinRequest(e, name, accessCode)
.then((res) => {
res.json().then(json => {
UserUtility.setAnonymousUserId(json.cookie, json.environment);
resetJoinButtonState(e, res, joinHandler);
window.location = '/game/' + accessCode;
});
}).catch((res) => {
handleJoinError(e, res, joinHandler);
if (!res.ok) {
switch (res.status) {
case 404:
toast('Game not found', 'error', true);
break;
case 400:
res.text().then(text => {
toast(text, 'error', true);
});
break;
default:
toast('There was a problem joining the game', 'error', true);
break;
}
resetJoinButtonState(e, joinHandler);
} else {
res.json().then(json => {
UserUtility.setAnonymousUserId(json.cookie, json.environment);
resetJoinButtonState(e, joinHandler);
window.location = '/game/' + accessCode;
});
}
}).catch(() => {
toast('Problems with the server are preventing your request to join the game.', 'error', true);
resetJoinButtonState(e, joinHandler);
});
} else {
toast('Name must be between 1 and 30 characters.', 'error', true, true, 'long');
@@ -65,28 +83,12 @@ function sendJoinRequest (e, name, accessCode) {
);
}
function resetJoinButtonState (e, res, joinHandler) {
function resetJoinButtonState (e, joinHandler) {
document.getElementById('join-game-form').onsubmit = joinHandler;
e.submitter.classList.remove('submitted');
e.submitter.setAttribute('value', 'Join');
}
function handleJoinError (e, res, joinHandler) {
resetJoinButtonState(e, res, joinHandler);
if (res.status === 404) {
toast('This game was not found.', 'error', true, true, 'long');
} else if (res.status === 400) {
toast(res.content, 'error', true, true, 'long');
} else if (res.status >= 500) {
toast(
'The server is experiencing problems. Please try again later',
'error',
true
);
}
}
function validateName (name) {
return typeof name === 'string' && name.length > 0 && name.length <= 30;
}