@kush_hemant/react-api-monitor 1.0.28 → 1.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +51 -8
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -35,26 +35,42 @@ function getMetadata() {
|
|
|
35
35
|
function monitorFetch() {
|
|
36
36
|
const originalFetch = globalThis.fetch || window.fetch;
|
|
37
37
|
const patchedFetch = async (input, init = {}) => {
|
|
38
|
-
const
|
|
38
|
+
const request = input instanceof Request ? input : new Request(input, init);
|
|
39
|
+
const url = request.url;
|
|
40
|
+
const method = request.method || "GET";
|
|
39
41
|
if (LOG_ENDPOINT && url.startsWith(LOG_ENDPOINT)) {
|
|
40
42
|
return originalFetch(input, init);
|
|
41
43
|
}
|
|
42
44
|
const start = Date.now();
|
|
43
|
-
|
|
45
|
+
let requestBody = null;
|
|
44
46
|
try {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
requestBody = await request.clone().text();
|
|
48
|
+
} catch {
|
|
49
|
+
}
|
|
50
|
+
const requestHeaders = {};
|
|
51
|
+
request.headers.forEach((v, k) => {
|
|
52
|
+
requestHeaders[k] = v;
|
|
53
|
+
});
|
|
54
|
+
try {
|
|
55
|
+
const response = await originalFetch(request);
|
|
47
56
|
let responseBody = null;
|
|
48
57
|
try {
|
|
49
|
-
responseBody = await clone.text();
|
|
58
|
+
responseBody = await response.clone().text();
|
|
50
59
|
} catch {
|
|
51
60
|
}
|
|
61
|
+
const responseHeaders = {};
|
|
62
|
+
response.headers.forEach((v, k) => {
|
|
63
|
+
responseHeaders[k] = v;
|
|
64
|
+
});
|
|
52
65
|
sendLog({
|
|
53
66
|
type: "api_call",
|
|
54
67
|
transport: "fetch",
|
|
55
68
|
url,
|
|
56
69
|
method,
|
|
57
70
|
statusCode: response.status,
|
|
71
|
+
requestHeaders,
|
|
72
|
+
requestBody,
|
|
73
|
+
responseHeaders,
|
|
58
74
|
responseBody,
|
|
59
75
|
duration: Date.now() - start,
|
|
60
76
|
...getMetadata()
|
|
@@ -66,16 +82,17 @@ function monitorFetch() {
|
|
|
66
82
|
transport: "fetch",
|
|
67
83
|
url,
|
|
68
84
|
method,
|
|
85
|
+
requestHeaders,
|
|
86
|
+
requestBody,
|
|
69
87
|
error: err.message,
|
|
88
|
+
duration: Date.now() - start,
|
|
70
89
|
...getMetadata()
|
|
71
90
|
});
|
|
72
91
|
throw err;
|
|
73
92
|
}
|
|
74
93
|
};
|
|
75
94
|
globalThis.fetch = patchedFetch;
|
|
76
|
-
if (typeof window !== "undefined")
|
|
77
|
-
window.fetch = patchedFetch;
|
|
78
|
-
}
|
|
95
|
+
if (typeof window !== "undefined") window.fetch = patchedFetch;
|
|
79
96
|
}
|
|
80
97
|
|
|
81
98
|
// src/network/xhrMonitor.js
|
|
@@ -117,6 +134,31 @@ function monitorXHR() {
|
|
|
117
134
|
};
|
|
118
135
|
}
|
|
119
136
|
|
|
137
|
+
// src/network/resourceMonitor.js
|
|
138
|
+
function monitorResources() {
|
|
139
|
+
if (!window.PerformanceObserver) return;
|
|
140
|
+
const observer = new PerformanceObserver((list) => {
|
|
141
|
+
list.getEntries().forEach((entry) => {
|
|
142
|
+
if (entry.initiatorType === "fetch" || entry.initiatorType === "xmlhttprequest" || entry.initiatorType === "beacon") {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
if (LOG_ENDPOINT && entry.name.includes(LOG_ENDPOINT)) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
sendLog({
|
|
149
|
+
type: "resource",
|
|
150
|
+
transport: "resource",
|
|
151
|
+
url: entry.name,
|
|
152
|
+
method: "GET",
|
|
153
|
+
duration: Math.round(entry.duration),
|
|
154
|
+
statusCode: 0,
|
|
155
|
+
...getMetadata()
|
|
156
|
+
});
|
|
157
|
+
});
|
|
158
|
+
});
|
|
159
|
+
observer.observe({ entryTypes: ["resource"] });
|
|
160
|
+
}
|
|
161
|
+
|
|
120
162
|
// src/network/monitorAxios.js
|
|
121
163
|
function monitorAxios() {
|
|
122
164
|
if (!window.axios) return;
|
|
@@ -167,6 +209,7 @@ function startNetworkMonitoring() {
|
|
|
167
209
|
monitorXHR();
|
|
168
210
|
monitorAxios();
|
|
169
211
|
monitorBeacon();
|
|
212
|
+
monitorResources();
|
|
170
213
|
}
|
|
171
214
|
|
|
172
215
|
// src/index.js
|