fix: log ReadableStream responses as text/json (#1622)

Co-authored-by: Guillaume Esquevin <[email protected]>
Co-authored-by: Artem Zakharchenko <[email protected]>

src/setupWorker/start/createFallbackRequestListener.ts

@@ -48,10 +48,10 @@ export function createFallbackRequestListener(
         },
         onMockedResponse(_, { handler, publicRequest, parsedRequest }) {
           if (!options.quiet) {
-            context.emitter.once('response:mocked', (response) => {
+            context.emitter.once('response:mocked', async (response) => {
               handler.log(
                 publicRequest,
-                serializeResponse(response),
+                await serializeResponse(response),
                 parsedRequest,
               )
             })

src/setupWorker/start/createRequestListener.ts

@@ -73,10 +73,10 @@ export const createRequestListener = (
             )
 
             if (!options.quiet) {
-              context.emitter.once('response:mocked', (response) => {
+              context.emitter.once('response:mocked', async (response) => {
                 handler.log(
                   publicRequest,
-                  serializeResponse(response),
+                  await serializeResponse(response),
                   parsedRequest,
                 )
               })

src/utils/logging/prepareResponse.test.ts

@@ -1,7 +1,7 @@
 import { prepareResponse } from './prepareResponse'
 
-test('parses a JSON response body given a "Content-Type:*/json" header', () => {
-  const res = prepareResponse({
+test('parses a JSON response body given a "Content-Type:*/json" header', async () => {
+  const res = await prepareResponse({
     status: 200,
     statusText: 'OK',
     headers: {

src/utils/logging/prepareResponse.ts

@@ -5,12 +5,14 @@ import { parseBody } from '../request/parseBody'
 /**
  * Formats a mocked response for introspection in the browser's console.
  */
-export function prepareResponse(res: SerializedResponse<any>) {
+export function prepareResponse(res: SerializedResponse<string>) {
   const responseHeaders = objectToHeaders(res.headers)
 
+  // Parse a response JSON body for preview in the logs
+  const parsedBody = parseBody(res.body, responseHeaders)
+
   return {
     ...res,
-    // Parse a response JSON body for preview in the logs
-    body: parseBody(res.body, responseHeaders),
+    body: parsedBody,
   }
 }

src/utils/logging/serializeResponse.ts

@@ -1,11 +1,16 @@
 import { flattenHeadersObject, headersToObject } from 'headers-polyfill'
 import type { SerializedResponse } from '../../setupWorker/glossary'
 
-export function serializeResponse(source: Response): SerializedResponse<any> {
+export async function serializeResponse(
+  response: Response,
+): Promise<SerializedResponse<string>> {
   return {
-    status: source.status,
-    statusText: source.statusText,
-    headers: flattenHeadersObject(headersToObject(source.headers)),
-    body: source.body,
+    status: response.status,
+    statusText: response.statusText,
+    headers: flattenHeadersObject(headersToObject(response.headers)),
+    // Serialize the response body to a string
+    // so it's easier to process further down the chain in "prepareResponse" (browser-only)
+    // and "parseBody" (ambiguous).
+    body: await response.text(),
   }
 }