react-native-xenon/lib/module/hooks/useNetworkInterceptor.js

A powerful in-app debugging tool for React Native.

"use strict";

import { useCallback, useEffect, useState } from 'react';
import { useImmer } from 'use-immer';
import { NETWORK_REQUEST_HEADER } from "../core/constants.js";
import { FetchInterceptor, WebSocketInterceptor, XHRInterceptor } from "../interceptors/index.js";
import { NetworkType } from "../types/index.js";
import { keyValueToString } from "../core/utils.js";
const initRequests = new Map();
const xhrInterceptor = new XHRInterceptor();
const fetchInterceptor = new FetchInterceptor();
const webSocketInterceptor = new WebSocketInterceptor();
export default function useNetworkInterceptor({
  autoEnabled,
  includeDomains
}) {
  const joinedIncludeDomains = includeDomains?.join(',') ?? '';
  const [isInterceptorEnabled, setIsInterceptorEnabled] = useState(autoEnabled);
  const [networkRequests, setNetworkRequests] = useImmer(initRequests);
  const isEnabled = () => xhrInterceptor.isInterceptorEnabled && fetchInterceptor.isInterceptorEnabled && webSocketInterceptor.isInterceptorEnabled;
  const clearAllNetworkRequests = () => {
    setNetworkRequests(initRequests);
  };
  const isMatchedDomain = url => {
    if (!includeDomains?.length) return true;
    return includeDomains.some(domain => url.includes(domain));
  };
  const enableHttpInterceptions = useCallback(() => {
    const openCallback = (id, type, method, url) => {
      if (!id) return;
      if (!isMatchedDomain(url)) return;
      setNetworkRequests(draft => {
        draft.set(id, {
          type,
          method,
          url
        });
      });
    };
    const requestHeaderCallback = (id, header, value) => {
      if (!id) return;
      setNetworkRequests(draft => {
        if (!draft.get(id)) return draft;
        const currentHeaderLine = keyValueToString(header, value);
        const fetchRequestHeaderLineRegex = RegExp(keyValueToString(NETWORK_REQUEST_HEADER, NetworkType.Fetch), 'gi');
        const isFetchInXHR = draft.get(id).type === NetworkType.XHR && !!currentHeaderLine.match(fetchRequestHeaderLineRegex);
        if (isFetchInXHR) {
          draft.delete(id);
        } else {
          draft.get(id).requestHeaders ??= new Map();
          draft.get(id).requestHeaders.set(header, value);
        }
      });
    };
    const sendCallback = (id, startTime, data) => {
      if (!id) return;
      setNetworkRequests(draft => {
        if (!draft.get(id)) return draft;
        draft.get(id).startTime = startTime;
        draft.get(id).body = data;
      });
    };
    const headerReceivedCallback = (id, responseContentType, responseSize, responseHeaders) => {
      if (!id) return;
      setNetworkRequests(draft => {
        if (!draft.get(id)) return draft;
        draft.get(id).responseContentType = responseContentType;
        draft.get(id).responseSize = responseSize;
        draft.get(id).responseHeaders = responseHeaders;
      });
    };
    const responseCallback = (id, status, timeout, endTime, response, responseURL, responseType) => {
      if (!id) return;
      setNetworkRequests(draft => {
        if (!draft.get(id)) return draft;
        draft.get(id).status = status;
        draft.get(id).timeout = timeout;
        draft.get(id).endTime = endTime;
        draft.get(id).response = response;
        if (responseURL) draft.get(id).url = responseURL;
        draft.get(id).responseType = responseType;
      });
    };
    xhrInterceptor.set('open', openCallback).set('requestHeader', requestHeaderCallback).set('send', sendCallback).set('headerReceived', headerReceivedCallback).set('response', responseCallback).enableInterception();
    fetchInterceptor.set('open', openCallback).set('requestHeader', requestHeaderCallback).set('send', sendCallback).set('headerReceived', headerReceivedCallback).set('response', responseCallback).enableInterception();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [joinedIncludeDomains, setNetworkRequests]);
  const enableWebSocketInterception = useCallback(() => {
    const connectCallback = (startTime, url, protocols, options, socketId) => {
      if (typeof socketId !== 'number') return;
      if (!isMatchedDomain(url)) return;
      setNetworkRequests(draft => {
        draft.set(`${socketId}`, {
          startTime,
          url,
          type: NetworkType.WS,
          protocols,
          options
        });
      });
    };
    const sendCallback = (data, socketId) => {
      if (typeof socketId !== 'number') return;
      setNetworkRequests(draft => {
        if (!draft.get(`${socketId}`)) return draft;
        draft.get(`${socketId}`).messages ??= '';
        draft.get(`${socketId}`).messages += keyValueToString('SENT', data);
      });
    };
    const closeCallback = (code, reason, socketId) => {
      if (typeof socketId !== 'number') return;
      setNetworkRequests(draft => {
        if (!draft.get(`${socketId}`)) return draft;
        draft.get(`${socketId}`).status = code;
        draft.get(`${socketId}`).closeReason = reason;
      });
    };
    const onOpenCallback = (socketId, endTime) => {
      if (typeof socketId !== 'number') return;
      setNetworkRequests(draft => {
        if (!draft.get(`${socketId}`)) return draft;
        draft.get(`${socketId}`).endTime = endTime;
      });
    };
    const onMessageCallback = (socketId, message) => {
      if (typeof socketId !== 'number') return;
      setNetworkRequests(draft => {
        if (!draft.get(`${socketId}`)) return draft;
        draft.get(`${socketId}`).messages ??= '';
        draft.get(`${socketId}`).messages += keyValueToString('RECEIVED', message);
      });
    };
    const onErrorCallback = (socketId, data) => {
      if (typeof socketId !== 'number') return;
      setNetworkRequests(draft => {
        if (!draft.get(`${socketId}`)) return draft;
        draft.get(`${socketId}`).serverError = data;
      });
    };
    const onCloseCallback = (socketId, data) => {
      if (typeof socketId !== 'number') return;
      setNetworkRequests(draft => {
        if (!draft.get(`${socketId}`)) return draft;
        draft.get(`${socketId}`).serverClose = data;
      });
    };
    webSocketInterceptor.set('connect', connectCallback).set('send', sendCallback).set('close', closeCallback).set('onOpen', onOpenCallback).set('onMessage', onMessageCallback).set('onError', onErrorCallback).set('onClose', onCloseCallback).enableInterception();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [joinedIncludeDomains, setNetworkRequests]);
  const enableInterception = useCallback(() => {
    if (isEnabled()) return;
    enableHttpInterceptions();
    enableWebSocketInterception();
    setIsInterceptorEnabled(true);
  }, [enableHttpInterceptions, enableWebSocketInterception]);
  const disableInterception = useCallback(() => {
    if (!isEnabled()) return;
    xhrInterceptor.disableInterception();
    fetchInterceptor.disableInterception();
    webSocketInterceptor.disableInterception();
    setIsInterceptorEnabled(false);
  }, []);
  useEffect(() => {
    if (autoEnabled) {
      enableInterception();
      return disableInterception;
    }
  }, [autoEnabled, disableInterception, enableInterception]);
  return {
    isInterceptorEnabled,
    enableInterception,
    disableInterception,
    clearAllNetworkRequests,
    networkRequests
  };
}
//# sourceMappingURL=useNetworkInterceptor.js.map