react-native-inapp-inspector 2.3.14 → 2.3.15

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.
Files changed (65) hide show
  1. package/dist/commonjs/components/AnimatedEntrance.js +3 -3
  2. package/dist/commonjs/components/ConsoleLogCard.js +174 -100
  3. package/dist/commonjs/components/Inspector/ConsoleTab.js +25 -16
  4. package/dist/commonjs/components/Inspector/CrashTab.js +19 -5
  5. package/dist/commonjs/components/Inspector/DeviceInfoTab.js +198 -98
  6. package/dist/commonjs/components/Inspector/InspectorHeader.js +2 -2
  7. package/dist/commonjs/components/Inspector/MainScreen.js +56 -56
  8. package/dist/commonjs/components/Inspector/NetworkTab.js +1 -335
  9. package/dist/commonjs/components/Inspector/PerformanceTab.js +32 -6
  10. package/dist/commonjs/components/Inspector/ReduxTab.js +3 -1
  11. package/dist/commonjs/components/Inspector/StorageTab.js +23 -5
  12. package/dist/commonjs/components/JsonViewer.js +14 -2
  13. package/dist/commonjs/components/LogCard.js +428 -227
  14. package/dist/commonjs/constants/version.d.ts +1 -1
  15. package/dist/commonjs/constants/version.js +1 -1
  16. package/dist/commonjs/customHooks/analyticsLogger.js +1 -1
  17. package/dist/commonjs/customHooks/consoleLogger.js +34 -2
  18. package/dist/commonjs/customHooks/crashHandler.js +1 -1
  19. package/dist/commonjs/customHooks/networkLogger.js +184 -26
  20. package/dist/commonjs/helpers/searchQueryParser.d.ts +1 -1
  21. package/dist/commonjs/helpers/searchQueryParser.js +37 -291
  22. package/dist/commonjs/index.js +141 -27
  23. package/dist/esm/components/AnimatedEntrance.js +3 -3
  24. package/dist/esm/components/ConsoleLogCard.js +141 -100
  25. package/dist/esm/components/Inspector/ConsoleTab.js +25 -16
  26. package/dist/esm/components/Inspector/CrashTab.js +19 -5
  27. package/dist/esm/components/Inspector/DeviceInfoTab.js +198 -98
  28. package/dist/esm/components/Inspector/InspectorHeader.js +3 -3
  29. package/dist/esm/components/Inspector/MainScreen.js +56 -56
  30. package/dist/esm/components/Inspector/NetworkTab.js +2 -336
  31. package/dist/esm/components/Inspector/PerformanceTab.js +32 -6
  32. package/dist/esm/components/Inspector/ReduxTab.js +3 -1
  33. package/dist/esm/components/Inspector/StorageTab.js +23 -5
  34. package/dist/esm/components/JsonViewer.js +14 -2
  35. package/dist/esm/components/LogCard.js +422 -221
  36. package/dist/esm/constants/version.d.ts +1 -1
  37. package/dist/esm/constants/version.js +1 -1
  38. package/dist/esm/customHooks/analyticsLogger.js +1 -1
  39. package/dist/esm/customHooks/consoleLogger.js +34 -2
  40. package/dist/esm/customHooks/crashHandler.js +1 -1
  41. package/dist/esm/customHooks/networkLogger.js +184 -26
  42. package/dist/esm/helpers/searchQueryParser.d.ts +1 -1
  43. package/dist/esm/helpers/searchQueryParser.js +37 -291
  44. package/dist/esm/index.js +141 -27
  45. package/package.json +1 -1
  46. package/src/components/AnimatedEntrance.tsx +3 -3
  47. package/src/components/ConsoleLogCard.tsx +154 -103
  48. package/src/components/Inspector/ConsoleTab.tsx +27 -18
  49. package/src/components/Inspector/CrashTab.tsx +19 -5
  50. package/src/components/Inspector/DeviceInfoTab.tsx +224 -102
  51. package/src/components/Inspector/InspectorHeader.tsx +5 -3
  52. package/src/components/Inspector/MainScreen.tsx +2 -3
  53. package/src/components/Inspector/NetworkTab.tsx +1 -402
  54. package/src/components/Inspector/PerformanceTab.tsx +36 -7
  55. package/src/components/Inspector/ReduxTab.tsx +9 -1
  56. package/src/components/Inspector/StorageTab.tsx +27 -7
  57. package/src/components/JsonViewer.tsx +15 -2
  58. package/src/components/LogCard.tsx +528 -339
  59. package/src/constants/version.ts +1 -1
  60. package/src/customHooks/analyticsLogger.ts +1 -1
  61. package/src/customHooks/consoleLogger.ts +36 -3
  62. package/src/customHooks/crashHandler.ts +1 -1
  63. package/src/customHooks/networkLogger.ts +214 -26
  64. package/src/helpers/searchQueryParser.ts +40 -285
  65. package/src/index.tsx +332 -211
