@rozenite/network-activity-plugin 1.0.0 → 1.2.0
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/README.md +9 -0
- package/dist/App.html +1 -1
- package/dist/assets/{App-C6wCDVkW.js → App-o_iVtD-5.js} +50 -7
- package/dist/boot-recording.cjs +1092 -0
- package/dist/boot-recording.js +1091 -0
- package/dist/react-native.cjs +3 -0
- package/dist/react-native.d.ts +3 -0
- package/dist/react-native.js +5 -1
- package/dist/rozenite.json +1 -1
- package/dist/src/react-native/boot-recording.d.ts +41 -0
- package/dist/src/react-native/config.d.ts +7 -4
- package/dist/src/react-native/events-listener.d.ts +44 -0
- package/dist/src/react-native/http/http-inspector.d.ts +10 -0
- package/dist/src/react-native/http/http-utils.d.ts +15 -0
- package/dist/src/react-native/inspector.d.ts +7 -0
- package/dist/src/react-native/network-inspector.d.ts +16 -0
- package/dist/src/react-native/sse/sse-inspector.d.ts +4 -7
- package/dist/src/react-native/useHttpInspector.d.ts +3 -0
- package/dist/src/react-native/useSSEInspector.d.ts +3 -0
- package/dist/src/react-native/useWebSocketInspector.d.ts +3 -0
- package/dist/src/react-native/websocket/websocket-inspector.d.ts +4 -7
- package/dist/src/shared/client.d.ts +3 -98
- package/dist/src/shared/http-events.d.ts +106 -0
- package/dist/src/shared/sse-events.d.ts +1 -1
- package/dist/src/ui/state/hooks.d.ts +3 -3
- package/dist/src/ui/state/model.d.ts +10 -0
- package/dist/useNetworkActivityDevTools.cjs +112 -993
- package/dist/useNetworkActivityDevTools.js +110 -989
- package/package.json +4 -4
- package/react-native.ts +8 -0
- package/src/react-native/boot-recording.ts +90 -0
- package/src/react-native/config.ts +9 -4
- package/src/react-native/events-listener.ts +102 -0
- package/src/react-native/http/http-inspector.ts +174 -0
- package/src/react-native/http/http-utils.ts +217 -0
- package/src/react-native/inspector.ts +10 -0
- package/src/react-native/network-inspector.ts +78 -0
- package/src/react-native/sse/sse-inspector.ts +12 -10
- package/src/react-native/useHttpInspector.ts +59 -0
- package/src/react-native/useNetworkActivityDevTools.ts +60 -115
- package/src/react-native/useSSEInspector.ts +35 -0
- package/src/react-native/useWebSocketInspector.ts +35 -0
- package/src/react-native/websocket/websocket-inspector.ts +18 -10
- package/src/shared/client.ts +4 -132
- package/src/shared/http-events.ts +140 -0
- package/src/shared/sse-events.ts +1 -1
- package/src/ui/components/RequestList.tsx +18 -6
- package/src/ui/components/Toolbar.tsx +3 -2
- package/src/ui/state/derived.ts +9 -3
- package/src/ui/state/model.ts +10 -0
- package/src/ui/state/store.ts +34 -3
- package/dist/src/react-native/http/network-inspector.d.ts +0 -8
- package/src/react-native/http/network-inspector.ts +0 -388
|
@@ -2,934 +2,91 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
4
|
const pluginBridge = require("@rozenite/plugin-bridge");
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const WebSocketInterceptor__default = /* @__PURE__ */ _interopDefault(WebSocketInterceptor);
|
|
11
|
-
function safeStringify(data) {
|
|
12
|
-
try {
|
|
13
|
-
return typeof data === "string" ? data : JSON.stringify(data);
|
|
14
|
-
} catch {
|
|
15
|
-
return String(data);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
function getHttpHeader(headers, name) {
|
|
19
|
-
const lowerName = name.toLowerCase();
|
|
20
|
-
for (const key in headers) {
|
|
21
|
-
if (key.toLowerCase() === lowerName) {
|
|
22
|
-
return { value: headers[key], originalKey: key };
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return void 0;
|
|
26
|
-
}
|
|
27
|
-
function getContentTypeMime(headers) {
|
|
28
|
-
const contentType = getHttpHeader(headers, "content-type");
|
|
29
|
-
if (!contentType) {
|
|
30
|
-
return void 0;
|
|
31
|
-
}
|
|
32
|
-
const { value } = contentType;
|
|
33
|
-
const actualValue = Array.isArray(value) ? value[0] : value;
|
|
34
|
-
return actualValue.split(";")[0].trim();
|
|
35
|
-
}
|
|
36
|
-
const getContentType = (request) => {
|
|
37
|
-
const responseHeaders = request.responseHeaders;
|
|
38
|
-
const responseType = request.responseType;
|
|
39
|
-
const contentType = getContentTypeMime(responseHeaders || {});
|
|
40
|
-
if (contentType) {
|
|
41
|
-
return contentType;
|
|
42
|
-
}
|
|
43
|
-
switch (responseType) {
|
|
44
|
-
case "arraybuffer":
|
|
45
|
-
case "blob":
|
|
46
|
-
return "application/octet-stream";
|
|
47
|
-
case "text":
|
|
48
|
-
case "":
|
|
49
|
-
return "text/plain";
|
|
50
|
-
case "json":
|
|
51
|
-
return "application/json";
|
|
52
|
-
case "document":
|
|
53
|
-
return "text/html";
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
const REQUEST_TTL = 1e3 * 60 * 5;
|
|
57
|
-
const getNetworkRequestsRegistry = () => {
|
|
58
|
-
const registry = /* @__PURE__ */ new Map();
|
|
59
|
-
const trimRegistry = () => {
|
|
60
|
-
const now = Date.now();
|
|
61
|
-
registry.forEach((entry) => {
|
|
62
|
-
if (now - entry.sentAt < REQUEST_TTL) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
registry.delete(entry.id);
|
|
66
|
-
});
|
|
67
|
-
};
|
|
68
|
-
const addEntry = (id, request) => {
|
|
69
|
-
trimRegistry();
|
|
70
|
-
registry.set(id, {
|
|
71
|
-
id,
|
|
72
|
-
request,
|
|
73
|
-
sentAt: Date.now()
|
|
74
|
-
});
|
|
75
|
-
};
|
|
76
|
-
const getEntry = (id) => {
|
|
77
|
-
var _a;
|
|
78
|
-
return ((_a = registry.get(id)) == null ? void 0 : _a.request) ?? null;
|
|
79
|
-
};
|
|
80
|
-
const clear = () => {
|
|
81
|
-
registry.clear();
|
|
82
|
-
};
|
|
83
|
-
return {
|
|
84
|
-
addEntry,
|
|
85
|
-
getEntry,
|
|
86
|
-
clear
|
|
87
|
-
};
|
|
88
|
-
};
|
|
89
|
-
function getBlobName(blob) {
|
|
90
|
-
if (typeof (blob == null ? void 0 : blob.name) === "string") {
|
|
91
|
-
return blob.name;
|
|
92
|
-
}
|
|
93
|
-
if ((blob == null ? void 0 : blob.data) && typeof blob.data.name === "string") {
|
|
94
|
-
return blob.data.name;
|
|
95
|
-
}
|
|
96
|
-
return void 0;
|
|
97
|
-
}
|
|
98
|
-
function getFormDataEntries(formData) {
|
|
99
|
-
if (!formData || typeof formData !== "object") {
|
|
100
|
-
return [];
|
|
101
|
-
}
|
|
102
|
-
if (typeof formData.entries === "function") {
|
|
103
|
-
return formData.entries();
|
|
104
|
-
}
|
|
105
|
-
if (Array.isArray(formData._parts)) {
|
|
106
|
-
return formData._parts;
|
|
107
|
-
}
|
|
108
|
-
return [];
|
|
109
|
-
}
|
|
110
|
-
const XMLHttpRequest = global.XMLHttpRequest || window.XMLHttpRequest;
|
|
111
|
-
const originalXHROpen = XMLHttpRequest.prototype.open;
|
|
112
|
-
const originalXHRSend = XMLHttpRequest.prototype.send;
|
|
113
|
-
const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
|
|
114
|
-
let openCallback;
|
|
115
|
-
let sendCallback;
|
|
116
|
-
let requestHeaderCallback;
|
|
117
|
-
let headerReceivedCallback;
|
|
118
|
-
let responseCallback;
|
|
119
|
-
let overrideCallback;
|
|
120
|
-
let isInterceptorEnabled$1 = false;
|
|
121
|
-
const XHRInterceptor = {
|
|
122
|
-
/**
|
|
123
|
-
* Invoked before XMLHttpRequest.open(...) is called.
|
|
124
|
-
*/
|
|
125
|
-
setOpenCallback(callback) {
|
|
126
|
-
openCallback = callback;
|
|
127
|
-
},
|
|
128
|
-
/**
|
|
129
|
-
* Invoked before XMLHttpRequest.send(...) is called.
|
|
130
|
-
*/
|
|
131
|
-
setSendCallback(callback) {
|
|
132
|
-
sendCallback = callback;
|
|
133
|
-
},
|
|
134
|
-
/**
|
|
135
|
-
* Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
|
|
136
|
-
*/
|
|
137
|
-
setHeaderReceivedCallback(callback) {
|
|
138
|
-
headerReceivedCallback = callback;
|
|
139
|
-
},
|
|
140
|
-
/**
|
|
141
|
-
* Invoked after xhr's readyState becomes xhr.DONE.
|
|
142
|
-
*/
|
|
143
|
-
setResponseCallback(callback) {
|
|
144
|
-
responseCallback = callback;
|
|
145
|
-
},
|
|
146
|
-
/**
|
|
147
|
-
* Invoked before XMLHttpRequest.setRequestHeader(...) is called.
|
|
148
|
-
*/
|
|
149
|
-
setRequestHeaderCallback(callback) {
|
|
150
|
-
requestHeaderCallback = callback;
|
|
151
|
-
},
|
|
152
|
-
/**
|
|
153
|
-
* Invoked before XMLHttpRequest.send(...) is called.
|
|
154
|
-
*/
|
|
155
|
-
setOverrideCallback(callback) {
|
|
156
|
-
overrideCallback = callback;
|
|
157
|
-
},
|
|
158
|
-
isInterceptorEnabled() {
|
|
159
|
-
return isInterceptorEnabled$1;
|
|
160
|
-
},
|
|
161
|
-
enableInterception() {
|
|
162
|
-
if (isInterceptorEnabled$1) {
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
XMLHttpRequest.prototype.open = function(method, url) {
|
|
166
|
-
if (openCallback) {
|
|
167
|
-
openCallback(method, url, this);
|
|
168
|
-
}
|
|
169
|
-
originalXHROpen.apply(this, arguments);
|
|
170
|
-
};
|
|
171
|
-
XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
|
|
172
|
-
if (requestHeaderCallback) {
|
|
173
|
-
requestHeaderCallback(header, value, this);
|
|
174
|
-
}
|
|
175
|
-
originalXHRSetRequestHeader.apply(this, arguments);
|
|
176
|
-
};
|
|
177
|
-
XMLHttpRequest.prototype.send = function(data) {
|
|
178
|
-
if (sendCallback) {
|
|
179
|
-
sendCallback(data, this);
|
|
180
|
-
}
|
|
181
|
-
if (overrideCallback) {
|
|
182
|
-
overrideCallback(this);
|
|
183
|
-
}
|
|
184
|
-
if (this.addEventListener) {
|
|
185
|
-
this.addEventListener(
|
|
186
|
-
"readystatechange",
|
|
187
|
-
() => {
|
|
188
|
-
if (!isInterceptorEnabled$1) {
|
|
189
|
-
return;
|
|
190
|
-
}
|
|
191
|
-
if (this.readyState === this.HEADERS_RECEIVED) {
|
|
192
|
-
const contentTypeString = this.getResponseHeader("Content-Type");
|
|
193
|
-
const contentLengthString = this.getResponseHeader("Content-Length");
|
|
194
|
-
let responseContentType, responseSize;
|
|
195
|
-
if (contentTypeString) {
|
|
196
|
-
responseContentType = contentTypeString.split(";")[0];
|
|
197
|
-
}
|
|
198
|
-
if (contentLengthString) {
|
|
199
|
-
responseSize = parseInt(contentLengthString, 10);
|
|
200
|
-
}
|
|
201
|
-
if (headerReceivedCallback) {
|
|
202
|
-
headerReceivedCallback(
|
|
203
|
-
responseContentType,
|
|
204
|
-
responseSize,
|
|
205
|
-
this.getAllResponseHeaders(),
|
|
206
|
-
this
|
|
207
|
-
);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
if (this.readyState === this.DONE) {
|
|
211
|
-
if (responseCallback) {
|
|
212
|
-
responseCallback(
|
|
213
|
-
this.status,
|
|
214
|
-
this.timeout,
|
|
215
|
-
this.response,
|
|
216
|
-
this.responseURL,
|
|
217
|
-
this.responseType,
|
|
218
|
-
this
|
|
219
|
-
);
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
},
|
|
223
|
-
false
|
|
224
|
-
);
|
|
225
|
-
}
|
|
226
|
-
originalXHRSend.apply(this, arguments);
|
|
227
|
-
};
|
|
228
|
-
isInterceptorEnabled$1 = true;
|
|
229
|
-
},
|
|
230
|
-
// Unpatch XMLHttpRequest methods and remove the callbacks.
|
|
231
|
-
disableInterception() {
|
|
232
|
-
if (!isInterceptorEnabled$1) {
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
|
-
isInterceptorEnabled$1 = false;
|
|
236
|
-
XMLHttpRequest.prototype.send = originalXHRSend;
|
|
237
|
-
XMLHttpRequest.prototype.open = originalXHROpen;
|
|
238
|
-
XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
|
|
239
|
-
responseCallback = null;
|
|
240
|
-
openCallback = null;
|
|
241
|
-
sendCallback = null;
|
|
242
|
-
headerReceivedCallback = null;
|
|
243
|
-
requestHeaderCallback = null;
|
|
244
|
-
overrideCallback = null;
|
|
245
|
-
}
|
|
246
|
-
};
|
|
247
|
-
const getStringSizeInBytes = (value) => {
|
|
248
|
-
return new TextEncoder().encode(value).length;
|
|
249
|
-
};
|
|
250
|
-
const splitSetCookieHeaderByComma = (header) => {
|
|
251
|
-
const regex = /(?:^|,\s)([^=;,]+=[^;]+(?:;[^,]*)*)/g;
|
|
252
|
-
const matches = [];
|
|
253
|
-
let match;
|
|
254
|
-
while ((match = regex.exec(header)) !== null) {
|
|
255
|
-
matches.push(match[1].trim());
|
|
256
|
-
}
|
|
257
|
-
return matches;
|
|
258
|
-
};
|
|
259
|
-
const applyReactNativeResponseHeadersLogic = (headers) => {
|
|
260
|
-
const parsedHeaders = { ...headers };
|
|
261
|
-
const setCookieHeader = getHttpHeader(headers, "set-cookie");
|
|
262
|
-
if (setCookieHeader) {
|
|
263
|
-
const { value, originalKey } = setCookieHeader;
|
|
264
|
-
const cookies = splitSetCookieHeaderByComma(value);
|
|
265
|
-
parsedHeaders[originalKey] = cookies.length > 0 ? cookies : value;
|
|
266
|
-
}
|
|
267
|
-
return parsedHeaders;
|
|
268
|
-
};
|
|
269
|
-
const isBlob = (value) => value instanceof Blob;
|
|
270
|
-
const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
|
|
271
|
-
const isFormData = (value) => value instanceof FormData;
|
|
272
|
-
const isNullOrUndefined = (value) => value === null || value === void 0;
|
|
273
|
-
const createOverridesRegistry = () => {
|
|
274
|
-
let overrides = /* @__PURE__ */ new Map();
|
|
275
|
-
const setOverrides = (newOverrides) => {
|
|
276
|
-
overrides = new Map(newOverrides);
|
|
277
|
-
};
|
|
278
|
-
const getOverrideForUrl = (url) => {
|
|
279
|
-
return overrides.get(url);
|
|
280
|
-
};
|
|
281
|
-
return {
|
|
282
|
-
setOverrides,
|
|
283
|
-
getOverrideForUrl
|
|
284
|
-
};
|
|
285
|
-
};
|
|
286
|
-
let registryInstance = null;
|
|
287
|
-
const getOverridesRegistry = () => {
|
|
288
|
-
if (!registryInstance) {
|
|
289
|
-
registryInstance = createOverridesRegistry();
|
|
290
|
-
}
|
|
291
|
-
return registryInstance;
|
|
292
|
-
};
|
|
293
|
-
const networkRequestsRegistry = getNetworkRequestsRegistry();
|
|
294
|
-
const overridesRegistry$1 = getOverridesRegistry();
|
|
295
|
-
const getBinaryPostData = (body) => ({
|
|
296
|
-
type: "binary",
|
|
297
|
-
value: {
|
|
298
|
-
size: body.size,
|
|
299
|
-
type: body.type,
|
|
300
|
-
name: getBlobName(body)
|
|
301
|
-
}
|
|
302
|
-
});
|
|
303
|
-
const getArrayBufferPostData = (body) => ({
|
|
304
|
-
type: "binary",
|
|
305
|
-
value: {
|
|
306
|
-
size: body.byteLength
|
|
307
|
-
}
|
|
308
|
-
});
|
|
309
|
-
const getTextPostData = (body) => ({
|
|
310
|
-
type: "text",
|
|
311
|
-
value: safeStringify(body)
|
|
312
|
-
});
|
|
313
|
-
const getFormDataPostData = (body) => ({
|
|
314
|
-
type: "form-data",
|
|
315
|
-
value: getFormDataEntries(body).reduce(
|
|
316
|
-
(acc, [key, value]) => {
|
|
317
|
-
if (isBlob(value)) {
|
|
318
|
-
acc[key] = getBinaryPostData(value);
|
|
319
|
-
} else if (isArrayBuffer(value)) {
|
|
320
|
-
acc[key] = getArrayBufferPostData(value);
|
|
321
|
-
} else {
|
|
322
|
-
acc[key] = getTextPostData(value);
|
|
323
|
-
}
|
|
324
|
-
return acc;
|
|
325
|
-
},
|
|
326
|
-
{}
|
|
327
|
-
)
|
|
328
|
-
});
|
|
329
|
-
const getRequestBody = (body) => {
|
|
330
|
-
if (isNullOrUndefined(body)) {
|
|
331
|
-
return body;
|
|
332
|
-
}
|
|
333
|
-
if (isBlob(body)) {
|
|
334
|
-
return getBinaryPostData(body);
|
|
335
|
-
}
|
|
336
|
-
if (isArrayBuffer(body)) {
|
|
337
|
-
return getArrayBufferPostData(body);
|
|
338
|
-
}
|
|
339
|
-
if (isFormData(body)) {
|
|
340
|
-
return getFormDataPostData(body);
|
|
341
|
-
}
|
|
342
|
-
return getTextPostData(body);
|
|
343
|
-
};
|
|
344
|
-
const getResponseSize = (request) => {
|
|
345
|
-
try {
|
|
346
|
-
const { responseType, response } = request;
|
|
347
|
-
if (response === null) {
|
|
348
|
-
return 0;
|
|
349
|
-
}
|
|
350
|
-
if (responseType === "" || responseType === "text") {
|
|
351
|
-
return getStringSizeInBytes(request.responseText);
|
|
352
|
-
}
|
|
353
|
-
if (responseType === "json") {
|
|
354
|
-
return getStringSizeInBytes(safeStringify(response));
|
|
355
|
-
}
|
|
356
|
-
if (responseType === "blob") {
|
|
357
|
-
return response.size;
|
|
358
|
-
}
|
|
359
|
-
if (responseType === "arraybuffer") {
|
|
360
|
-
return response.byteLength;
|
|
361
|
-
}
|
|
362
|
-
return 0;
|
|
363
|
-
} catch {
|
|
364
|
-
return null;
|
|
365
|
-
}
|
|
366
|
-
};
|
|
367
|
-
const getResponseBody = async (request) => {
|
|
368
|
-
const responseType = request.responseType;
|
|
369
|
-
if (responseType === "" || responseType === "text") {
|
|
370
|
-
return request.responseText;
|
|
371
|
-
}
|
|
372
|
-
if (responseType === "blob") {
|
|
373
|
-
const contentType = request.getResponseHeader("Content-Type") || "";
|
|
374
|
-
if (contentType.startsWith("text/") || contentType.startsWith("application/json")) {
|
|
375
|
-
return new Promise((resolve) => {
|
|
376
|
-
const reader = new FileReader();
|
|
377
|
-
reader.onload = () => {
|
|
378
|
-
resolve(reader.result);
|
|
379
|
-
};
|
|
380
|
-
reader.readAsText(request.response);
|
|
381
|
-
});
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
if (responseType === "json") {
|
|
385
|
-
return safeStringify(request.response);
|
|
386
|
-
}
|
|
387
|
-
return null;
|
|
388
|
-
};
|
|
389
|
-
const getInitiatorFromStack = () => {
|
|
390
|
-
try {
|
|
391
|
-
const stack = new Error().stack;
|
|
392
|
-
if (!stack) {
|
|
393
|
-
return { type: "other" };
|
|
394
|
-
}
|
|
395
|
-
const line = stack.split("\n")[9];
|
|
396
|
-
const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
|
|
397
|
-
if (match) {
|
|
398
|
-
return {
|
|
399
|
-
type: "script",
|
|
400
|
-
url: match[2],
|
|
401
|
-
lineNumber: parseInt(match[3]),
|
|
402
|
-
columnNumber: parseInt(match[4])
|
|
403
|
-
};
|
|
404
|
-
}
|
|
405
|
-
} catch {
|
|
406
|
-
}
|
|
407
|
-
return { type: "other" };
|
|
408
|
-
};
|
|
409
|
-
const READY_STATE_HEADERS_RECEIVED = 2;
|
|
410
|
-
const getNetworkInspector = (pluginClient) => {
|
|
411
|
-
const generateRequestId = () => {
|
|
412
|
-
return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
413
|
-
};
|
|
414
|
-
const handleRequestSend = (data, request) => {
|
|
415
|
-
const sendTime = Date.now();
|
|
416
|
-
const requestId = generateRequestId();
|
|
417
|
-
request._rozeniteRequestId = requestId;
|
|
418
|
-
const initiator = getInitiatorFromStack();
|
|
419
|
-
networkRequestsRegistry.addEntry(requestId, request);
|
|
420
|
-
let ttfb = 0;
|
|
421
|
-
pluginClient.send("request-sent", {
|
|
422
|
-
requestId,
|
|
423
|
-
timestamp: sendTime,
|
|
424
|
-
request: {
|
|
425
|
-
url: request._url,
|
|
426
|
-
method: request._method,
|
|
427
|
-
headers: request._headers,
|
|
428
|
-
postData: getRequestBody(data)
|
|
429
|
-
},
|
|
430
|
-
type: "XHR",
|
|
431
|
-
initiator
|
|
432
|
-
});
|
|
433
|
-
request.addEventListener("readystatechange", () => {
|
|
434
|
-
if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
|
|
435
|
-
ttfb = Date.now() - sendTime;
|
|
436
|
-
}
|
|
437
|
-
});
|
|
438
|
-
request.addEventListener("load", () => {
|
|
439
|
-
pluginClient.send("response-received", {
|
|
440
|
-
requestId,
|
|
441
|
-
timestamp: Date.now(),
|
|
442
|
-
type: "XHR",
|
|
443
|
-
response: {
|
|
444
|
-
url: request._url,
|
|
445
|
-
status: request.status,
|
|
446
|
-
statusText: request.statusText,
|
|
447
|
-
headers: applyReactNativeResponseHeadersLogic(
|
|
448
|
-
request.responseHeaders || {}
|
|
449
|
-
),
|
|
450
|
-
contentType: getContentType(request),
|
|
451
|
-
size: getResponseSize(request),
|
|
452
|
-
responseTime: Date.now()
|
|
453
|
-
}
|
|
454
|
-
});
|
|
455
|
-
});
|
|
456
|
-
request.addEventListener("loadend", () => {
|
|
457
|
-
pluginClient.send("request-completed", {
|
|
458
|
-
requestId,
|
|
459
|
-
timestamp: Date.now(),
|
|
460
|
-
duration: Date.now() - sendTime,
|
|
461
|
-
size: getResponseSize(request),
|
|
462
|
-
ttfb
|
|
463
|
-
});
|
|
464
|
-
});
|
|
465
|
-
request.addEventListener("error", () => {
|
|
466
|
-
pluginClient.send("request-failed", {
|
|
467
|
-
requestId,
|
|
468
|
-
timestamp: Date.now(),
|
|
469
|
-
type: "XHR",
|
|
470
|
-
error: "Failed",
|
|
471
|
-
canceled: false
|
|
472
|
-
});
|
|
473
|
-
});
|
|
474
|
-
request.addEventListener("abort", () => {
|
|
475
|
-
pluginClient.send("request-failed", {
|
|
476
|
-
requestId,
|
|
477
|
-
timestamp: Date.now(),
|
|
478
|
-
type: "XHR",
|
|
479
|
-
error: "Aborted",
|
|
480
|
-
canceled: true
|
|
481
|
-
});
|
|
482
|
-
});
|
|
483
|
-
};
|
|
484
|
-
const handleRequestOverride = (request) => {
|
|
485
|
-
const override = overridesRegistry$1.getOverrideForUrl(
|
|
486
|
-
request._url
|
|
487
|
-
);
|
|
488
|
-
if (!override) {
|
|
5
|
+
const bootRecording = require("./boot-recording.cjs");
|
|
6
|
+
const overridesRegistry = bootRecording.getOverridesRegistry();
|
|
7
|
+
const useHttpInspector = (client, httpInspector, isEnabled, isRecordingEnabled) => {
|
|
8
|
+
react.useEffect(() => {
|
|
9
|
+
if (!client || !isEnabled) {
|
|
489
10
|
return;
|
|
490
11
|
}
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
request.responseType = "text";
|
|
12
|
+
const networkRequestsRegistry = httpInspector.getNetworkRequestsRegistry();
|
|
13
|
+
const subscriptions = [
|
|
14
|
+
client.onMessage("network-enable", () => {
|
|
15
|
+
httpInspector.enable();
|
|
16
|
+
}),
|
|
17
|
+
client.onMessage("network-disable", () => {
|
|
18
|
+
httpInspector.disable();
|
|
19
|
+
}),
|
|
20
|
+
client.onMessage("set-overrides", (data) => {
|
|
21
|
+
overridesRegistry.setOverrides(data.overrides);
|
|
22
|
+
}),
|
|
23
|
+
client.onMessage("get-response-body", async ({ requestId }) => {
|
|
24
|
+
const request = networkRequestsRegistry.getEntry(requestId);
|
|
25
|
+
if (!request) {
|
|
26
|
+
return;
|
|
507
27
|
}
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
Object.defineProperty(request, "status", {
|
|
513
|
-
writable: true
|
|
28
|
+
const body = await bootRecording.getResponseBody(request);
|
|
29
|
+
client.send("response-body", {
|
|
30
|
+
requestId,
|
|
31
|
+
body
|
|
514
32
|
});
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
const enable = () => {
|
|
520
|
-
XHRInterceptor.disableInterception();
|
|
521
|
-
XHRInterceptor.setSendCallback(handleRequestSend);
|
|
522
|
-
XHRInterceptor.setOverrideCallback(handleRequestOverride);
|
|
523
|
-
XHRInterceptor.enableInterception();
|
|
524
|
-
};
|
|
525
|
-
const disable = () => {
|
|
526
|
-
XHRInterceptor.disableInterception();
|
|
527
|
-
networkRequestsRegistry.clear();
|
|
528
|
-
};
|
|
529
|
-
const isEnabled = () => {
|
|
530
|
-
return XHRInterceptor.isInterceptorEnabled();
|
|
531
|
-
};
|
|
532
|
-
const enableSubscription = pluginClient.onMessage("network-enable", () => {
|
|
533
|
-
enable();
|
|
534
|
-
});
|
|
535
|
-
const disableSubscription = pluginClient.onMessage("network-disable", () => {
|
|
536
|
-
disable();
|
|
537
|
-
});
|
|
538
|
-
const handleBodySubscription = pluginClient.onMessage(
|
|
539
|
-
"get-response-body",
|
|
540
|
-
async ({ requestId }) => {
|
|
541
|
-
const request = networkRequestsRegistry.getEntry(requestId);
|
|
542
|
-
if (!request) {
|
|
543
|
-
return;
|
|
544
|
-
}
|
|
545
|
-
const body = await getResponseBody(request);
|
|
546
|
-
pluginClient.send("response-body", {
|
|
547
|
-
requestId,
|
|
548
|
-
body
|
|
549
|
-
});
|
|
33
|
+
})
|
|
34
|
+
];
|
|
35
|
+
if (isRecordingEnabled) {
|
|
36
|
+
httpInspector.enable();
|
|
550
37
|
}
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
enableSubscription.remove();
|
|
555
|
-
disableSubscription.remove();
|
|
556
|
-
handleBodySubscription.remove();
|
|
557
|
-
};
|
|
558
|
-
return {
|
|
559
|
-
enable,
|
|
560
|
-
disable,
|
|
561
|
-
isEnabled,
|
|
562
|
-
dispose
|
|
563
|
-
};
|
|
564
|
-
};
|
|
565
|
-
const getWebSocketInterceptor = () => {
|
|
566
|
-
if (reactNative.Platform.constants.reactNativeVersion.minor >= 79) {
|
|
567
|
-
return WebSocketInterceptor__default.default;
|
|
568
|
-
} else {
|
|
569
|
-
const WebSocketInterceptorPreRN079 = WebSocketInterceptor__default.default;
|
|
570
|
-
return {
|
|
571
|
-
...WebSocketInterceptorPreRN079,
|
|
572
|
-
setOnMessageCallback: (callback) => {
|
|
573
|
-
WebSocketInterceptorPreRN079.setOnMessageCallback((socketId, data) => {
|
|
574
|
-
callback(data, socketId);
|
|
575
|
-
});
|
|
576
|
-
},
|
|
577
|
-
setOnCloseCallback: (callback) => {
|
|
578
|
-
WebSocketInterceptorPreRN079.setOnCloseCallback((error, socketId) => {
|
|
579
|
-
callback(socketId, error);
|
|
580
|
-
});
|
|
581
|
-
},
|
|
582
|
-
setOnErrorCallback: (callback) => {
|
|
583
|
-
WebSocketInterceptorPreRN079.setOnErrorCallback((error, socketId) => {
|
|
584
|
-
callback(socketId, error);
|
|
585
|
-
});
|
|
586
|
-
}
|
|
38
|
+
return () => {
|
|
39
|
+
subscriptions.forEach((subscription) => subscription.remove());
|
|
40
|
+
httpInspector.dispose();
|
|
587
41
|
};
|
|
588
|
-
}
|
|
589
|
-
};
|
|
590
|
-
const getWebSocketInspector = () => {
|
|
591
|
-
const eventEmitter = nanoevents.createNanoEvents();
|
|
592
|
-
const socketUrlMap = /* @__PURE__ */ new Map();
|
|
593
|
-
const webSocketInterceptor = getWebSocketInterceptor();
|
|
594
|
-
return {
|
|
595
|
-
enable: () => {
|
|
596
|
-
webSocketInterceptor.setConnectCallback(
|
|
597
|
-
(url, protocols, options, socketId) => {
|
|
598
|
-
socketUrlMap.set(socketId, url);
|
|
599
|
-
const event = {
|
|
600
|
-
type: "websocket-connect",
|
|
601
|
-
url,
|
|
602
|
-
socketId,
|
|
603
|
-
timestamp: Date.now(),
|
|
604
|
-
protocols,
|
|
605
|
-
options
|
|
606
|
-
};
|
|
607
|
-
eventEmitter.emit("websocket-connect", event);
|
|
608
|
-
}
|
|
609
|
-
);
|
|
610
|
-
webSocketInterceptor.setCloseCallback(
|
|
611
|
-
(code, reason, socketId) => {
|
|
612
|
-
const url = socketUrlMap.get(socketId);
|
|
613
|
-
if (!url) {
|
|
614
|
-
return;
|
|
615
|
-
}
|
|
616
|
-
const event = {
|
|
617
|
-
type: "websocket-close",
|
|
618
|
-
url,
|
|
619
|
-
socketId,
|
|
620
|
-
timestamp: Date.now(),
|
|
621
|
-
code: code || 0,
|
|
622
|
-
reason: reason || void 0
|
|
623
|
-
};
|
|
624
|
-
eventEmitter.emit("websocket-close", event);
|
|
625
|
-
socketUrlMap.delete(socketId);
|
|
626
|
-
}
|
|
627
|
-
);
|
|
628
|
-
webSocketInterceptor.setOnMessageCallback(
|
|
629
|
-
(data, socketId) => {
|
|
630
|
-
const url = socketUrlMap.get(socketId);
|
|
631
|
-
if (!url) {
|
|
632
|
-
return;
|
|
633
|
-
}
|
|
634
|
-
const event = {
|
|
635
|
-
type: "websocket-message-received",
|
|
636
|
-
url,
|
|
637
|
-
socketId,
|
|
638
|
-
timestamp: Date.now(),
|
|
639
|
-
data,
|
|
640
|
-
messageType: typeof data === "string" ? "text" : "binary"
|
|
641
|
-
};
|
|
642
|
-
eventEmitter.emit("websocket-message-received", event);
|
|
643
|
-
}
|
|
644
|
-
);
|
|
645
|
-
webSocketInterceptor.setOnErrorCallback(
|
|
646
|
-
(error, socketId) => {
|
|
647
|
-
const url = socketUrlMap.get(socketId);
|
|
648
|
-
if (!url) {
|
|
649
|
-
return;
|
|
650
|
-
}
|
|
651
|
-
const event = {
|
|
652
|
-
type: "websocket-error",
|
|
653
|
-
url,
|
|
654
|
-
socketId,
|
|
655
|
-
timestamp: Date.now(),
|
|
656
|
-
error
|
|
657
|
-
};
|
|
658
|
-
eventEmitter.emit("websocket-error", event);
|
|
659
|
-
}
|
|
660
|
-
);
|
|
661
|
-
webSocketInterceptor.setSendCallback((data, socketId) => {
|
|
662
|
-
const url = socketUrlMap.get(socketId);
|
|
663
|
-
if (!url) {
|
|
664
|
-
return;
|
|
665
|
-
}
|
|
666
|
-
const event = {
|
|
667
|
-
type: "websocket-message-sent",
|
|
668
|
-
url,
|
|
669
|
-
socketId,
|
|
670
|
-
timestamp: Date.now(),
|
|
671
|
-
data,
|
|
672
|
-
messageType: typeof data === "string" ? "text" : "binary"
|
|
673
|
-
};
|
|
674
|
-
eventEmitter.emit("websocket-message-sent", event);
|
|
675
|
-
});
|
|
676
|
-
webSocketInterceptor.setOnOpenCallback((socketId) => {
|
|
677
|
-
const url = socketUrlMap.get(socketId);
|
|
678
|
-
if (!url) {
|
|
679
|
-
return;
|
|
680
|
-
}
|
|
681
|
-
const event = {
|
|
682
|
-
type: "websocket-open",
|
|
683
|
-
url,
|
|
684
|
-
socketId,
|
|
685
|
-
timestamp: Date.now()
|
|
686
|
-
};
|
|
687
|
-
eventEmitter.emit("websocket-open", event);
|
|
688
|
-
});
|
|
689
|
-
webSocketInterceptor.setOnCloseCallback(
|
|
690
|
-
(error, socketId) => {
|
|
691
|
-
const url = socketUrlMap.get(socketId);
|
|
692
|
-
if (!url) {
|
|
693
|
-
return;
|
|
694
|
-
}
|
|
695
|
-
const event = {
|
|
696
|
-
type: "websocket-close",
|
|
697
|
-
url,
|
|
698
|
-
socketId,
|
|
699
|
-
timestamp: Date.now(),
|
|
700
|
-
code: error.code,
|
|
701
|
-
reason: error.reason
|
|
702
|
-
};
|
|
703
|
-
eventEmitter.emit("websocket-close", event);
|
|
704
|
-
socketUrlMap.delete(socketId);
|
|
705
|
-
}
|
|
706
|
-
);
|
|
707
|
-
webSocketInterceptor.enableInterception();
|
|
708
|
-
},
|
|
709
|
-
disable: () => {
|
|
710
|
-
webSocketInterceptor.disableInterception();
|
|
711
|
-
},
|
|
712
|
-
isEnabled: () => webSocketInterceptor.isInterceptorEnabled(),
|
|
713
|
-
dispose: () => {
|
|
714
|
-
eventEmitter.events = {};
|
|
715
|
-
socketUrlMap.clear();
|
|
716
|
-
},
|
|
717
|
-
on: (event, callback) => eventEmitter.on(event, callback)
|
|
718
|
-
};
|
|
42
|
+
}, [client, httpInspector, isEnabled, isRecordingEnabled]);
|
|
719
43
|
};
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
let openEventCallback;
|
|
724
|
-
let closeCallback;
|
|
725
|
-
let isInterceptorEnabled = false;
|
|
726
|
-
const eventSourceClass = eventSource.getEventSource();
|
|
727
|
-
const originalOpen = eventSourceClass.prototype.open;
|
|
728
|
-
const originalDispatch = eventSourceClass.prototype.dispatch;
|
|
729
|
-
const BUILT_IN_EVENT_TYPES = /* @__PURE__ */ new Set(["open", "error", "close", "done"]);
|
|
730
|
-
const SSEInterceptor = {
|
|
731
|
-
/**
|
|
732
|
-
* Invoked when EventSource.open() is called (connection attempt starting).
|
|
733
|
-
*/
|
|
734
|
-
setConnectCallback(callback) {
|
|
735
|
-
connectCallback = callback;
|
|
736
|
-
},
|
|
737
|
-
/**
|
|
738
|
-
* Invoked when a message event is received.
|
|
739
|
-
*/
|
|
740
|
-
setMessageCallback(callback) {
|
|
741
|
-
messageCallback = callback;
|
|
742
|
-
},
|
|
743
|
-
/**
|
|
744
|
-
* Invoked when an error event occurs.
|
|
745
|
-
*/
|
|
746
|
-
setErrorCallback(callback) {
|
|
747
|
-
errorCallback = callback;
|
|
748
|
-
},
|
|
749
|
-
/**
|
|
750
|
-
* Invoked when the connection is successfully opened (open event fired).
|
|
751
|
-
*/
|
|
752
|
-
setOpenEventCallback(callback) {
|
|
753
|
-
openEventCallback = callback;
|
|
754
|
-
},
|
|
755
|
-
/**
|
|
756
|
-
* Invoked when the connection is closed.
|
|
757
|
-
*/
|
|
758
|
-
setCloseCallback(callback) {
|
|
759
|
-
closeCallback = callback;
|
|
760
|
-
},
|
|
761
|
-
isInterceptorEnabled() {
|
|
762
|
-
return isInterceptorEnabled;
|
|
763
|
-
},
|
|
764
|
-
enableInterception() {
|
|
765
|
-
if (isInterceptorEnabled) {
|
|
44
|
+
const useWebSocketInspector = (client, websocketInspector, isEnabled, isRecordingEnabled) => {
|
|
45
|
+
react.useEffect(() => {
|
|
46
|
+
if (!client || !isEnabled) {
|
|
766
47
|
return;
|
|
767
48
|
}
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
}
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
}
|
|
783
|
-
}
|
|
784
|
-
);
|
|
785
|
-
this.addEventListener("close", (event) => {
|
|
786
|
-
if (closeCallback) {
|
|
787
|
-
closeCallback(event, this);
|
|
788
|
-
}
|
|
789
|
-
});
|
|
790
|
-
return originalOpen.call(this);
|
|
791
|
-
};
|
|
792
|
-
eventSourceClass.prototype.dispatch = function(eventType, data) {
|
|
793
|
-
if (!BUILT_IN_EVENT_TYPES.has(eventType)) {
|
|
794
|
-
if (messageCallback) {
|
|
795
|
-
messageCallback(data, this);
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
return originalDispatch.call(this, eventType, data);
|
|
49
|
+
const subscriptions = [
|
|
50
|
+
client.onMessage("network-enable", () => {
|
|
51
|
+
websocketInspector.enable();
|
|
52
|
+
}),
|
|
53
|
+
client.onMessage("network-disable", () => {
|
|
54
|
+
websocketInspector.disable();
|
|
55
|
+
})
|
|
56
|
+
];
|
|
57
|
+
if (isRecordingEnabled) {
|
|
58
|
+
websocketInspector.enable();
|
|
59
|
+
}
|
|
60
|
+
return () => {
|
|
61
|
+
subscriptions.forEach((subscription) => subscription.remove());
|
|
62
|
+
websocketInspector.dispose();
|
|
799
63
|
};
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
if (!
|
|
64
|
+
}, [client, websocketInspector, isEnabled, isRecordingEnabled]);
|
|
65
|
+
};
|
|
66
|
+
const useSSEInspector = (client, sseInspector, isEnabled, isRecordingEnabled) => {
|
|
67
|
+
react.useEffect(() => {
|
|
68
|
+
if (!client || !isEnabled) {
|
|
805
69
|
return;
|
|
806
70
|
}
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
const getSSEInspector = () => {
|
|
818
|
-
const eventEmitter = nanoevents.createNanoEvents();
|
|
819
|
-
const getRequestId = (eventSource2) => {
|
|
820
|
-
var _a;
|
|
821
|
-
const requestId = (_a = eventSource2._xhr) == null ? void 0 : _a._rozeniteRequestId;
|
|
822
|
-
if (!requestId) {
|
|
823
|
-
return null;
|
|
71
|
+
const subscriptions = [
|
|
72
|
+
client.onMessage("network-enable", () => {
|
|
73
|
+
sseInspector.enable();
|
|
74
|
+
}),
|
|
75
|
+
client.onMessage("network-disable", () => {
|
|
76
|
+
sseInspector.disable();
|
|
77
|
+
})
|
|
78
|
+
];
|
|
79
|
+
if (isRecordingEnabled) {
|
|
80
|
+
sseInspector.enable();
|
|
824
81
|
}
|
|
825
|
-
return
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
const sseEventSource = eventSource2;
|
|
831
|
-
const requestId = getRequestId(sseEventSource);
|
|
832
|
-
if (!requestId) {
|
|
833
|
-
return;
|
|
834
|
-
}
|
|
835
|
-
const sseXhr = sseEventSource._xhr;
|
|
836
|
-
const event = {
|
|
837
|
-
type: "sse-open",
|
|
838
|
-
requestId,
|
|
839
|
-
timestamp: Date.now(),
|
|
840
|
-
response: {
|
|
841
|
-
url: sseXhr._url,
|
|
842
|
-
status: sseXhr.status,
|
|
843
|
-
statusText: sseXhr.statusText,
|
|
844
|
-
headers: sseXhr.responseHeaders || {},
|
|
845
|
-
contentType: getContentType(sseXhr),
|
|
846
|
-
size: 0,
|
|
847
|
-
responseTime: Date.now()
|
|
848
|
-
}
|
|
849
|
-
};
|
|
850
|
-
eventEmitter.emit("sse-open", event);
|
|
851
|
-
});
|
|
852
|
-
SSEInterceptor.setMessageCallback((messageEvent, eventSource2) => {
|
|
853
|
-
const sseEventSource = eventSource2;
|
|
854
|
-
const requestId = getRequestId(sseEventSource);
|
|
855
|
-
if (!requestId) {
|
|
856
|
-
return;
|
|
857
|
-
}
|
|
858
|
-
const event = {
|
|
859
|
-
type: "sse-message",
|
|
860
|
-
requestId,
|
|
861
|
-
timestamp: Date.now(),
|
|
862
|
-
payload: {
|
|
863
|
-
type: messageEvent.type,
|
|
864
|
-
data: messageEvent.data || ""
|
|
865
|
-
}
|
|
866
|
-
};
|
|
867
|
-
eventEmitter.emit("sse-message", event);
|
|
868
|
-
});
|
|
869
|
-
SSEInterceptor.setErrorCallback((errorEvent, eventSource2) => {
|
|
870
|
-
const sseEventSource = eventSource2;
|
|
871
|
-
const requestId = getRequestId(sseEventSource);
|
|
872
|
-
if (!requestId) {
|
|
873
|
-
return;
|
|
874
|
-
}
|
|
875
|
-
const event = {
|
|
876
|
-
type: "sse-error",
|
|
877
|
-
requestId,
|
|
878
|
-
timestamp: Date.now(),
|
|
879
|
-
error: {
|
|
880
|
-
type: errorEvent.type,
|
|
881
|
-
message: errorEvent.type === "timeout" ? "Timeout" : errorEvent.message
|
|
882
|
-
}
|
|
883
|
-
};
|
|
884
|
-
eventEmitter.emit("sse-error", event);
|
|
885
|
-
});
|
|
886
|
-
SSEInterceptor.setCloseCallback((_, eventSource2) => {
|
|
887
|
-
const sseEventSource = eventSource2;
|
|
888
|
-
const requestId = getRequestId(sseEventSource);
|
|
889
|
-
if (!requestId) {
|
|
890
|
-
return;
|
|
891
|
-
}
|
|
892
|
-
const event = {
|
|
893
|
-
type: "sse-close",
|
|
894
|
-
requestId,
|
|
895
|
-
timestamp: Date.now()
|
|
896
|
-
};
|
|
897
|
-
eventEmitter.emit("sse-close", event);
|
|
898
|
-
});
|
|
899
|
-
SSEInterceptor.enableInterception();
|
|
900
|
-
},
|
|
901
|
-
disable: () => {
|
|
902
|
-
SSEInterceptor.disableInterception();
|
|
903
|
-
},
|
|
904
|
-
isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
|
|
905
|
-
dispose: () => {
|
|
906
|
-
SSEInterceptor.disableInterception();
|
|
907
|
-
eventEmitter.events = {};
|
|
908
|
-
},
|
|
909
|
-
on: (event, callback) => eventEmitter.on(event, callback)
|
|
910
|
-
};
|
|
911
|
-
};
|
|
912
|
-
const DEFAULT_CONFIG = {
|
|
913
|
-
inspectors: {
|
|
914
|
-
http: true,
|
|
915
|
-
websocket: true,
|
|
916
|
-
sse: true
|
|
917
|
-
},
|
|
918
|
-
clientUISettings: {
|
|
919
|
-
showUrlAsName: false
|
|
920
|
-
}
|
|
921
|
-
};
|
|
922
|
-
const validateConfig = (config) => {
|
|
923
|
-
const inspectors = config.inspectors;
|
|
924
|
-
if (!inspectors) {
|
|
925
|
-
return;
|
|
926
|
-
}
|
|
927
|
-
if (inspectors.sse && !inspectors.http) {
|
|
928
|
-
throw new Error("SSE inspector requires HTTP inspector to be enabled.");
|
|
929
|
-
}
|
|
82
|
+
return () => {
|
|
83
|
+
subscriptions.forEach((subscription) => subscription.remove());
|
|
84
|
+
sseInspector.dispose();
|
|
85
|
+
};
|
|
86
|
+
}, [client, sseInspector, isEnabled, isRecordingEnabled]);
|
|
930
87
|
};
|
|
931
|
-
const
|
|
932
|
-
const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
|
|
88
|
+
const inspectorsConfig = bootRecording.createNetworkInspectorsConfiguration();
|
|
89
|
+
const useNetworkActivityDevTools = (config = bootRecording.DEFAULT_CONFIG) => {
|
|
933
90
|
var _a, _b, _c, _d;
|
|
934
91
|
const isRecordingEnabledRef = react.useRef(false);
|
|
935
92
|
const client = pluginBridge.useRozeniteDevToolsClient({
|
|
@@ -939,11 +96,12 @@ const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
|
|
|
939
96
|
const isWebSocketInspectorEnabled = ((_b = config.inspectors) == null ? void 0 : _b.websocket) ?? true;
|
|
940
97
|
const isSSEInspectorEnabled = ((_c = config.inspectors) == null ? void 0 : _c.sse) ?? true;
|
|
941
98
|
const showUrlAsName = (_d = config.clientUISettings) == null ? void 0 : _d.showUrlAsName;
|
|
99
|
+
const { eventsListener, networkInspector } = inspectorsConfig;
|
|
942
100
|
react.useEffect(() => {
|
|
943
101
|
if (!client) {
|
|
944
102
|
return;
|
|
945
103
|
}
|
|
946
|
-
validateConfig(config);
|
|
104
|
+
bootRecording.validateConfig(config);
|
|
947
105
|
}, [config]);
|
|
948
106
|
react.useEffect(() => {
|
|
949
107
|
if (!client) {
|
|
@@ -953,20 +111,30 @@ const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
|
|
|
953
111
|
var _a2;
|
|
954
112
|
client.send("client-ui-settings", {
|
|
955
113
|
settings: {
|
|
956
|
-
showUrlAsName: showUrlAsName ?? ((_a2 = DEFAULT_CONFIG.clientUISettings) == null ? void 0 : _a2.showUrlAsName)
|
|
114
|
+
showUrlAsName: showUrlAsName ?? ((_a2 = bootRecording.DEFAULT_CONFIG.clientUISettings) == null ? void 0 : _a2.showUrlAsName)
|
|
957
115
|
}
|
|
958
116
|
});
|
|
959
117
|
};
|
|
960
118
|
const subscriptions = [
|
|
961
119
|
client.onMessage("network-enable", () => {
|
|
962
120
|
isRecordingEnabledRef.current = true;
|
|
121
|
+
eventsListener.connect(client.send, (message) => {
|
|
122
|
+
const type = message.type;
|
|
123
|
+
if (bootRecording.isHttpEvent(type)) {
|
|
124
|
+
return isHttpInspectorEnabled;
|
|
125
|
+
}
|
|
126
|
+
if (bootRecording.isWebSocketEvent(type)) {
|
|
127
|
+
return isWebSocketInspectorEnabled;
|
|
128
|
+
}
|
|
129
|
+
if (bootRecording.isSSEEvent(type)) {
|
|
130
|
+
return isSSEInspectorEnabled;
|
|
131
|
+
}
|
|
132
|
+
return true;
|
|
133
|
+
});
|
|
963
134
|
}),
|
|
964
135
|
client.onMessage("network-disable", () => {
|
|
965
136
|
isRecordingEnabledRef.current = false;
|
|
966
137
|
}),
|
|
967
|
-
client.onMessage("set-overrides", (data) => {
|
|
968
|
-
overridesRegistry.setOverrides(data.overrides);
|
|
969
|
-
}),
|
|
970
138
|
client.onMessage("get-client-ui-settings", () => {
|
|
971
139
|
sendClientUISettings();
|
|
972
140
|
})
|
|
@@ -975,80 +143,31 @@ const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
|
|
|
975
143
|
return () => {
|
|
976
144
|
subscriptions.forEach((subscription) => subscription.remove());
|
|
977
145
|
};
|
|
978
|
-
}, [
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
];
|
|
1004
|
-
const websocketInspector = getWebSocketInspector();
|
|
1005
|
-
eventsToForward.forEach((event) => {
|
|
1006
|
-
websocketInspector.on(event, (event2) => {
|
|
1007
|
-
client.send(event2.type, event2);
|
|
1008
|
-
});
|
|
1009
|
-
});
|
|
1010
|
-
client.onMessage("network-enable", () => {
|
|
1011
|
-
websocketInspector.enable();
|
|
1012
|
-
});
|
|
1013
|
-
client.onMessage("network-disable", () => {
|
|
1014
|
-
websocketInspector.disable();
|
|
1015
|
-
});
|
|
1016
|
-
if (isRecordingEnabledRef.current) {
|
|
1017
|
-
websocketInspector.enable();
|
|
1018
|
-
}
|
|
1019
|
-
return () => {
|
|
1020
|
-
websocketInspector.dispose();
|
|
1021
|
-
};
|
|
1022
|
-
}, [client, isWebSocketInspectorEnabled]);
|
|
1023
|
-
react.useEffect(() => {
|
|
1024
|
-
if (!client || !isSSEInspectorEnabled) {
|
|
1025
|
-
return;
|
|
1026
|
-
}
|
|
1027
|
-
const eventsToForward = [
|
|
1028
|
-
"sse-open",
|
|
1029
|
-
"sse-message",
|
|
1030
|
-
"sse-error",
|
|
1031
|
-
"sse-close"
|
|
1032
|
-
];
|
|
1033
|
-
const sseInspector = getSSEInspector();
|
|
1034
|
-
eventsToForward.forEach((event) => {
|
|
1035
|
-
sseInspector.on(event, (event2) => {
|
|
1036
|
-
client.send(event2.type, event2);
|
|
1037
|
-
});
|
|
1038
|
-
});
|
|
1039
|
-
client.onMessage("network-enable", () => {
|
|
1040
|
-
sseInspector.enable();
|
|
1041
|
-
});
|
|
1042
|
-
client.onMessage("network-disable", () => {
|
|
1043
|
-
sseInspector.disable();
|
|
1044
|
-
});
|
|
1045
|
-
if (isRecordingEnabledRef.current) {
|
|
1046
|
-
sseInspector.enable();
|
|
1047
|
-
}
|
|
1048
|
-
return () => {
|
|
1049
|
-
sseInspector.dispose();
|
|
1050
|
-
};
|
|
1051
|
-
}, [client, isSSEInspectorEnabled]);
|
|
146
|
+
}, [
|
|
147
|
+
client,
|
|
148
|
+
showUrlAsName,
|
|
149
|
+
isHttpInspectorEnabled,
|
|
150
|
+
isWebSocketInspectorEnabled,
|
|
151
|
+
isSSEInspectorEnabled
|
|
152
|
+
]);
|
|
153
|
+
useHttpInspector(
|
|
154
|
+
client,
|
|
155
|
+
networkInspector.http,
|
|
156
|
+
isHttpInspectorEnabled,
|
|
157
|
+
isRecordingEnabledRef.current
|
|
158
|
+
);
|
|
159
|
+
useWebSocketInspector(
|
|
160
|
+
client,
|
|
161
|
+
networkInspector.websocket,
|
|
162
|
+
isWebSocketInspectorEnabled,
|
|
163
|
+
isRecordingEnabledRef.current
|
|
164
|
+
);
|
|
165
|
+
useSSEInspector(
|
|
166
|
+
client,
|
|
167
|
+
networkInspector.sse,
|
|
168
|
+
isSSEInspectorEnabled,
|
|
169
|
+
isRecordingEnabledRef.current
|
|
170
|
+
);
|
|
1052
171
|
return client;
|
|
1053
172
|
};
|
|
1054
173
|
exports.useNetworkActivityDevTools = useNetworkActivityDevTools;
|