Allow logging request response content in onFetchRequest and onFetchResponse

[prevostc]

For debugging purposes, I'm using a logger. I would like to log every outgoing requests and incoming response.

Something like:

import { HttpTransport, HttpTransportConfig, http } from 'viem';
import { rootLogger } from '../util/logger';

const logger = rootLogger.child({ module: 'rpc-transport' });

export function loggingHttpTransport(
    url?: string,
    config: HttpTransportConfig = {}
): HttpTransport {
    return http(url, {
        onFetchRequest: async request => {
            logger.trace({ msg: 'rpc.http: request', data: await request.json() });
        },
        onFetchResponse: async response => {
            logger.debug({ msg: 'rpc.http: response', data: await response.json() });
        },
        ...config,
    });
}

However, fetch response content can only be consumed once. Consuming the response content more than once throws an error: Body is unusable.

There is a way around this using the monkeypatch below, but a native solution for this would be great.

        onFetchRequest: async request => {
            const content = await request.json();
            logger.trace({ msg: 'rpc.http: request', data: content });
            // @ts-ignore: avoid `Body is unusable` error
            request.json = async () => content;
        },
        onFetchResponse: async response => {
            const content = await response.json();
            logger.debug({ msg: 'rpc.http: response', data: content });
            // @ts-ignore: avoid `Body is unusable` error
            response.json = async () => content;
        },

Possible solutions:

• add onRequestBody: (body: object) => ... and onResponseBody: (body: object) => ... hooks
• somehow allow consuming the body in onFetchRequest and onFetchResponse, although I have no idea if that's possible
• add a logger system in viem and use it accross the library. Someting like ({logger: ILogger}). This logger could be used to solve Feature: add callbacks for 'open/connect', 'close', 'error', 'message' socket events #2102 as well

[tmm]

You can clone the response.