@kush_hemant/react-api-monitor 1.0.0

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@kush_hemant/react-api-monitor",
+  "version": "1.0.0",
+  "description": "Automatic API monitoring SDK for React apps",
+  "main": "src/index.js",
+  "type": "module",
+  "keywords": [
+    "react",
+    "monitoring",
+    "api",
+    "logging",
+    "observability"
+  ],
+  "author": "Hemant Kushwah",
+  "license": "MIT"
+}

package/src/core/init.js

@@ -0,0 +1,7 @@
+import { configureSender } from "./sender";
+import { startNetworkMonitoring } from "../network/auto";
+
+export function initMonitoring(options) {
+  configureSender(options.endpoint);
+  startNetworkMonitoring();
+}

package/src/core/sender.js

@@ -0,0 +1,20 @@
+let endpoint = "";
+
+export function configureSender(url) {
+  endpoint = url;
+}
+
+export function sendLog(data) {
+  if (!endpoint) return;
+
+  navigator.sendBeacon?.(
+    endpoint,
+    JSON.stringify(data)
+  ) ||
+    fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+      keepalive: true,
+    }).catch(() => {});
+}

package/src/index.js

@@ -0,0 +1 @@
+export { initMonitoring } from "./core/init";

package/src/network/fetchMonitor.js

@@ -0,0 +1,54 @@
+import { sendLog } from "../core/sender";
+import { getMetadata } from "../utils/metadata";
+
+export function monitorFetch() {
+  const originalFetch = window.fetch;
+
+  window.fetch = async (input, init = {}) => {
+    const start = Date.now();
+
+    let requestBody = init.body || null;
+    let method = init.method || "GET";
+
+    try {
+      const response = await originalFetch(input, init);
+
+      // Clone response to read body safely
+      const clone = response.clone();
+      let responseBody = null;
+
+      try {
+        responseBody = await clone.text();
+      } catch {}
+
+      sendLog({
+        type: "api_call",
+        transport: "fetch",
+        url: typeof input === "string" ? input : input.url,
+        method,
+        statusCode: response.status,
+        requestHeaders: init.headers,
+        requestBody,
+        responseHeaders: Object.fromEntries(
+          response.headers.entries()
+        ),
+        responseBody,
+        duration: Date.now() - start,
+        ...getMetadata(),
+      });
+
+      return response;
+    } catch (err) {
+      sendLog({
+        type: "api_error",
+        transport: "fetch",
+        url: input,
+        method,
+        error: err.message,
+        ...getMetadata(),
+      });
+
+      throw err;
+    }
+  };
+}

package/src/network/xhrMonitor.js

@@ -0,0 +1,50 @@
+import { sendLog } from "../core/sender";
+import { getMetadata } from "../utils/metadata";
+
+export function monitorXHR() {
+  const originalOpen = XMLHttpRequest.prototype.open;
+  const originalSend = XMLHttpRequest.prototype.send;
+  const originalSetHeader =
+    XMLHttpRequest.prototype.setRequestHeader;
+
+  XMLHttpRequest.prototype.open = function (
+    method,
+    url,
+    ...rest
+  ) {
+    this._method = method;
+    this._url = url;
+    this._headers = {};
+    return originalOpen.call(this, method, url, ...rest);
+  };
+
+  XMLHttpRequest.prototype.setRequestHeader = function (
+    key,
+    value
+  ) {
+    this._headers[key] = value;
+    return originalSetHeader.call(this, key, value);
+  };
+
+  XMLHttpRequest.prototype.send = function (body) {
+    const start = Date.now();
+
+    this.addEventListener("loadend", () => {
+      sendLog({
+        type: "api_call",
+        transport: "xhr",
+        url: this._url,
+        method: this._method,
+        statusCode: this.status,
+        requestHeaders: this._headers,
+        requestBody: body,
+        responseHeaders: this.getAllResponseHeaders(),
+        responseBody: this.responseText,
+        duration: Date.now() - start,
+        ...getMetadata(),
+      });
+    });
+
+    return originalSend.call(this, body);
+  };
+}

package/src/utils/metadata.js

@@ -0,0 +1,7 @@
+export function getMetadata() {
+  return {
+    pageUrl: window.location.href,
+    userAgent: navigator.userAgent,
+    timestamp: new Date().toISOString(),
+  };
+}