Create a fetch wrapper that allows logging input/output.

fetch-inpector.ts

export interface FetchInfo {
  uri: RequestInfo;
  init: RequestInit;
  res?: unknown;
  text?: string;
  error?: unknown;
}

function defaultLogger({uri, init, text}: FetchInfo): void {
  console.info({uri, text, init});
}

/**
 * Create a fetch wrapper that allows debugging.
 *
 * const fetch = createInspectedFetch(info => console.info(info.text));
 */
export function createInspectedFetch(log = defaultLogger, fetchFunc = fetch) {
  return (uri: RequestInfo, init: RequestInit) =>
    fetchFunc(uri, init)
      .then(res => {
        return res.text().then(text => {
          log({uri, init, res, text});
          return {
            ...res,
            text: () => Promise.resolve(text),
            json: () => Promise.resolve(JSON.parse(text)),
          };
        });
      })
      .catch(error => {
        log({uri, init, error});
        return error;
      });
}