diff --git a/examples/dogfooding/index.html b/examples/dogfooding/index.html index db10c9a..d9682e7 100644 --- a/examples/dogfooding/index.html +++ b/examples/dogfooding/index.html @@ -34,6 +34,10 @@ 0 Received (Others) +
+ 0 + Failed to Send +
diff --git a/examples/dogfooding/src/index.ts b/examples/dogfooding/src/index.ts index 5d91c18..1231c4f 100644 --- a/examples/dogfooding/src/index.ts +++ b/examples/dogfooding/src/index.ts @@ -16,6 +16,7 @@ import { incrementSentByMe, incrementReceivedMine, incrementReceivedOthers, + incrementFailedToSend, addMessageToLog, renderMessages, getSearchTerm, @@ -67,9 +68,33 @@ async function initializeApp() { addMessageToLog(chatMessage, 'sent'); } else { console.warn(`Failed to send message ${i + 1} (ID: ${chatMessage.id}):`, result.failures); + const failureReason = result.failures.length > 0 + ? String(result.failures[0].error) || 'Unknown error' + : 'No peers available'; + const failedPeer = result.failures.length > 0 + ? result.failures[0].peerId?.toString() + : undefined; + + const failedMessage: ChatMessage = { + ...chatMessage, + failureInfo: { + error: failureReason, + peer: failedPeer + } + }; + incrementFailedToSend(); + addMessageToLog(failedMessage, 'failed'); } } catch (error) { console.error(`Error sending message ${i + 1} (ID: ${chatMessage.id}):`, error); + const failedMessage: ChatMessage = { + ...chatMessage, + failureInfo: { + error: String(error) || 'Unknown error' + } + }; + incrementFailedToSend(); + addMessageToLog(failedMessage, 'failed'); } await new Promise(resolve => setTimeout(resolve, 100)); } diff --git a/examples/dogfooding/src/message-service.ts b/examples/dogfooding/src/message-service.ts index bc1539e..3e68b53 100644 --- a/examples/dogfooding/src/message-service.ts +++ b/examples/dogfooding/src/message-service.ts @@ -13,6 +13,10 @@ export interface ChatMessage { timestamp: number; senderPeerId: string; content: string; + failureInfo?: { + error: string; + peer?: string; + }; } export function encodeMessage(content: string): Uint8Array { diff --git a/examples/dogfooding/src/ui-manager.ts b/examples/dogfooding/src/ui-manager.ts index 4c0dcc0..b545628 100644 --- a/examples/dogfooding/src/ui-manager.ts +++ b/examples/dogfooding/src/ui-manager.ts @@ -6,10 +6,12 @@ const receivedOthersCountEl = document.getElementById("receivedOthersCount") as const peerIdDisplayEl = document.getElementById("peerIdDisplay") as HTMLSpanElement; const messageListEl = document.getElementById("messageList") as HTMLDivElement; const searchInputEl = document.getElementById("searchInput") as HTMLInputElement; +const failedToSendCountEl = document.getElementById("failedToSendCount") as HTMLSpanElement; let sentByMe = 0; let receivedMine = 0; let receivedOthers = 0; +let failedToSend = 0; let currentMessages: ChatMessage[] = []; let currentPeerId: string | undefined; @@ -36,7 +38,12 @@ export function incrementReceivedOthers() { if (receivedOthersCountEl) receivedOthersCountEl.textContent = receivedOthers.toString(); } -export function addMessageToLog(message: ChatMessage, type: 'sent' | 'received-mine' | 'received-other') { +export function incrementFailedToSend() { + failedToSend++; + if (failedToSendCountEl) failedToSendCountEl.textContent = failedToSend.toString(); +} + +export function addMessageToLog(message: ChatMessage, type: 'sent' | 'received-mine' | 'received-other' | 'failed') { currentMessages.push(message); renderMessages(); } @@ -66,7 +73,12 @@ export function renderMessages(filterText?: string) { let typeClass = ''; let senderPrefix = ''; - if (message.senderPeerId === currentPeerId) { + if (message.failureInfo) { + typeClass = 'failed'; + senderPrefix = 'Me (Failed)'; + item.style.backgroundColor = '#ffebee'; + item.style.borderLeft = '4px solid #f44336'; + } else if (message.senderPeerId === currentPeerId) { typeClass = 'sent'; senderPrefix = 'Me'; } else { @@ -96,6 +108,17 @@ export function renderMessages(filterText?: string) { item.appendChild(senderInfoP); item.appendChild(contentP); item.appendChild(timestampP); + + // Add failure information if present + if (message.failureInfo) { + const failureInfoP = document.createElement("p"); + failureInfoP.classList.add("failure-info"); + failureInfoP.style.color = '#d32f2f'; + failureInfoP.style.fontWeight = 'bold'; + failureInfoP.textContent = `Failed: ${message.failureInfo.error}${message.failureInfo.peer ? ` (Peer: ${message.failureInfo.peer.substring(0, 12)}...)` : ''}`; + item.appendChild(failureInfoP); + } + messageListEl.appendChild(item); }); }