spec(frontend/timeline): ノートのJSON fetchに失敗した場合、リトライできるように

packages/frontend/src/components/MkTimeline.vue

@@ -70,6 +70,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
 import { generateClientTransactionId } from '@/utility/misskey-api.js';
+import { retryWithFibonacciBackoff } from '@/utility/retry.js';
 
 const props = withDefaults(defineProps<{
 	src: TimelinePageSrc | AllTimelineType;
@@ -118,20 +119,53 @@ const pagingComponent = useTemplateRef('pagingComponent');
 let tlNotesCount = 0;
 const notVisibleNoteData = new Array<object>();
 
+const pendingNoteFetches = new Map<string, Promise<void>>();
+
+const fetchNoteJson = async (id: string) => {
+	const res = await window.fetch(`/notes/${id}.json`, {
+		method: 'GET',
+		credentials: 'include',
+		headers: {
+			'Authorization': 'anonymous',
+			'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
+		},
+	});
+	if (!res.ok) {
+		throw new Error(`Failed to fetch note: ${res.status}`);
+	}
+	return res.json();
+};
+
+const scheduleMinimizedNoteRetry = (data: { id: string }) => {
+	if (pendingNoteFetches.has(data.id)) return;
+
+	const retryPromise = retryWithFibonacciBackoff(() => fetchNoteJson(data.id), {
+		maxAttempts: 3,
+		initialDelayMs: 100,
+	}).then((noteData) => {
+		void prepend(deepMerge(data, noteData));
+	}).catch((error) => {
+		console.error('Failed to fetch minimized note after retries:', data.id, error);
+	}).finally(() => {
+		pendingNoteFetches.delete(data.id);
+	});
+
+	pendingNoteFetches.set(data.id, retryPromise);
+};
+
 async function fulfillNoteData(data) {
 	// チェックするプロパティはなんでも良い
 	// minimizeが有効でid以外が存在しない場合は取得する
 	if (!data.visibility) {
-		const res = await window.fetch(`/notes/${data.id}.json`, {
-			method: 'GET',
-			credentials: 'include',
-			headers: {
-				'Authorization': 'anonymous',
-				'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
-			},
-		});
-		if (!res.ok) return null;
-		return deepMerge(data, await res.json());
+		if (pendingNoteFetches.has(data.id)) return null;
+
+		try {
+			const noteData = await fetchNoteJson(data.id);
+			return deepMerge(data, noteData);
+		} catch {
+			scheduleMinimizedNoteRetry(data);
+			return null;
+		}
 	}
 
 	return data;

packages/frontend/src/utility/retry.ts

@@ -0,0 +1,33 @@
+export type RetryOptions = {
+	maxAttempts: number;
+	initialDelayMs: number;
+};
+
+const sleep = (ms: number) => new Promise<void>(resolve => window.setTimeout(resolve, ms));
+
+export async function retryWithFibonacciBackoff<T>(
+	task: () => Promise<T>,
+	options: RetryOptions,
+): Promise<T> {
+	let nextDelayMultiplier = 1;
+	let followingDelayMultiplier = 2;
+
+	for (let attempt = 1; attempt <= options.maxAttempts; attempt++) {
+		try {
+			return await task();
+		} catch (error) {
+			if (attempt >= options.maxAttempts) {
+				throw error;
+			}
+
+			const delay = nextDelayMultiplier * options.initialDelayMs;
+			await sleep(delay);
+			[nextDelayMultiplier, followingDelayMultiplier] = [
+				followingDelayMultiplier,
+				nextDelayMultiplier + followingDelayMultiplier,
+			];
+		}
+	}
+
+	throw new Error('Retry attempts exhausted.');
+}