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:
2026-02-07 21:11:21 -06:00
parent 5f354bb5fc
commit 06e90bbe4e
2 changed files with 11 additions and 11 deletions

View File

@@ -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;
} }

View File

@@ -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;