@@ -1 +1 @@
1
- export declare const LIB_VERSION = "2.3.14";
1
+ export declare const LIB_VERSION = "2.3.15";
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LIB_VERSION = void 0;
4
- exports.LIB_VERSION = '2.3.14';
4
+ exports.LIB_VERSION = '2.3.15';
@@ -15,7 +15,7 @@ let currentUserProperties = {};
15
15
  let currentUserId;
16
16
  let currentDefaultEventParameters = {};
17
17
  let isCollectionEnabled = true;
18
- let maxAnalyticsLogsLimit = 75;
18
+ let maxAnalyticsLogsLimit = 150;
19
19
  const setMaxAnalyticsLogsLimit = (limit) => {
20
20
  maxAnalyticsLogsLimit = Math.max(10, limit);
21
21
  if (events.length > maxAnalyticsLogsLimit) {
@@ -15,7 +15,7 @@ const setConsoleModuleEnabled = (enabled) => {
15
15
  exports.setConsoleModuleEnabled = setConsoleModuleEnabled;
16
16
  const getConsoleModuleEnabled = () => isConsoleModuleEnabled;
17
17
  exports.getConsoleModuleEnabled = getConsoleModuleEnabled;
18
- let maxConsoleLogsLimit = 100;
18
+ let maxConsoleLogsLimit = 250;
19
19
  const setMaxConsoleLogsLimit = (limit) => {
20
20
  maxConsoleLogsLimit = Math.max(10, limit);
21
21
  if (logs.length > maxConsoleLogsLimit) {
@@ -245,7 +245,7 @@ const addLog = (type, args, sourceMethod) => {
245
245
  logs = logs.slice(0, maxConsoleLogsLimit);
246
246
  notify();
247
247
  const stackToSymbolicate = errorStack || stackToUse || stack;
248
- if (stackToSymbolicate && typeof __DEV__ !== 'undefined' && __DEV__) {
248
+ if (type === 'error' && stackToSymbolicate && typeof __DEV__ !== 'undefined' && __DEV__) {
249
249
  const currentLogId = newLog.id;
250
250
  symbolicateStack(stackToSymbolicate)
251
251
  .then(symFrames => {
@@ -367,6 +367,8 @@ const setupConsoleLogger = () => {
367
367
  info: console.info,
368
368
  warn: console.warn,
369
369
  error: console.error,
370
+ debug: console.debug,
371
+ trace: console.trace,
370
372
  };
371
373
  console.log = (...args) => {
372
374
  try {
@@ -382,6 +384,30 @@ const setupConsoleLogger = () => {
382
384
  catch { }
383
385
  originalConsole.info(...args);
384
386
  };
387
+ console.debug = (...args) => {
388
+ try {
389
+ addLog('info', args, 'info');
390
+ }
391
+ catch { }
392
+ if (typeof originalConsole.debug === 'function') {
393
+ originalConsole.debug(...args);
394
+ }
395
+ else {
396
+ originalConsole.log(...args);
397
+ }
398
+ };
399
+ console.trace = (...args) => {
400
+ try {
401
+ addLog('info', args, 'info');
402
+ }
403
+ catch { }
404
+ if (typeof originalConsole.trace === 'function') {
405
+ originalConsole.trace(...args);
406
+ }
407
+ else {
408
+ originalConsole.log(...args);
409
+ }
410
+ };
385
411
  console.warn = (...args) => {
386
412
  try {
387
413
  addLog('warn', args, 'warn');
@@ -411,3 +437,9 @@ const setupConsoleLogger = () => {
411
437
  globalThis.__CONSOLE_LOGGER_INITIALIZED__ = true;
412
438
  };
413
439
  exports.setupConsoleLogger = setupConsoleLogger;
440
+ if (typeof globalThis !== 'undefined') {
441
+ try {
442
+ (0, exports.setupConsoleLogger)();
443
+ }
444
+ catch { }
445
+ }
@@ -13,7 +13,7 @@ let lastHandledErrorTimestamp = 0;
13
13
  let crashRecordsStore = [];
14
14
  let breadcrumbsStore = [];
15
15
  const MAX_BREADCRUMBS = 50;
16
- let maxStoredCrashes = 50;
16
+ let maxStoredCrashes = 100;
17
17
  const appStartTime = Date.now();
18
18
  let isCrashModuleEnabled = false;
19
19
  const setCrashModuleEnabled = (enabled) => {
@@ -21,16 +21,22 @@ const setNetworkModuleEnabled = (enabled) => {
21
21
  exports.setNetworkModuleEnabled = setNetworkModuleEnabled;
22
22
  const getNetworkModuleEnabled = () => isNetworkModuleEnabled;
23
23
  exports.getNetworkModuleEnabled = getNetworkModuleEnabled;
24
- const ALLOWED_METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"];
24
+ const ALLOWED_METHODS = [
25
+ "GET",
26
+ "POST",
27
+ "PUT",
28
+ "PATCH",
29
+ "DELETE",
30
+ "HEAD",
31
+ "OPTIONS",
32
+ "CONNECT",
33
+ "TRACE",
34
+ ];
25
35
  const IGNORED_URL_PATTERNS = [
26
- /\/symbolicate(?:[/?#]|$)/i,
36
+ /\/symbolicate(?:\?|$)/i,
27
37
  /\/index\.bundle(?:\?|$)/i,
28
- /\/hot(?:\?|$)/i,
29
- /\/message(?:\?|$)/i,
30
38
  /\/open-debugger(?:\?|$)/i,
31
- /\/status(?:\?|$)/i,
32
- /127\.0\.0\.1:(?:8081|8082|8083|19000|19001|19002|3000|8000)/i,
33
- /localhost:(?:8081|8082|8083|19000|19001|19002|3000|8000)\/index\.bundle/i,
39
+ /:(?:8081|8082|8083|19000|19001)\/(?:index\.bundle|symbolicate|hot|message|status)/i,
34
40
  /google-analytics\.com\/mp\/collect/i,
35
41
  /analytics\.google\.com/i,
36
42
  ];
@@ -39,6 +45,21 @@ function shouldIgnoreUrl(url) {
39
45
  return false;
40
46
  return IGNORED_URL_PATTERNS.some((re) => re.test(url));
41
47
  }
48
+ function parseXHRResponseHeaders(headerStr) {
49
+ if (!headerStr || typeof headerStr !== "string")
50
+ return undefined;
51
+ const lines = headerStr.trim().split(/[\r\n]+/);
52
+ const result = {};
53
+ lines.forEach((line) => {
54
+ const idx = line.indexOf(":");
55
+ if (idx > 0) {
56
+ const key = line.substring(0, idx).trim().toLowerCase();
57
+ const val = line.substring(idx + 1).trim();
58
+ result[key] = val;
59
+ }
60
+ });
61
+ return Object.keys(result).length > 0 ? result : undefined;
62
+ }
42
63
  function normaliseHeaders(raw) {
43
64
  if (!raw)
44
65
  return undefined;
@@ -124,7 +145,7 @@ const clearNetworkLogs = () => {
124
145
  exports.clearNetworkLogs = clearNetworkLogs;
125
146
  const getNetworkLogs = () => [...logs];
126
147
  exports.getNetworkLogs = getNetworkLogs;
127
- let maxNetworkLogsLimit = 100;
148
+ let maxNetworkLogsLimit = 250;
128
149
  const setMaxNetworkLogsLimit = (limit) => {
129
150
  maxNetworkLogsLimit = Math.max(10, limit);
130
151
  if (logs.length > maxNetworkLogsLimit) {
@@ -153,7 +174,7 @@ const addOrUpdateLog = (log) => {
153
174
  if (!isNetworkModuleEnabled)
154
175
  return;
155
176
  const method = log.method?.toUpperCase();
156
- if (!ALLOWED_METHODS.includes(method))
177
+ if (method && !ALLOWED_METHODS.includes(method))
157
178
  return;
158
179
  if (shouldIgnoreUrl(log.url))
159
180
  return;
@@ -167,18 +188,143 @@ const addOrUpdateLog = (log) => {
167
188
  logs = logs.slice(0, maxNetworkLogsLimit);
168
189
  notify();
169
190
  };
191
+ let isInsideFetch = false;
170
192
  const setupNetworkLogger = () => {
171
193
  if (globalThis.__NETWORK_LOGGER_INITIALIZED__)
172
194
  return;
173
195
  globalThis.__NETWORK_LOGGER__ = addOrUpdateLog;
196
+ const globalXHR = globalThis.XMLHttpRequest;
197
+ if (globalXHR && globalXHR.prototype && !globalThis.__XHR_LOGGER_INITIALIZED__) {
198
+ globalThis.__XHR_LOGGER_INITIALIZED__ = true;
199
+ const originalOpen = globalXHR.prototype.open;
200
+ const originalSend = globalXHR.prototype.send;
201
+ const originalSetRequestHeader = globalXHR.prototype.setRequestHeader;
202
+ globalXHR.prototype.open = function (method, url, async, user, password) {
203
+ this.__logMethod = (method || "GET").toUpperCase();
204
+ this.__logUrl = typeof url === "string" ? url : String(url);
205
+ this.__logRequestHeaders = {};
206
+ this.__logStartTime = Date.now();
207
+ this.__logCaller = getCallerFromStack();
208
+ return originalOpen.apply(this, [method, url, async !== false, user, password]);
209
+ };
210
+ globalXHR.prototype.setRequestHeader = function (header, value) {
211
+ if (header && value != null) {
212
+ if (!this.__logRequestHeaders)
213
+ this.__logRequestHeaders = {};
214
+ this.__logRequestHeaders[header.toLowerCase()] = String(value);
215
+ }
216
+ return originalSetRequestHeader.apply(this, [header, value]);
217
+ };
218
+ globalXHR.prototype.send = function (body) {
219
+ if (!isNetworkModuleEnabled || isInsideFetch || this.__inAppInspectorTracked) {
220
+ return originalSend.apply(this, [body]);
221
+ }
222
+ const url = this.__logUrl || "";
223
+ const method = this.__logMethod || "GET";
224
+ if (shouldIgnoreUrl(url)) {
225
+ return originalSend.apply(this, [body]);
226
+ }
227
+ const id = counter++;
228
+ this.__logId = id;
229
+ const start = this.__logStartTime || Date.now();
230
+ const caller = this.__logCaller || "Unknown";
231
+ const requestHeaders = this.__logRequestHeaders;
232
+ let client = "xhr";
233
+ if (requestHeaders?.["apollographql-client-name"] ||
234
+ url.toLowerCase().includes("/graphql")) {
235
+ client = "apollo";
236
+ }
237
+ else if (caller.toLowerCase().includes("axios")) {
238
+ client = "axios";
239
+ }
240
+ const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
241
+ addOrUpdateLog({
242
+ id,
243
+ url,
244
+ method,
245
+ startTime: start,
246
+ caller,
247
+ client,
248
+ routeInfo: currentRoute || undefined,
249
+ request: method === "GET" ? undefined : parseRequestData(body),
250
+ requestHeaders: Object.keys(requestHeaders || {}).length > 0 ? requestHeaders : undefined,
251
+ });
252
+ const onFinished = () => {
253
+ if (this.__logFinished)
254
+ return;
255
+ this.__logFinished = true;
256
+ const duration = Date.now() - start;
257
+ let responseData = null;
258
+ try {
259
+ if (this.responseType === "" || this.responseType === "text") {
260
+ const raw = this.responseText;
261
+ try {
262
+ responseData = JSON.parse(raw);
263
+ }
264
+ catch {
265
+ responseData = raw;
266
+ }
267
+ }
268
+ else if (this.responseType === "json") {
269
+ responseData = this.response;
270
+ }
271
+ else if (this.responseType === "blob") {
272
+ responseData = `[Blob: ${this.response?.size || 0} bytes]`;
273
+ }
274
+ else {
275
+ responseData = `[${this.responseType || "Unknown"} Data]`;
276
+ }
277
+ }
278
+ catch {
279
+ responseData = this.response || null;
280
+ }
281
+ const rawRespHeaders = this.getAllResponseHeaders
282
+ ? this.getAllResponseHeaders()
283
+ : "";
284
+ const responseHeaders = parseXHRResponseHeaders(rawRespHeaders);
285
+ addOrUpdateLog({
286
+ id,
287
+ url,
288
+ method,
289
+ status: this.status,
290
+ response: responseData,
291
+ duration,
292
+ startTime: start,
293
+ caller,
294
+ client,
295
+ responseHeaders,
296
+ });
297
+ };
298
+ const onErrorOrAbort = () => {
299
+ if (this.__logFinished)
300
+ return;
301
+ this.__logFinished = true;
302
+ const duration = Date.now() - start;
303
+ addOrUpdateLog({
304
+ id,
305
+ url,
306
+ method,
307
+ status: this.status || 0,
308
+ response: "Network request failed",
309
+ duration,
310
+ startTime: start,
311
+ caller,
312
+ client,
313
+ });
314
+ };
315
+ this.addEventListener("load", onFinished);
316
+ this.addEventListener("error", onErrorOrAbort);
317
+ this.addEventListener("abort", onErrorOrAbort);
318
+ this.addEventListener("timeout", onErrorOrAbort);
319
+ return originalSend.apply(this, [body]);
320
+ };
321
+ }
174
322
  const originalFetch = globalThis.fetch;
175
323
  if (originalFetch) {
176
324
  globalThis.fetch = async (url, options = {}) => {
177
325
  if (!isNetworkModuleEnabled)
178
326
  return originalFetch(url, options);
179
327
  const method = (options?.method || "GET").toUpperCase();
180
- if (!ALLOWED_METHODS.includes(method))
181
- return originalFetch(url, options);
182
328
  const id = counter++;
183
329
  const start = Date.now();
184
330
  const finalUrl = typeof url === "string" ? url : url?.url;
@@ -186,18 +332,19 @@ const setupNetworkLogger = () => {
186
332
  return originalFetch(url, options);
187
333
  let caller = "Unknown";
188
334
  let requestHeaders;
189
- let client = 'fetch';
335
+ let client = "fetch";
190
336
  try {
191
337
  requestHeaders = normaliseHeaders(options?.headers);
192
338
  caller = getCallerFromStack();
193
- if (requestHeaders?.['apollographql-client-name'] || finalUrl?.toLowerCase().includes('/graphql')) {
194
- client = 'apollo';
339
+ if (requestHeaders?.["apollographql-client-name"] ||
340
+ finalUrl?.toLowerCase().includes("/graphql")) {
341
+ client = "apollo";
195
342
  }
196
- else if (requestHeaders?.['x-requested-with']?.toLowerCase().includes('xmlhttprequest')) {
197
- client = 'xhr';
343
+ else if (requestHeaders?.["x-requested-with"]?.toLowerCase().includes("xmlhttprequest")) {
344
+ client = "xhr";
198
345
  }
199
- else if (caller?.toLowerCase().includes('axios')) {
200
- client = 'axios';
346
+ else if (caller?.toLowerCase().includes("axios")) {
347
+ client = "axios";
201
348
  }
202
349
  const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
203
350
  addOrUpdateLog({
@@ -214,7 +361,14 @@ const setupNetworkLogger = () => {
214
361
  }
215
362
  catch { }
216
363
  try {
217
- const response = await originalFetch(url, options);
364
+ isInsideFetch = true;
365
+ let response;
366
+ try {
367
+ response = await originalFetch(url, options);
368
+ }
369
+ finally {
370
+ isInsideFetch = false;
371
+ }
218
372
  const duration = Date.now() - start;
219
373
  try {
220
374
  const responseHeaders = normaliseHeaders(response.headers);
@@ -298,8 +452,6 @@ exports.setupNetworkLogger = setupNetworkLogger;
298
452
  const addAxiosInterceptors = (axiosInstance) => {
299
453
  axiosInstance.interceptors.request.use(async (config) => {
300
454
  const method = (config.method || "GET").toUpperCase();
301
- if (!ALLOWED_METHODS.includes(method))
302
- return config;
303
455
  const id = counter++;
304
456
  const start = Date.now();
305
457
  const caller = getCallerFromStack();
@@ -318,7 +470,7 @@ const addAxiosInterceptors = (axiosInstance) => {
318
470
  method,
319
471
  startTime: start,
320
472
  caller,
321
- client: 'axios',
473
+ client: "axios",
322
474
  routeInfo: currentRoute || undefined,
323
475
  request: method === "GET" ? undefined : parseRequestData(config.data),
324
476
  requestHeaders: normaliseHeaders(config.headers),
@@ -331,7 +483,7 @@ const addAxiosInterceptors = (axiosInstance) => {
331
483
  const start = config.__logStart;
332
484
  const caller = config.__logCaller;
333
485
  const method = (config.method || "GET").toUpperCase();
334
- if (id == null || !ALLOWED_METHODS.includes(method))
486
+ if (id == null)
335
487
  return response;
336
488
  let url = config.url ?? "";
337
489
  if (!url.startsWith("http"))
@@ -345,7 +497,7 @@ const addAxiosInterceptors = (axiosInstance) => {
345
497
  startTime: start || Date.now(),
346
498
  duration: start != null ? Date.now() - start : undefined,
347
499
  caller,
348
- client: 'axios',
500
+ client: "axios",
349
501
  responseHeaders: normaliseHeaders(response.headers),
350
502
  });
351
503
  return response;
@@ -355,7 +507,7 @@ const addAxiosInterceptors = (axiosInstance) => {
355
507
  const start = config.__logStart;
356
508
  const caller = config.__logCaller;
357
509
  const method = (config.method || "GET").toUpperCase();
358
- if (id != null && ALLOWED_METHODS.includes(method)) {
510
+ if (id != null) {
359
511
  let url = config.url ?? "";
360
512
  if (!url.startsWith("http"))
361
513
  url = `${config.baseURL ?? ""}${url}`;
@@ -368,7 +520,7 @@ const addAxiosInterceptors = (axiosInstance) => {
368
520
  startTime: start || Date.now(),
369
521
  duration: start != null ? Date.now() - start : undefined,
370
522
  caller,
371
- client: 'axios',
523
+ client: "axios",
372
524
  responseHeaders: normaliseHeaders(error.response?.headers),
373
525
  });
374
526
  }
@@ -376,3 +528,9 @@ const addAxiosInterceptors = (axiosInstance) => {
376
528
  });
377
529
  };
378
530
  exports.addAxiosInterceptors = addAxiosInterceptors;
531
+ if (typeof globalThis !== "undefined") {
532
+ try {
533
+ (0, exports.setupNetworkLogger)();
534
+ }
535
+ catch { }
536
+ }
@@ -4,4 +4,4 @@ export interface SearchQueryOptions {
4
4
  isRegex?: boolean;
5
5
  isCaseSensitive?: boolean;
6
6
  }
7
- export declare function matchNetworkLogQuery(log: NetworkLog, searchQuery: string, routePath?: string, options?: SearchQueryOptions): boolean;
7
+ export declare function matchNetworkLogQuery(log: NetworkLog, searchQuery: string, routePath?: string, _options?: SearchQueryOptions): boolean;