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