diff --git a/src/components/dev/ApiDevTools.tsx b/src/components/dev/ApiDevTools.tsx index aa28839..46a7c93 100644 --- a/src/components/dev/ApiDevTools.tsx +++ b/src/components/dev/ApiDevTools.tsx @@ -10,6 +10,7 @@ interface ApiLog { method: string; url: string; requestBody?: unknown; + requestHeaders?: Record; status?: number; statusText?: string; responseBody?: unknown; @@ -67,12 +68,31 @@ window.fetch = async function (input, init) { requestBody = init?.body; } + // Extract request headers + const requestHeaders: Record = {}; + if (init?.headers) { + if (init.headers instanceof Headers) { + init.headers.forEach((value, key) => { + requestHeaders[key] = value; + }); + } else if (Array.isArray(init.headers)) { + init.headers.forEach(([key, value]) => { + requestHeaders[key] = value; + }); + } else { + Object.entries(init.headers).forEach(([key, value]) => { + if (value) requestHeaders[key] = value; + }); + } + } + addApiLog({ id, timestamp: new Date(), method, url, requestBody, + requestHeaders, }); const start = performance.now(); @@ -266,6 +286,18 @@ export default function ApiDevTools() { )} + {/* Request Headers (collapsible) */} + {selectedLog.requestHeaders && Object.keys(selectedLog.requestHeaders).length > 0 && ( +
+ + Request Headers ({Object.keys(selectedLog.requestHeaders).length}) + +
+                    {JSON.stringify(selectedLog.requestHeaders, null, 2)}
+                  
+
+ )} + {selectedLog.requestBody && (
Request Body