feat: auto-retry uploads when rate limited (v0.13.0)
Backend: rate limiter gains check_with_retry() returning seconds until the next slot opens. Upload 429 responses include retry_after_secs in JSON and a Retry-After header. Frontend: upload queue catches 429 as RateLimitError, resets affected item to pending, schedules processQueue() for the server-reported delay, and shows a live countdown banner in the queue UI. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { queueItems, isProcessing, retryItem, removeItem, clearCompleted } from '$lib/upload-queue';
|
||||
import { queueItems, isProcessing, retryItem, removeItem, clearCompleted, rateLimitRetryAt } from '$lib/upload-queue';
|
||||
import type { QueueItem } from '$lib/upload-queue';
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
@@ -28,6 +28,25 @@
|
||||
|
||||
let items = $derived($queueItems);
|
||||
let hasCompleted = $derived(items.some((i) => i.status === 'done'));
|
||||
|
||||
// Countdown for rate-limit banner
|
||||
let countdown = $state(0);
|
||||
|
||||
$effect(() => {
|
||||
const retryAt = $rateLimitRetryAt;
|
||||
if (!retryAt) {
|
||||
countdown = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
countdown = Math.ceil((retryAt - Date.now()) / 1000);
|
||||
const interval = setInterval(() => {
|
||||
countdown = Math.ceil((retryAt - Date.now()) / 1000);
|
||||
if (countdown <= 0) clearInterval(interval);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if items.length > 0}
|
||||
@@ -49,6 +68,12 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $rateLimitRetryAt && countdown > 0}
|
||||
<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800">
|
||||
Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ul class="divide-y divide-gray-100">
|
||||
{#each items as item (item.id)}
|
||||
<li class="px-4 py-3">
|
||||
|
||||
@@ -18,6 +18,9 @@ export interface QueueItem {
|
||||
export const queueItems = writable<QueueItem[]>([]);
|
||||
export const isProcessing = writable(false);
|
||||
|
||||
/** Set to the timestamp (ms) at which the rate-limit lifts, or null when clear. */
|
||||
export const rateLimitRetryAt = writable<number | null>(null);
|
||||
|
||||
const DB_NAME = 'eventsnap-uploads';
|
||||
const STORE_NAME = 'queue';
|
||||
|
||||
@@ -35,6 +38,14 @@ async function getDb(): Promise<IDBPDatabase> {
|
||||
return db;
|
||||
}
|
||||
|
||||
class RateLimitError extends Error {
|
||||
retryAfterSecs: number;
|
||||
constructor(secs: number) {
|
||||
super('rate_limited');
|
||||
this.retryAfterSecs = secs;
|
||||
}
|
||||
}
|
||||
|
||||
export async function loadQueue(): Promise<void> {
|
||||
const database = await getDb();
|
||||
const all = await database.getAll(STORE_NAME);
|
||||
@@ -136,7 +147,21 @@ async function processQueue(): Promise<void> {
|
||||
const next = items.find((item) => item.status === 'pending');
|
||||
if (!next) break;
|
||||
|
||||
await uploadItem(next.id);
|
||||
try {
|
||||
await uploadItem(next.id);
|
||||
} catch (e) {
|
||||
if (e instanceof RateLimitError) {
|
||||
// Keep all pending items as-is; schedule queue resume when limit lifts
|
||||
const retryAt = Date.now() + e.retryAfterSecs * 1000;
|
||||
rateLimitRetryAt.set(retryAt);
|
||||
setTimeout(() => {
|
||||
rateLimitRetryAt.set(null);
|
||||
processQueue();
|
||||
}, e.retryAfterSecs * 1000);
|
||||
break;
|
||||
}
|
||||
// Other errors are already handled inside uploadItem (marked as 'error')
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
processing = false;
|
||||
@@ -148,7 +173,6 @@ async function uploadItem(id: string): Promise<void> {
|
||||
const database = await getDb();
|
||||
const entry = await database.get(STORE_NAME, id);
|
||||
if (!entry || !entry.blob) {
|
||||
// No blob — mark as error
|
||||
updateItemStatus(id, 'error', 'Datei nicht gefunden.');
|
||||
return;
|
||||
}
|
||||
@@ -184,6 +208,14 @@ async function uploadItem(id: string): Promise<void> {
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
resolve();
|
||||
} else if (xhr.status === 429) {
|
||||
try {
|
||||
const body = JSON.parse(xhr.responseText);
|
||||
const secs = typeof body.retry_after_secs === 'number' ? body.retry_after_secs : 60;
|
||||
reject(new RateLimitError(secs));
|
||||
} catch {
|
||||
reject(new RateLimitError(60));
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const body = JSON.parse(xhr.responseText);
|
||||
@@ -205,6 +237,13 @@ async function uploadItem(id: string): Promise<void> {
|
||||
await database.put(STORE_NAME, entry);
|
||||
updateItemStatus(id, 'done');
|
||||
} catch (e) {
|
||||
if (e instanceof RateLimitError) {
|
||||
// Reset to pending so it will be retried when the queue resumes
|
||||
entry.status = 'pending';
|
||||
await database.put(STORE_NAME, entry);
|
||||
updateItemStatus(id, 'pending');
|
||||
throw e; // Propagate to processQueue for scheduling
|
||||
}
|
||||
const msg = e instanceof Error ? e.message : 'Upload fehlgeschlagen.';
|
||||
entry.status = 'error';
|
||||
entry.error = msg;
|
||||
@@ -224,7 +263,7 @@ function updateItemStatus(
|
||||
? {
|
||||
...item,
|
||||
status,
|
||||
progress: status === 'done' ? 100 : status === 'error' ? item.progress : item.progress,
|
||||
progress: status === 'done' ? 100 : status === 'pending' ? 0 : item.progress,
|
||||
error
|
||||
}
|
||||
: item
|
||||
|
||||
Reference in New Issue
Block a user