Hide transient upload errors from queue UI
Transient network errors on first upload attempt showed ugly 'Network error: TypeError: Load failed' messages in the queue. These are normal on iOS Safari and auto-resolve on retry. - Clean up sync error messages (friendly text, no raw error types) - Only show error messages in queue after 3+ retries or failed status - Only show retry counter after 3+ retries - First couple of retries are silent - just shows Pending status Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -192,12 +192,10 @@ const Sync = {
|
|||||||
} catch (fetchErr) {
|
} catch (fetchErr) {
|
||||||
clearTimeout(timeoutId);
|
clearTimeout(timeoutId);
|
||||||
if (fetchErr.name === 'AbortError') {
|
if (fetchErr.name === 'AbortError') {
|
||||||
throw new Error('Upload timed out (' + (this.UPLOAD_TIMEOUT_MS / 1000) + 's)');
|
throw new Error('Upload timed out');
|
||||||
}
|
}
|
||||||
// Capture detailed error info for debugging
|
console.error('[SYNC] Fetch threw:', fetchErr.name, fetchErr.message);
|
||||||
const errDetail = fetchErr.name + ': ' + fetchErr.message;
|
throw new Error('Connection lost - will retry');
|
||||||
console.error('[SYNC] Fetch threw:', errDetail);
|
|
||||||
throw new Error('Network error: ' + errDetail);
|
|
||||||
}
|
}
|
||||||
clearTimeout(timeoutId);
|
clearTimeout(timeoutId);
|
||||||
|
|
||||||
@@ -253,13 +251,12 @@ const Sync = {
|
|||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this._setUploading(false);
|
this._setUploading(false);
|
||||||
const errMsg = (error.name || 'Error') + ': ' + error.message;
|
console.error('[SYNC] Upload failed:', error.message, '(attempt', retryCount + 1 + ')');
|
||||||
console.error('[SYNC] Upload failed:', errMsg, '(attempt', retryCount + 1 + ')');
|
|
||||||
await Storage.updatePhoto(photo.id, {
|
await Storage.updatePhoto(photo.id, {
|
||||||
status: 'pending',
|
status: 'pending',
|
||||||
retryCount: retryCount + 1,
|
retryCount: retryCount + 1,
|
||||||
lastError: errMsg,
|
lastError: error.message,
|
||||||
error: errMsg
|
error: error.message
|
||||||
});
|
});
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -500,7 +500,7 @@ function createQueueItem(photo, isCompleted) {
|
|||||||
badge.textContent = photo.status.charAt(0).toUpperCase() + photo.status.slice(1);
|
badge.textContent = photo.status.charAt(0).toUpperCase() + photo.status.slice(1);
|
||||||
status.appendChild(badge);
|
status.appendChild(badge);
|
||||||
|
|
||||||
if (photo.retryCount > 0 && !isCompleted) {
|
if (photo.retryCount >= 3 && !isCompleted) {
|
||||||
const retry = document.createElement('span');
|
const retry = document.createElement('span');
|
||||||
retry.className = 'retry-info';
|
retry.className = 'retry-info';
|
||||||
retry.textContent = 'Retry #' + photo.retryCount;
|
retry.textContent = 'Retry #' + photo.retryCount;
|
||||||
@@ -511,8 +511,11 @@ function createQueueItem(photo, isCompleted) {
|
|||||||
info.appendChild(meta);
|
info.appendChild(meta);
|
||||||
info.appendChild(status);
|
info.appendChild(status);
|
||||||
|
|
||||||
|
// Only show error messages after 3+ retries or for failed status
|
||||||
|
// (first couple of retries are usually transient network blips)
|
||||||
const errorMsg = photo.lastError || photo.error;
|
const errorMsg = photo.lastError || photo.error;
|
||||||
if (errorMsg && photo.status !== 'verified') {
|
const retries = photo.retryCount || 0;
|
||||||
|
if (errorMsg && photo.status !== 'verified' && (retries >= 3 || photo.status === 'failed')) {
|
||||||
const error = document.createElement('div');
|
const error = document.createElement('div');
|
||||||
error.className = 'error-message';
|
error.className = 'error-message';
|
||||||
error.textContent = errorMsg;
|
error.textContent = errorMsg;
|
||||||
|
|||||||
Reference in New Issue
Block a user