@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/useNetworkActivityDevTools.cjs

@@ -0,0 +1,759 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const pluginBridge = require("@rozenite/plugin-bridge");
+const nanoevents = require("nanoevents");
+const reactNative = require("react-native");
+const WebSocketInterceptor = require("react-native/Libraries/WebSocket/WebSocketInterceptor");
+const eventSource = require("./event-source.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const WebSocketInterceptor__default = /* @__PURE__ */ _interopDefault(WebSocketInterceptor);
+function getHttpHeaderValue(headers, name) {
+  const lowerName = name.toLowerCase();
+  for (const key in headers) {
+    if (key.toLowerCase() === lowerName) {
+      return headers[key];
+    }
+  }
+  return void 0;
+}
+const getContentType = (request) => {
+  const responseHeaders = request.responseHeaders;
+  const responseType = request.responseType;
+  const contentType = getHttpHeaderValue(responseHeaders || {}, "content-type");
+  if (contentType) {
+    return contentType.split(";")[0].trim();
+  }
+  switch (responseType) {
+    case "arraybuffer":
+    case "blob":
+      return "application/octet-stream";
+    case "text":
+    case "":
+      return "text/plain";
+    case "json":
+      return "application/json";
+    case "document":
+      return "text/html";
+  }
+};
+const REQUEST_TTL = 1e3 * 60 * 5;
+const getNetworkRequestsRegistry = () => {
+  const registry = /* @__PURE__ */ new Map();
+  const trimRegistry = () => {
+    const now = Date.now();
+    registry.forEach((entry) => {
+      if (now - entry.sentAt < REQUEST_TTL) {
+        return;
+      }
+      registry.delete(entry.id);
+    });
+  };
+  const addEntry = (id, request) => {
+    trimRegistry();
+    registry.set(id, {
+      id,
+      request,
+      sentAt: Date.now()
+    });
+  };
+  const getEntry = (id) => {
+    var _a;
+    return ((_a = registry.get(id)) == null ? void 0 : _a.request) ?? null;
+  };
+  const clear = () => {
+    registry.clear();
+  };
+  return {
+    addEntry,
+    getEntry,
+    clear
+  };
+};
+const originalXHROpen = XMLHttpRequest.prototype.open;
+const originalXHRSend = XMLHttpRequest.prototype.send;
+const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+let openCallback;
+let sendCallback;
+let requestHeaderCallback;
+let headerReceivedCallback;
+let responseCallback;
+let isInterceptorEnabled$1 = false;
+const XHRInterceptor = {
+  /**
+   * Invoked before XMLHttpRequest.open(...) is called.
+   */
+  setOpenCallback(callback) {
+    openCallback = callback;
+  },
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setSendCallback(callback) {
+    sendCallback = callback;
+  },
+  /**
+   * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
+   */
+  setHeaderReceivedCallback(callback) {
+    headerReceivedCallback = callback;
+  },
+  /**
+   * Invoked after xhr's readyState becomes xhr.DONE.
+   */
+  setResponseCallback(callback) {
+    responseCallback = callback;
+  },
+  /**
+   * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
+   */
+  setRequestHeaderCallback(callback) {
+    requestHeaderCallback = callback;
+  },
+  isInterceptorEnabled() {
+    return isInterceptorEnabled$1;
+  },
+  enableInterception() {
+    if (isInterceptorEnabled$1) {
+      return;
+    }
+    XMLHttpRequest.prototype.open = function(method, url) {
+      if (openCallback) {
+        openCallback(method, url, this);
+      }
+      originalXHROpen.apply(this, arguments);
+    };
+    XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
+      if (requestHeaderCallback) {
+        requestHeaderCallback(header, value, this);
+      }
+      originalXHRSetRequestHeader.apply(this, arguments);
+    };
+    XMLHttpRequest.prototype.send = function(data) {
+      if (sendCallback) {
+        sendCallback(data, this);
+      }
+      if (this.addEventListener) {
+        this.addEventListener(
+          "readystatechange",
+          () => {
+            if (!isInterceptorEnabled$1) {
+              return;
+            }
+            if (this.readyState === this.HEADERS_RECEIVED) {
+              const contentTypeString = this.getResponseHeader("Content-Type");
+              const contentLengthString = this.getResponseHeader("Content-Length");
+              let responseContentType, responseSize;
+              if (contentTypeString) {
+                responseContentType = contentTypeString.split(";")[0];
+              }
+              if (contentLengthString) {
+                responseSize = parseInt(contentLengthString, 10);
+              }
+              if (headerReceivedCallback) {
+                headerReceivedCallback(
+                  responseContentType,
+                  responseSize,
+                  this.getAllResponseHeaders(),
+                  this
+                );
+              }
+            }
+            if (this.readyState === this.DONE) {
+              if (responseCallback) {
+                responseCallback(
+                  this.status,
+                  this.timeout,
+                  this.response,
+                  this.responseURL,
+                  this.responseType,
+                  this
+                );
+              }
+            }
+          },
+          false
+        );
+      }
+      originalXHRSend.apply(this, arguments);
+    };
+    isInterceptorEnabled$1 = true;
+  },
+  // Unpatch XMLHttpRequest methods and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled$1) {
+      return;
+    }
+    isInterceptorEnabled$1 = false;
+    XMLHttpRequest.prototype.send = originalXHRSend;
+    XMLHttpRequest.prototype.open = originalXHROpen;
+    XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
+    responseCallback = null;
+    openCallback = null;
+    sendCallback = null;
+    headerReceivedCallback = null;
+    requestHeaderCallback = null;
+  }
+};
+const networkRequestsRegistry = getNetworkRequestsRegistry();
+const getResponseSize = (request) => {
+  if (typeof request.response === "object") {
+    return request.response.size;
+  }
+  return request.response.length || 0;
+};
+const getResponseBody = async (request) => {
+  const responseType = request.responseType;
+  if (responseType === "" || responseType === "text") {
+    return request.responseText;
+  }
+  if (responseType === "blob") {
+    const contentType = request.getResponseHeader("Content-Type") || "";
+    if (contentType.startsWith("text/") || contentType.startsWith("application/json")) {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          resolve(reader.result);
+        };
+        reader.readAsText(request.response);
+      });
+    }
+  }
+  return null;
+};
+const getInitiatorFromStack = () => {
+  try {
+    const stack = new Error().stack;
+    if (!stack) {
+      return { type: "other" };
+    }
+    const line = stack.split("\n")[9];
+    const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
+    if (match) {
+      return {
+        type: "script",
+        url: match[2],
+        lineNumber: parseInt(match[3]),
+        columnNumber: parseInt(match[4])
+      };
+    }
+  } catch {
+  }
+  return { type: "other" };
+};
+const READY_STATE_HEADERS_RECEIVED = 2;
+const getNetworkInspector = (pluginClient) => {
+  const generateRequestId = () => {
+    return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  };
+  const handleRequestSend = (data, request) => {
+    const sendTime = Date.now();
+    const requestId = generateRequestId();
+    request._rozeniteRequestId = requestId;
+    const initiator = getInitiatorFromStack();
+    networkRequestsRegistry.addEntry(requestId, request);
+    let ttfb = 0;
+    pluginClient.send("request-sent", {
+      requestId,
+      timestamp: sendTime,
+      request: {
+        url: request._url,
+        method: request._method,
+        headers: request._headers,
+        postData: data
+      },
+      type: "XHR",
+      initiator
+    });
+    request.addEventListener("readystatechange", () => {
+      if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
+        ttfb = Date.now() - sendTime;
+      }
+    });
+    request.addEventListener("load", () => {
+      pluginClient.send("response-received", {
+        requestId,
+        timestamp: Date.now(),
+        type: "XHR",
+        response: {
+          url: request._url,
+          status: request.status,
+          statusText: request.statusText,
+          headers: request.responseHeaders || {},
+          contentType: getContentType(request),
+          size: getResponseSize(request),
+          responseTime: Date.now()
+        }
+      });
+    });
+    request.addEventListener("loadend", () => {
+      pluginClient.send("request-completed", {
+        requestId,
+        timestamp: Date.now(),
+        duration: Date.now() - sendTime,
+        size: getResponseSize(request),
+        ttfb
+      });
+    });
+    request.addEventListener("error", () => {
+      pluginClient.send("request-failed", {
+        requestId,
+        timestamp: Date.now(),
+        type: "XHR",
+        error: "Failed",
+        canceled: false
+      });
+    });
+    request.addEventListener("abort", () => {
+      pluginClient.send("request-failed", {
+        requestId,
+        timestamp: Date.now(),
+        type: "XHR",
+        error: "Aborted",
+        canceled: true
+      });
+    });
+  };
+  const enable = () => {
+    XHRInterceptor.disableInterception();
+    XHRInterceptor.setSendCallback(handleRequestSend);
+    XHRInterceptor.enableInterception();
+  };
+  const disable = () => {
+    XHRInterceptor.disableInterception();
+    networkRequestsRegistry.clear();
+  };
+  const isEnabled = () => {
+    return XHRInterceptor.isInterceptorEnabled();
+  };
+  const enableSubscription = pluginClient.onMessage("network-enable", () => {
+    enable();
+  });
+  const disableSubscription = pluginClient.onMessage("network-disable", () => {
+    disable();
+  });
+  const handleBodySubscription = pluginClient.onMessage(
+    "get-response-body",
+    async ({ requestId }) => {
+      const request = networkRequestsRegistry.getEntry(requestId);
+      if (!request) {
+        return;
+      }
+      const body = await getResponseBody(request);
+      pluginClient.send("response-body", {
+        requestId,
+        body
+      });
+    }
+  );
+  const dispose = () => {
+    disable();
+    enableSubscription.remove();
+    disableSubscription.remove();
+    handleBodySubscription.remove();
+  };
+  return {
+    enable,
+    disable,
+    isEnabled,
+    dispose
+  };
+};
+const getWebSocketInterceptor = () => {
+  if (reactNative.Platform.constants.reactNativeVersion.minor >= 79) {
+    return WebSocketInterceptor__default.default;
+  } else {
+    const WebSocketInterceptorPreRN079 = WebSocketInterceptor__default.default;
+    return {
+      ...WebSocketInterceptorPreRN079,
+      setOnMessageCallback: (callback) => {
+        WebSocketInterceptorPreRN079.setOnMessageCallback((socketId, data) => {
+          callback(data, socketId);
+        });
+      },
+      setOnCloseCallback: (callback) => {
+        WebSocketInterceptorPreRN079.setOnCloseCallback((error, socketId) => {
+          callback(socketId, error);
+        });
+      },
+      setOnErrorCallback: (callback) => {
+        WebSocketInterceptorPreRN079.setOnErrorCallback((error, socketId) => {
+          callback(socketId, error);
+        });
+      }
+    };
+  }
+};
+const getWebSocketInspector = () => {
+  const eventEmitter = nanoevents.createNanoEvents();
+  const socketUrlMap = /* @__PURE__ */ new Map();
+  const webSocketInterceptor = getWebSocketInterceptor();
+  return {
+    enable: () => {
+      webSocketInterceptor.setConnectCallback(
+        (url, protocols, options, socketId) => {
+          socketUrlMap.set(socketId, url);
+          const event = {
+            type: "websocket-connect",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            protocols,
+            options
+          };
+          eventEmitter.emit("websocket-connect", event);
+        }
+      );
+      webSocketInterceptor.setCloseCallback(
+        (code, reason, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-close",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            code: code || 0,
+            reason: reason || void 0
+          };
+          eventEmitter.emit("websocket-close", event);
+          socketUrlMap.delete(socketId);
+        }
+      );
+      webSocketInterceptor.setOnMessageCallback(
+        (data, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-message-received",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            data,
+            messageType: typeof data === "string" ? "text" : "binary"
+          };
+          eventEmitter.emit("websocket-message-received", event);
+        }
+      );
+      webSocketInterceptor.setOnErrorCallback(
+        (error, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-error",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            error
+          };
+          eventEmitter.emit("websocket-error", event);
+        }
+      );
+      webSocketInterceptor.setSendCallback((data, socketId) => {
+        const url = socketUrlMap.get(socketId);
+        if (!url) {
+          return;
+        }
+        const event = {
+          type: "websocket-message-sent",
+          url,
+          socketId,
+          timestamp: Date.now(),
+          data,
+          messageType: typeof data === "string" ? "text" : "binary"
+        };
+        eventEmitter.emit("websocket-message-sent", event);
+      });
+      webSocketInterceptor.setOnOpenCallback((socketId) => {
+        const url = socketUrlMap.get(socketId);
+        if (!url) {
+          return;
+        }
+        const event = {
+          type: "websocket-open",
+          url,
+          socketId,
+          timestamp: Date.now()
+        };
+        eventEmitter.emit("websocket-open", event);
+      });
+      webSocketInterceptor.setOnCloseCallback(
+        (error, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-close",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            code: error.code,
+            reason: error.reason
+          };
+          eventEmitter.emit("websocket-close", event);
+          socketUrlMap.delete(socketId);
+        }
+      );
+      webSocketInterceptor.enableInterception();
+    },
+    disable: () => {
+      webSocketInterceptor.disableInterception();
+    },
+    isEnabled: () => webSocketInterceptor.isInterceptorEnabled(),
+    dispose: () => {
+      eventEmitter.events = {};
+      socketUrlMap.clear();
+    },
+    on: (event, callback) => eventEmitter.on(event, callback)
+  };
+};
+let connectCallback;
+let messageCallback;
+let errorCallback;
+let openEventCallback;
+let closeCallback;
+let isInterceptorEnabled = false;
+const eventSourceClass = eventSource.getEventSource();
+const originalOpen = eventSourceClass.prototype.open;
+const SSEInterceptor = {
+  /**
+   * Invoked when EventSource.open() is called (connection attempt starting).
+   */
+  setConnectCallback(callback) {
+    connectCallback = callback;
+  },
+  /**
+   * Invoked when a message event is received.
+   */
+  setMessageCallback(callback) {
+    messageCallback = callback;
+  },
+  /**
+   * Invoked when an error event occurs.
+   */
+  setErrorCallback(callback) {
+    errorCallback = callback;
+  },
+  /**
+   * Invoked when the connection is successfully opened (open event fired).
+   */
+  setOpenEventCallback(callback) {
+    openEventCallback = callback;
+  },
+  /**
+   * Invoked when the connection is closed.
+   */
+  setCloseCallback(callback) {
+    closeCallback = callback;
+  },
+  isInterceptorEnabled() {
+    return isInterceptorEnabled;
+  },
+  enableInterception() {
+    if (isInterceptorEnabled) {
+      return;
+    }
+    eventSourceClass.prototype.open = function() {
+      if (connectCallback) {
+        connectCallback(this.url, this);
+      }
+      this.addEventListener("open", (event) => {
+        if (openEventCallback) {
+          openEventCallback(event, this);
+        }
+      });
+      this.addEventListener("message", (event) => {
+        if (messageCallback) {
+          messageCallback(event, this);
+        }
+      });
+      this.addEventListener(
+        "error",
+        (event) => {
+          if (errorCallback) {
+            errorCallback(event, this);
+          }
+        }
+      );
+      this.addEventListener("close", (event) => {
+        if (closeCallback) {
+          closeCallback(event, this);
+        }
+      });
+      return originalOpen.call(this);
+    };
+    isInterceptorEnabled = true;
+  },
+  // Unpatch EventSource open method and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled) {
+      return;
+    }
+    isInterceptorEnabled = false;
+    eventSourceClass.prototype.open = originalOpen;
+    connectCallback = null;
+    messageCallback = null;
+    errorCallback = null;
+    openEventCallback = null;
+    closeCallback = null;
+  }
+};
+const getSSEInspector = () => {
+  const eventEmitter = nanoevents.createNanoEvents();
+  const getRequestId = (eventSource2) => {
+    var _a;
+    const requestId = (_a = eventSource2._xhr) == null ? void 0 : _a._rozeniteRequestId;
+    if (!requestId) {
+      throw new Error(
+        "No request ID found for EventSource. This should never happen!"
+      );
+    }
+    return requestId;
+  };
+  return {
+    enable: () => {
+      SSEInterceptor.setOpenEventCallback((_, eventSource2) => {
+        const sseEventSource = eventSource2;
+        const requestId = getRequestId(sseEventSource);
+        const sseXhr = sseEventSource._xhr;
+        const event = {
+          type: "sse-open",
+          requestId,
+          timestamp: Date.now(),
+          response: {
+            url: sseXhr._url,
+            status: sseXhr.status,
+            statusText: sseXhr.statusText,
+            headers: sseXhr.responseHeaders || {},
+            contentType: getContentType(sseXhr),
+            size: 0,
+            responseTime: Date.now()
+          }
+        };
+        eventEmitter.emit("sse-open", event);
+      });
+      SSEInterceptor.setMessageCallback((messageEvent, eventSource2) => {
+        const sseEventSource = eventSource2;
+        const requestId = getRequestId(sseEventSource);
+        const event = {
+          type: "sse-message",
+          requestId,
+          timestamp: Date.now(),
+          data: messageEvent.data || ""
+        };
+        eventEmitter.emit("sse-message", event);
+      });
+      SSEInterceptor.setErrorCallback((errorEvent, eventSource2) => {
+        const sseEventSource = eventSource2;
+        const requestId = getRequestId(sseEventSource);
+        const event = {
+          type: "sse-error",
+          requestId,
+          timestamp: Date.now(),
+          error: {
+            type: errorEvent.type,
+            message: errorEvent.type === "timeout" ? "Timeout" : errorEvent.message
+          }
+        };
+        eventEmitter.emit("sse-error", event);
+      });
+      SSEInterceptor.setCloseCallback((_, eventSource2) => {
+        const sseEventSource = eventSource2;
+        const requestId = getRequestId(sseEventSource);
+        const event = {
+          type: "sse-close",
+          requestId,
+          timestamp: Date.now()
+        };
+        eventEmitter.emit("sse-close", event);
+      });
+      SSEInterceptor.enableInterception();
+    },
+    disable: () => {
+      SSEInterceptor.disableInterception();
+    },
+    isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
+    dispose: () => {
+      eventEmitter.events = {};
+    },
+    on: (event, callback) => eventEmitter.on(event, callback)
+  };
+};
+const useNetworkActivityDevTools = () => {
+  const client = pluginBridge.useRozeniteDevToolsClient({
+    pluginId: "@rozenite/network-activity-plugin"
+  });
+  react.useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const networkInspector = getNetworkInspector(client);
+    return () => {
+      networkInspector.dispose();
+    };
+  }, [client]);
+  react.useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const eventsToForward = [
+      "websocket-connect",
+      "websocket-open",
+      "websocket-close",
+      "websocket-message-sent",
+      "websocket-message-received",
+      "websocket-error",
+      "websocket-connection-status-changed"
+    ];
+    const websocketInspector = getWebSocketInspector();
+    eventsToForward.forEach((event) => {
+      websocketInspector.on(event, (event2) => {
+        client.send(event2.type, event2);
+      });
+    });
+    client.onMessage("network-enable", () => {
+      websocketInspector.enable();
+    });
+    client.onMessage("network-disable", () => {
+      websocketInspector.disable();
+    });
+    return () => {
+      websocketInspector.dispose();
+    };
+  }, [client]);
+  react.useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const eventsToForward = [
+      "sse-open",
+      "sse-message",
+      "sse-error",
+      "sse-close"
+    ];
+    const sseInspector = getSSEInspector();
+    eventsToForward.forEach((event) => {
+      sseInspector.on(event, (event2) => {
+        client.send(event2.type, event2);
+      });
+    });
+    client.onMessage("network-enable", () => {
+      sseInspector.enable();
+    });
+    client.onMessage("network-disable", () => {
+      sseInspector.disable();
+    });
+    return () => {
+      sseInspector.dispose();
+    };
+  }, [client]);
+  return client;
+};
+exports.useNetworkActivityDevTools = useNetworkActivityDevTools;