feat: Add request and response bodies

Author: Nicholas Roscino

src/McpResponse.ts

@@ -12,8 +12,11 @@ import type {ResourceType} from 'puppeteer-core';
 import {formatConsoleEvent} from './formatters/consoleFormatter.js';
 import {
   getFormattedHeaderValue,
+  getFormattedResponseBody,
+  getFormattedRequestBody,
   getShortDescriptionForRequest,
   getStatusFromRequest,
+  BODY_CONTEXT_SIZE_LIMIT,
 } from './formatters/networkFormatter.js';
 import {formatA11ySnapshot} from './formatters/snapshotFormatter.js';
 import type {McpContext} from './McpContext.js';
@@ -137,13 +140,13 @@ export class McpResponse implements Response {
       }
     }
 
-    return this.format(toolName, context);
+    return await this.format(toolName, context);
   }
 
-  format(
+  async format(
     toolName: string,
     context: McpContext,
-  ): Array<TextContent | ImageContent> {
+  ): Promise<Array<TextContent | ImageContent>> {
     const response = [`# ${toolName} response`];
     for (const line of this.#textResponseLines) {
       response.push(line);
@@ -192,7 +195,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
       }
     }
 
-    response.push(...this.#getIncludeNetworkRequestsData(context));
+    response.push(...(await this.#getIncludeNetworkRequestsData(context)));
 
     if (this.#networkRequestsOptions?.include) {
       let requests = context.getNetworkRequests();
@@ -272,7 +275,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
     };
   }
 
-  #getIncludeNetworkRequestsData(context: McpContext): string[] {
+  async #getIncludeNetworkRequestsData(context: McpContext): Promise<string[]> {
     const response: string[] = [];
     const url = this.#attachedNetworkRequestUrl;
     if (!url) {
@@ -286,12 +289,30 @@ Call ${handleDialog.name} to handle it before continuing.`);
       response.push(line);
     }
 
+    const formattedRequestData = await getFormattedRequestBody(
+      '### Request body',
+      httpRequest,
+      BODY_CONTEXT_SIZE_LIMIT,
+    );
+    if (formattedRequestData.length > 0) {
+      response.push(formattedRequestData);
+    }
+
     const httpResponse = httpRequest.response();
     if (httpResponse) {
       response.push(`### Response Headers`);
       for (const line of getFormattedHeaderValue(httpResponse.headers())) {
         response.push(line);
       }
+
+      const formattedResponseData = await getFormattedResponseBody(
+        '### Response body',
+        httpResponse,
+        BODY_CONTEXT_SIZE_LIMIT,
+      );
+      if (formattedResponseData.length > 0) {
+        response.push(formattedResponseData);
+      }
     }
 
     const httpFailure = httpRequest.failure();

src/formatters/networkFormatter.ts

@@ -4,7 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type {HTTPRequest} from 'puppeteer-core';
+import {isUtf8} from 'node:buffer';
+
+import type {HTTPRequest, HTTPResponse} from 'puppeteer-core';
+
+export const BODY_CONTEXT_SIZE_LIMIT = 10000;
 
 export function getShortDescriptionForRequest(request: HTTPRequest): string {
   return `${request.url()} ${request.method()} ${getStatusFromRequest(request)}`;
@@ -37,3 +41,63 @@ export function getFormattedHeaderValue(
   }
   return response;
 }
+
+export async function getFormattedResponseBody(
+  title: string,
+  httpResponse: HTTPResponse,
+  sizeLimit: number,
+): Promise<string> {
+  try {
+    const responseBuffer = await httpResponse.buffer();
+
+    if (isUtf8(responseBuffer)) {
+      const responseAsTest = responseBuffer.toString('utf-8');
+
+      if (responseAsTest.length === 0) {
+        return `${title}\n<empty response>`;
+      }
+
+      return `${title}\n${getSizeLimitedString(responseAsTest, sizeLimit)}`;
+    }
+
+    return `${title}\n<binary data>`;
+  } catch {
+    // buffer() call might fail with CDP exception, in this case we don't print anything in the context
+    return '';
+  }
+}
+
+export async function getFormattedRequestBody(
+  title: string,
+  httpRequest: HTTPRequest,
+  sizeLimit: number,
+): Promise<string> {
+  if (httpRequest.hasPostData()) {
+    const data = httpRequest.postData();
+
+    if (data) {
+      return `${title}\n${getSizeLimitedString(data, sizeLimit)}`;
+    }
+
+    try {
+      const fetchData = await httpRequest.fetchPostData();
+
+      if (fetchData) {
+        return `${title}\n${getSizeLimitedString(fetchData, sizeLimit)}`;
+      }
+    } catch {
+      // fetchPostData() call might fail with CDP exception, in this case we don't print anything in the context
+      return '';
+    }
+  }
+
+  return '';
+}
+
+function getSizeLimitedString(text: string, sizeLimit: number) {
+  if (text.length > sizeLimit) {
+    return `${text.substring(0, sizeLimit) + '... <truncated>'}`;
+  }
+
+  return `${text}`;
+}