@kush_hemant/react-api-monitor 1.0.27 → 1.0.30

package/dist/index.js

@@ -1,16 +1,16 @@
 // src/core/sender.js
-var LOG_ENDPOINT2 = "";
+var LOG_ENDPOINT = "";
 function configureSender(url) {
-  LOG_ENDPOINT2 = url;
+  LOG_ENDPOINT = url;
 }
-function sendLog2(data) {
+function sendLog(data) {
   var _a;
-  if (!LOG_ENDPOINT2) return;
+  if (!LOG_ENDPOINT) return;
   ((_a = navigator.sendBeacon) == null ? void 0 : _a.call(
     navigator,
-    LOG_ENDPOINT2,
+    LOG_ENDPOINT,
     JSON.stringify(data)
-  )) || fetch(LOG_ENDPOINT2, {
+  )) || fetch(LOG_ENDPOINT, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(data),
@@ -19,30 +19,63 @@ function sendLog2(data) {
   });
 }
 
+// src/utils/metadata.js
+function getMetadata() {
+  return {
+    pageUrl: location.href,
+    userAgent: navigator.userAgent,
+    language: navigator.language,
+    platform: navigator.platform,
+    screen: `${screen.width}x${screen.height}`,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+
 // src/network/fetchMonitor.js
+var alreadyPatched = false;
 function monitorFetch() {
+  if (alreadyPatched) return;
+  alreadyPatched = true;
   const originalFetch = globalThis.fetch || window.fetch;
   const patchedFetch = async (input, init = {}) => {
-    const url = typeof input === "string" ? input : (input == null ? void 0 : input.url) || "";
+    const request = input instanceof Request ? input : new Request(input, init);
+    const url = request.url;
+    const method = request.method || "GET";
     if (LOG_ENDPOINT && url.startsWith(LOG_ENDPOINT)) {
       return originalFetch(input, init);
     }
     const start = Date.now();
-    const method = init.method || "GET";
+    let requestBody = null;
     try {
-      const response = await originalFetch(input, init);
-      const clone = response.clone();
+      requestBody = await request.clone().text();
+    } catch {
+    }
+    const requestHeaders = {};
+    request.headers.forEach((v, k) => {
+      requestHeaders[k] = v;
+    });
+    try {
+      const response = await originalFetch(
+        request
+      );
       let responseBody = null;
       try {
-        responseBody = await clone.text();
+        responseBody = await response.clone().text();
       } catch {
       }
+      const responseHeaders = {};
+      response.headers.forEach((v, k) => {
+        responseHeaders[k] = v;
+      });
       sendLog({
         type: "api_call",
         transport: "fetch",
         url,
         method,
         statusCode: response.status,
+        requestHeaders,
+        requestBody,
+        responseHeaders,
         responseBody,
         duration: Date.now() - start,
         ...getMetadata()
@@ -55,6 +88,7 @@ function monitorFetch() {
         url,
         method,
         error: err.message,
+        duration: Date.now() - start,
         ...getMetadata()
       });
       throw err;
@@ -66,18 +100,6 @@ function monitorFetch() {
   }
 }
 
-// src/utils/metadata.js
-function getMetadata2() {
-  return {
-    pageUrl: location.href,
-    userAgent: navigator.userAgent,
-    language: navigator.language,
-    platform: navigator.platform,
-    screen: `${screen.width}x${screen.height}`,
-    timestamp: (/* @__PURE__ */ new Date()).toISOString()
-  };
-}
-
 // src/network/xhrMonitor.js
 function monitorXHR() {
   const originalOpen = XMLHttpRequest.prototype.open;
@@ -95,11 +117,11 @@ function monitorXHR() {
   };
   XMLHttpRequest.prototype.send = function(body) {
     const start = Date.now();
-    if (this._url && LOG_ENDPOINT2 && this._url.includes(LOG_ENDPOINT2)) {
+    if (this._url && LOG_ENDPOINT && this._url.includes(LOG_ENDPOINT)) {
       return originalSend.call(this, body);
     }
     this.addEventListener("loadend", () => {
-      sendLog2({
+      sendLog({
         type: "api_call",
         transport: "xhr",
         url: this._url,
@@ -110,13 +132,38 @@ function monitorXHR() {
         responseHeaders: this.getAllResponseHeaders(),
         responseBody: this.responseText,
         duration: Date.now() - start,
-        ...getMetadata2()
+        ...getMetadata()
       });
     });
     return originalSend.call(this, body);
   };
 }
 
+// src/network/resourceMonitor.js
+function monitorResources() {
+  if (!window.PerformanceObserver) return;
+  const observer = new PerformanceObserver((list) => {
+    list.getEntries().forEach((entry) => {
+      if (entry.initiatorType === "fetch" || entry.initiatorType === "xmlhttprequest" || entry.initiatorType === "beacon") {
+        return;
+      }
+      if (LOG_ENDPOINT && entry.name.includes(LOG_ENDPOINT)) {
+        return;
+      }
+      sendLog({
+        type: "resource",
+        transport: "resource",
+        url: entry.name,
+        method: "GET",
+        duration: Math.round(entry.duration),
+        statusCode: 0,
+        ...getMetadata()
+      });
+    });
+  });
+  observer.observe({ entryTypes: ["resource"] });
+}
+
 // src/network/monitorAxios.js
 function monitorAxios() {
   if (!window.axios) return;
@@ -127,14 +174,14 @@ function monitorAxios() {
   window.axios.interceptors.response.use(
     (response) => {
       var _a;
-      sendLog2({
+      sendLog({
         type: "api_call",
         transport: "axios",
         url: response.config.url,
         method: (_a = response.config.method) == null ? void 0 : _a.toUpperCase(),
         statusCode: response.status,
         duration: Date.now() - response.config.__startTime,
-        ...getMetadata2()
+        ...getMetadata()
       });
       return response;
     },
@@ -146,16 +193,16 @@ function monitorAxios() {
 function monitorBeacon() {
   const originalBeacon = navigator.sendBeacon;
   navigator.sendBeacon = function(url, data) {
-    if (LOG_ENDPOINT2 && url.includes(LOG_ENDPOINT2)) {
+    if (LOG_ENDPOINT && url.includes(LOG_ENDPOINT)) {
       return originalBeacon.call(this, url, data);
     }
-    sendLog2({
+    sendLog({
       type: "api_call",
       transport: "beacon",
       url,
       method: "POST",
       requestBody: data,
-      ...getMetadata2()
+      ...getMetadata()
     });
     return originalBeacon.call(this, url, data);
   };
@@ -167,6 +214,7 @@ function startNetworkMonitoring() {
   monitorXHR();
   monitorAxios();
   monitorBeacon();
+  monitorResources();
 }
 
 // src/index.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kush_hemant/react-api-monitor",
-  "version": "1.0.27",
+  "version": "1.0.30",
   "description": "Automatic API monitoring SDK for React apps",
   "type": "module",
   "main": "./dist/index.js",