react-native-inapp-inspector 2.3.18 → 2.3.20

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 (358) hide show
  1. package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt +57 -0
  2. package/dist/commonjs/analytics.js +1 -24
  3. package/dist/commonjs/bundle.js +1 -16
  4. package/dist/commonjs/capture.d.ts +2 -0
  5. package/dist/commonjs/capture.js +1 -32
  6. package/dist/commonjs/components/AnalyticsDetail.js +92 -623
  7. package/dist/commonjs/components/AnalyticsEventCard.js +54 -350
  8. package/dist/commonjs/components/AnalyticsGraph.js +70 -370
  9. package/dist/commonjs/components/AnimatedEntrance.js +1 -11
  10. package/dist/commonjs/components/AppHeaderLogo.js +7 -134
  11. package/dist/commonjs/components/BrandCircleIcon.js +73 -118
  12. package/dist/commonjs/components/BrandSquareIcon.js +63 -108
  13. package/dist/commonjs/components/CodeSnippet.js +48 -623
  14. package/dist/commonjs/components/ConsoleLogCard.js +63 -537
  15. package/dist/commonjs/components/CopyButton.js +3 -89
  16. package/dist/commonjs/components/DiffViewer.js +19 -83
  17. package/dist/commonjs/components/DomainHeader.js +27 -127
  18. package/dist/commonjs/components/EmptyState.d.ts +1 -0
  19. package/dist/commonjs/components/EmptyState.js +10 -87
  20. package/dist/commonjs/components/EndOfListFooter.js +7 -81
  21. package/dist/commonjs/components/ErrorBoundary.js +72 -566
  22. package/dist/commonjs/components/HeadersSection.js +31 -110
  23. package/dist/commonjs/components/HighlightText.js +17 -58
  24. package/dist/commonjs/components/Inspector/AboutModal.d.ts +6 -0
  25. package/dist/commonjs/components/Inspector/AboutModal.js +351 -0
  26. package/dist/commonjs/components/Inspector/AnalyticsFilterModal.js +98 -797
  27. package/dist/commonjs/components/Inspector/AnalyticsTab.js +284 -930
  28. package/dist/commonjs/components/Inspector/BundleTab.js +551 -2918
  29. package/dist/commonjs/components/Inspector/ConsoleTab.js +79 -492
  30. package/dist/commonjs/components/Inspector/CrashDetail.js +123 -672
  31. package/dist/commonjs/components/Inspector/CrashFilterModal.js +66 -498
  32. package/dist/commonjs/components/Inspector/CrashTab.js +98 -670
  33. package/dist/commonjs/components/Inspector/DebuggingTab.js +64 -871
  34. package/dist/commonjs/components/Inspector/DeviceInfoTab.js +143 -907
  35. package/dist/commonjs/components/Inspector/FabLauncher.js +85 -54
  36. package/dist/commonjs/components/Inspector/FeatureUnderDevNotice.js +6 -99
  37. package/dist/commonjs/components/Inspector/FeedbackModal.d.ts +9 -0
  38. package/dist/commonjs/components/Inspector/FeedbackModal.js +167 -521
  39. package/dist/commonjs/components/Inspector/InspectorContext.js +1 -21
  40. package/dist/commonjs/components/Inspector/InspectorHeader.js +219 -1093
  41. package/dist/commonjs/components/Inspector/LogDetail.js +168 -994
  42. package/dist/commonjs/components/Inspector/MainScreen.js +60 -332
  43. package/dist/commonjs/components/Inspector/MediaGalleryTab.js +136 -278
  44. package/dist/commonjs/components/Inspector/MediaPreviewModal.js +134 -361
  45. package/dist/commonjs/components/Inspector/NavigationTracker.js +1 -12
  46. package/dist/commonjs/components/Inspector/NetworkDetail.js +96 -432
  47. package/dist/commonjs/components/Inspector/NetworkFilterModal.js +60 -576
  48. package/dist/commonjs/components/Inspector/NetworkTab.js +84 -514
  49. package/dist/commonjs/components/Inspector/NpmStarPrompt.js +17 -433
  50. package/dist/commonjs/components/Inspector/NpmUpdateToast.js +25 -298
  51. package/dist/commonjs/components/Inspector/PerformanceTab.js +182 -1397
  52. package/dist/commonjs/components/Inspector/ReduxDetail.js +188 -1089
  53. package/dist/commonjs/components/Inspector/ReduxTab.js +85 -701
  54. package/dist/commonjs/components/Inspector/SettingsPanel.js +431 -3431
  55. package/dist/commonjs/components/Inspector/SkeletonPlaceholder.js +11 -180
  56. package/dist/commonjs/components/Inspector/StorageTab.js +93 -826
  57. package/dist/commonjs/components/Inspector/TabBar.js +47 -183
  58. package/dist/commonjs/components/Inspector/UpdateAvailableModal.js +34 -408
  59. package/dist/commonjs/components/JsonViewer.js +168 -380
  60. package/dist/commonjs/components/LogCard.js +57 -567
  61. package/dist/commonjs/components/LogSyntaxHighlighter.js +11 -130
  62. package/dist/commonjs/components/MetaAccordion.js +69 -238
  63. package/dist/commonjs/components/MiniBarChart.js +3 -56
  64. package/dist/commonjs/components/MiniLineChart.js +3 -58
  65. package/dist/commonjs/components/NetworkIcons.d.ts +7 -0
  66. package/dist/commonjs/components/NetworkIcons.js +479 -997
  67. package/dist/commonjs/components/QRCodeView.js +5 -79
  68. package/dist/commonjs/components/SectionHeader.js +15 -37
  69. package/dist/commonjs/components/SegmentedTabs.js +7 -61
  70. package/dist/commonjs/components/SkeletonPlaceholder.js +11 -180
  71. package/dist/commonjs/components/Slider.js +15 -243
  72. package/dist/commonjs/components/SourcePageCard.js +30 -89
  73. package/dist/commonjs/components/Toast.js +5 -147
  74. package/dist/commonjs/components/TouchableScale.js +3 -24
  75. package/dist/commonjs/components/TreeNode.js +55 -130
  76. package/dist/commonjs/console.js +1 -16
  77. package/dist/commonjs/constants/index.js +1 -32
  78. package/dist/commonjs/constants/telemetryConfig.js +1 -6
  79. package/dist/commonjs/constants/version.d.ts +1 -1
  80. package/dist/commonjs/constants/version.js +1 -4
  81. package/dist/commonjs/crash.js +1 -23
  82. package/dist/commonjs/customHooks/analyticsLogger.js +1 -250
  83. package/dist/commonjs/customHooks/bundleAnalyzer.js +1 -957
  84. package/dist/commonjs/customHooks/consoleLogger.js +6 -445
  85. package/dist/commonjs/customHooks/crashHandler.js +7 -656
  86. package/dist/commonjs/customHooks/logFilters.js +1 -23
  87. package/dist/commonjs/customHooks/networkLogger.js +2 -536
  88. package/dist/commonjs/customHooks/performanceTracker.js +63 -750
  89. package/dist/commonjs/customHooks/reduxLogger.js +2 -313
  90. package/dist/commonjs/customHooks/storageInspector.js +1 -435
  91. package/dist/commonjs/customHooks/useAccordion.js +1 -18
  92. package/dist/commonjs/decorators/index.js +1 -100
  93. package/dist/commonjs/helpers/gaAnalyticsRegistry.js +1 -148
  94. package/dist/commonjs/helpers/index.js +8 -921
  95. package/dist/commonjs/helpers/memoryManager.js +1 -99
  96. package/dist/commonjs/helpers/qrGenerator.js +1 -367
  97. package/dist/commonjs/helpers/remoteConfig.js +1 -165
  98. package/dist/commonjs/helpers/searchQueryParser.js +1 -62
  99. package/dist/commonjs/helpers/settingsStore.js +1 -144
  100. package/dist/commonjs/helpers/telemetry.js +1 -501
  101. package/dist/commonjs/helpers/toast.js +1 -20
  102. package/dist/commonjs/i18n/index.js +1 -90
  103. package/dist/commonjs/i18n/locales/en.json +1 -1122
  104. package/dist/commonjs/index.js +5 -2153
  105. package/dist/commonjs/metro.js +6 -468
  106. package/dist/commonjs/native/NativeInspector.d.ts +3 -0
  107. package/dist/commonjs/native/NativeInspector.js +1 -402
  108. package/dist/commonjs/native/NativeNetworkInspector.d.ts +1 -0
  109. package/dist/commonjs/native/NativeNetworkInspector.js +1 -4
  110. package/dist/commonjs/network.js +1 -13
  111. package/dist/commonjs/performance.js +1 -29
  112. package/dist/commonjs/redux.js +1 -20
  113. package/dist/commonjs/storage.js +1 -14
  114. package/dist/commonjs/styles/AppColors.js +1 -423
  115. package/dist/commonjs/styles/AppFonts.js +1 -17
  116. package/dist/commonjs/styles/common.js +1 -190
  117. package/dist/commonjs/styles/index.d.ts +6 -0
  118. package/dist/commonjs/styles/index.js +1 -1589
  119. package/dist/commonjs/types/enums.d.ts +2 -1
  120. package/dist/commonjs/types/enums.js +1 -150
  121. package/dist/commonjs/types/index.js +1 -18
  122. package/dist/commonjs/types/interfaces.d.ts +7 -0
  123. package/dist/commonjs/types/interfaces.js +1 -2
  124. package/dist/esm/analytics.js +1 -2
  125. package/dist/esm/bundle.js +1 -2
  126. package/dist/esm/capture.d.ts +2 -0
  127. package/dist/esm/capture.js +1 -29
  128. package/dist/esm/components/AnalyticsDetail.js +171 -664
  129. package/dist/esm/components/AnalyticsEventCard.js +77 -335
  130. package/dist/esm/components/AnalyticsGraph.js +95 -357
  131. package/dist/esm/components/AnimatedEntrance.js +1 -6
  132. package/dist/esm/components/AppHeaderLogo.js +7 -94
  133. package/dist/esm/components/BrandCircleIcon.js +114 -119
  134. package/dist/esm/components/BrandSquareIcon.js +73 -78
  135. package/dist/esm/components/CodeSnippet.js +58 -595
  136. package/dist/esm/components/ConsoleLogCard.js +91 -526
  137. package/dist/esm/components/CopyButton.js +3 -51
  138. package/dist/esm/components/DiffViewer.js +22 -48
  139. package/dist/esm/components/DomainHeader.js +43 -138
  140. package/dist/esm/components/EmptyState.d.ts +1 -0
  141. package/dist/esm/components/EmptyState.js +17 -56
  142. package/dist/esm/components/EndOfListFooter.js +15 -83
  143. package/dist/esm/components/ErrorBoundary.js +125 -582
  144. package/dist/esm/components/HeadersSection.js +52 -93
  145. package/dist/esm/components/HighlightText.js +17 -53
  146. package/dist/esm/components/Inspector/AboutModal.d.ts +6 -0
  147. package/dist/esm/components/Inspector/AboutModal.js +351 -0
  148. package/dist/esm/components/Inspector/AnalyticsFilterModal.js +225 -886
  149. package/dist/esm/components/Inspector/AnalyticsTab.js +296 -904
  150. package/dist/esm/components/Inspector/BundleTab.js +1175 -3502
  151. package/dist/esm/components/Inspector/ConsoleTab.js +113 -488
  152. package/dist/esm/components/Inspector/CrashDetail.js +236 -747
  153. package/dist/esm/components/Inspector/CrashFilterModal.js +149 -541
  154. package/dist/esm/components/Inspector/CrashTab.js +177 -711
  155. package/dist/esm/components/Inspector/DebuggingTab.js +156 -923
  156. package/dist/esm/components/Inspector/DeviceInfoTab.js +199 -924
  157. package/dist/esm/components/Inspector/FabLauncher.js +85 -49
  158. package/dist/esm/components/Inspector/FeatureUnderDevNotice.js +14 -70
  159. package/dist/esm/components/Inspector/FeedbackModal.d.ts +9 -0
  160. package/dist/esm/components/Inspector/FeedbackModal.js +182 -499
  161. package/dist/esm/components/Inspector/InspectorContext.js +1 -12
  162. package/dist/esm/components/Inspector/InspectorHeader.js +309 -1145
  163. package/dist/esm/components/Inspector/LogDetail.js +235 -1023
  164. package/dist/esm/components/Inspector/MainScreen.js +86 -320
  165. package/dist/esm/components/Inspector/MediaGalleryTab.js +157 -259
  166. package/dist/esm/components/Inspector/MediaPreviewModal.js +153 -340
  167. package/dist/esm/components/Inspector/NavigationTracker.js +1 -10
  168. package/dist/esm/components/Inspector/NetworkDetail.js +141 -472
  169. package/dist/esm/components/Inspector/NetworkFilterModal.js +122 -597
  170. package/dist/esm/components/Inspector/NetworkTab.js +125 -517
  171. package/dist/esm/components/Inspector/NpmStarPrompt.js +58 -434
  172. package/dist/esm/components/Inspector/NpmUpdateToast.js +45 -281
  173. package/dist/esm/components/Inspector/PerformanceTab.js +393 -1570
  174. package/dist/esm/components/Inspector/ReduxDetail.js +307 -1170
  175. package/dist/esm/components/Inspector/ReduxTab.js +144 -722
  176. package/dist/esm/components/Inspector/SettingsPanel.js +647 -3609
  177. package/dist/esm/components/Inspector/SkeletonPlaceholder.js +30 -163
  178. package/dist/esm/components/Inspector/StorageTab.js +172 -866
  179. package/dist/esm/components/Inspector/TabBar.js +52 -183
  180. package/dist/esm/components/Inspector/UpdateAvailableModal.js +79 -416
  181. package/dist/esm/components/JsonViewer.js +179 -353
  182. package/dist/esm/components/LogCard.js +93 -565
  183. package/dist/esm/components/LogSyntaxHighlighter.js +11 -123
  184. package/dist/esm/components/MetaAccordion.js +136 -267
  185. package/dist/esm/components/MiniBarChart.js +3 -18
  186. package/dist/esm/components/MiniLineChart.js +3 -20
  187. package/dist/esm/components/NetworkIcons.d.ts +7 -0
  188. package/dist/esm/components/NetworkIcons.js +481 -817
  189. package/dist/esm/components/QRCodeView.js +8 -45
  190. package/dist/esm/components/SectionHeader.js +22 -39
  191. package/dist/esm/components/SegmentedTabs.js +8 -57
  192. package/dist/esm/components/SkeletonPlaceholder.js +30 -163
  193. package/dist/esm/components/Slider.js +24 -213
  194. package/dist/esm/components/SourcePageCard.js +65 -86
  195. package/dist/esm/components/Toast.js +10 -117
  196. package/dist/esm/components/TouchableScale.js +3 -19
  197. package/dist/esm/components/TreeNode.js +58 -95
  198. package/dist/esm/console.js +1 -2
  199. package/dist/esm/constants/index.js +1 -28
  200. package/dist/esm/constants/telemetryConfig.js +1 -3
  201. package/dist/esm/constants/version.d.ts +1 -1
  202. package/dist/esm/constants/version.js +1 -1
  203. package/dist/esm/crash.js +1 -2
  204. package/dist/esm/customHooks/analyticsLogger.js +1 -230
  205. package/dist/esm/customHooks/bundleAnalyzer.js +1 -944
  206. package/dist/esm/customHooks/consoleLogger.js +6 -432
  207. package/dist/esm/customHooks/crashHandler.js +7 -630
  208. package/dist/esm/customHooks/logFilters.js +1 -20
  209. package/dist/esm/customHooks/networkLogger.js +2 -519
  210. package/dist/esm/customHooks/performanceTracker.js +63 -723
  211. package/dist/esm/customHooks/reduxLogger.js +2 -293
  212. package/dist/esm/customHooks/storageInspector.js +1 -418
  213. package/dist/esm/customHooks/useAccordion.js +1 -16
  214. package/dist/esm/decorators/index.js +1 -95
  215. package/dist/esm/helpers/gaAnalyticsRegistry.js +1 -143
  216. package/dist/esm/helpers/index.js +8 -861
  217. package/dist/esm/helpers/memoryManager.js +1 -91
  218. package/dist/esm/helpers/qrGenerator.js +1 -364
  219. package/dist/esm/helpers/remoteConfig.js +1 -160
  220. package/dist/esm/helpers/searchQueryParser.js +1 -59
  221. package/dist/esm/helpers/settingsStore.js +1 -134
  222. package/dist/esm/helpers/telemetry.js +1 -489
  223. package/dist/esm/helpers/toast.js +1 -15
  224. package/dist/esm/i18n/index.js +1 -78
  225. package/dist/esm/i18n/locales/en.json +1 -1122
  226. package/dist/esm/index.js +7 -1967
  227. package/dist/esm/metro.js +6 -459
  228. package/dist/esm/native/NativeInspector.d.ts +3 -0
  229. package/dist/esm/native/NativeInspector.js +1 -370
  230. package/dist/esm/native/NativeNetworkInspector.d.ts +1 -0
  231. package/dist/esm/native/NativeNetworkInspector.js +1 -2
  232. package/dist/esm/network.js +1 -1
  233. package/dist/esm/performance.js +1 -2
  234. package/dist/esm/redux.js +1 -1
  235. package/dist/esm/storage.js +1 -1
  236. package/dist/esm/styles/AppColors.js +1 -417
  237. package/dist/esm/styles/AppFonts.js +1 -13
  238. package/dist/esm/styles/common.js +1 -186
  239. package/dist/esm/styles/index.d.ts +6 -0
  240. package/dist/esm/styles/index.js +1 -1551
  241. package/dist/esm/types/enums.d.ts +2 -1
  242. package/dist/esm/types/enums.js +1 -147
  243. package/dist/esm/types/index.js +1 -2
  244. package/dist/esm/types/interfaces.d.ts +7 -0
  245. package/dist/esm/types/interfaces.js +1 -1
  246. package/ios/NetworkInspectorModule.mm +253 -136
  247. package/package.json +5 -3
  248. package/react-native-inapp-inspector.podspec +1 -1
  249. package/src/native/NativeInspector.ts +17 -0
  250. package/src/native/NativeNetworkInspector.ts +1 -0
  251. package/src/analytics.ts +0 -35
  252. package/src/bundle.ts +0 -25
  253. package/src/capture.ts +0 -101
  254. package/src/components/AnalyticsDetail.tsx +0 -870
  255. package/src/components/AnalyticsEventCard.tsx +0 -444
  256. package/src/components/AnalyticsGraph.tsx +0 -583
  257. package/src/components/AnimatedEntrance.tsx +0 -20
  258. package/src/components/AppHeaderLogo.tsx +0 -143
  259. package/src/components/BrandCircleIcon.tsx +0 -144
  260. package/src/components/BrandSquareIcon.tsx +0 -184
  261. package/src/components/CodeSnippet.tsx +0 -725
  262. package/src/components/ConsoleLogCard.tsx +0 -679
  263. package/src/components/CopyButton.tsx +0 -87
  264. package/src/components/DiffViewer.tsx +0 -82
  265. package/src/components/DomainHeader.tsx +0 -224
  266. package/src/components/EmptyState.tsx +0 -95
  267. package/src/components/EndOfListFooter.tsx +0 -100
  268. package/src/components/ErrorBoundary.tsx +0 -688
  269. package/src/components/HeadersSection.tsx +0 -172
  270. package/src/components/HighlightText.tsx +0 -100
  271. package/src/components/Inspector/AnalyticsFilterModal.tsx +0 -1250
  272. package/src/components/Inspector/AnalyticsTab.tsx +0 -1362
  273. package/src/components/Inspector/BundleTab.tsx +0 -4768
  274. package/src/components/Inspector/ConsoleTab.tsx +0 -726
  275. package/src/components/Inspector/CrashDetail.tsx +0 -997
  276. package/src/components/Inspector/CrashFilterModal.tsx +0 -721
  277. package/src/components/Inspector/CrashTab.tsx +0 -933
  278. package/src/components/Inspector/DebuggingTab.tsx +0 -1103
  279. package/src/components/Inspector/DeviceInfoTab.tsx +0 -1397
  280. package/src/components/Inspector/FabLauncher.tsx +0 -80
  281. package/src/components/Inspector/FeatureUnderDevNotice.tsx +0 -94
  282. package/src/components/Inspector/FeedbackModal.tsx +0 -626
  283. package/src/components/Inspector/InspectorContext.tsx +0 -28
  284. package/src/components/Inspector/InspectorHeader.tsx +0 -1545
  285. package/src/components/Inspector/LogDetail.tsx +0 -1431
  286. package/src/components/Inspector/MainScreen.tsx +0 -459
  287. package/src/components/Inspector/MediaGalleryTab.tsx +0 -355
  288. package/src/components/Inspector/MediaPreviewModal.tsx +0 -435
  289. package/src/components/Inspector/NavigationTracker.tsx +0 -13
  290. package/src/components/Inspector/NetworkDetail.tsx +0 -795
  291. package/src/components/Inspector/NetworkFilterModal.tsx +0 -730
  292. package/src/components/Inspector/NetworkTab.tsx +0 -820
  293. package/src/components/Inspector/NpmStarPrompt.tsx +0 -532
  294. package/src/components/Inspector/NpmUpdateToast.tsx +0 -387
  295. package/src/components/Inspector/PerformanceTab.tsx +0 -1967
  296. package/src/components/Inspector/ReduxDetail.tsx +0 -1651
  297. package/src/components/Inspector/ReduxTab.tsx +0 -987
  298. package/src/components/Inspector/SettingsPanel.tsx +0 -4580
  299. package/src/components/Inspector/SkeletonPlaceholder.tsx +0 -206
  300. package/src/components/Inspector/StorageTab.tsx +0 -1159
  301. package/src/components/Inspector/TabBar.tsx +0 -263
  302. package/src/components/Inspector/UpdateAvailableModal.tsx +0 -555
  303. package/src/components/JsonViewer.tsx +0 -547
  304. package/src/components/LogCard.tsx +0 -694
  305. package/src/components/LogSyntaxHighlighter.tsx +0 -178
  306. package/src/components/MetaAccordion.tsx +0 -355
  307. package/src/components/MiniBarChart.tsx +0 -42
  308. package/src/components/MiniLineChart.tsx +0 -33
  309. package/src/components/NetworkIcons.tsx +0 -2599
  310. package/src/components/QRCodeView.tsx +0 -75
  311. package/src/components/SectionHeader.tsx +0 -101
  312. package/src/components/SegmentedTabs.tsx +0 -83
  313. package/src/components/SkeletonPlaceholder.tsx +0 -206
  314. package/src/components/Slider.tsx +0 -300
  315. package/src/components/SourcePageCard.tsx +0 -150
  316. package/src/components/Toast.tsx +0 -131
  317. package/src/components/TouchableScale.tsx +0 -61
  318. package/src/components/TreeNode.tsx +0 -171
  319. package/src/console.ts +0 -24
  320. package/src/constants/index.ts +0 -41
  321. package/src/constants/telemetryConfig.ts +0 -4
  322. package/src/constants/version.ts +0 -3
  323. package/src/crash.ts +0 -32
  324. package/src/customHooks/analyticsLogger.ts +0 -336
  325. package/src/customHooks/bundleAnalyzer.ts +0 -1256
  326. package/src/customHooks/consoleLogger.ts +0 -530
  327. package/src/customHooks/crashHandler.ts +0 -944
  328. package/src/customHooks/logFilters.ts +0 -32
  329. package/src/customHooks/networkLogger.ts +0 -624
  330. package/src/customHooks/performanceTracker.ts +0 -1014
  331. package/src/customHooks/reduxLogger.ts +0 -406
  332. package/src/customHooks/storageInspector.ts +0 -513
  333. package/src/customHooks/useAccordion.tsx +0 -27
  334. package/src/decorators/index.ts +0 -184
  335. package/src/helpers/gaAnalyticsRegistry.ts +0 -204
  336. package/src/helpers/index.ts +0 -1092
  337. package/src/helpers/memoryManager.ts +0 -138
  338. package/src/helpers/qrGenerator.ts +0 -430
  339. package/src/helpers/remoteConfig.ts +0 -212
  340. package/src/helpers/searchQueryParser.ts +0 -84
  341. package/src/helpers/settingsStore.ts +0 -171
  342. package/src/helpers/telemetry.ts +0 -568
  343. package/src/helpers/toast.ts +0 -17
  344. package/src/i18n/index.ts +0 -104
  345. package/src/i18n/locales/en.json +0 -1125
  346. package/src/index.tsx +0 -2635
  347. package/src/metro.ts +0 -598
  348. package/src/network.ts +0 -22
  349. package/src/performance.ts +0 -38
  350. package/src/redux.ts +0 -23
  351. package/src/storage.ts +0 -18
  352. package/src/styles/AppColors.ts +0 -455
  353. package/src/styles/AppFonts.ts +0 -26
  354. package/src/styles/common.ts +0 -209
  355. package/src/styles/index.ts +0 -1606
  356. package/src/types/enums.ts +0 -208
  357. package/src/types/index.ts +0 -34
  358. package/src/types/interfaces.ts +0 -530
package/src/index.tsx DELETED
@@ -1,2635 +0,0 @@
1
- import React, {useEffect, useMemo, useRef, useState, useCallback} from 'react';
2
- import {
3
- Alert,
4
- Animated,
5
- PanResponder,
6
- Platform,
7
- UIManager,
8
- LogBox,
9
- InteractionManager,
10
- } from 'react-native';
11
- import {NavigationContext} from '@react-navigation/native';
12
-
13
- // i18n
14
- import {I18nextProvider, i18n} from './i18n';
15
-
16
- // Components
17
- import ErrorBoundary from './components/ErrorBoundary';
18
- import MainScreen from './components/Inspector/MainScreen';
19
- import {
20
- InspectorContext,
21
- animateNextLayout,
22
- InspectorContextValue,
23
- } from './components/Inspector/InspectorContext';
24
-
25
- // Helpers
26
- import {
27
- formatDisplayUrl,
28
- getNavigationInfo,
29
- getLogPageName,
30
- deduplicateLogs,
31
- getDomainColor,
32
- getEventCategory,
33
- matchNetworkLogQuery,
34
- setupMemoryWarningHandler,
35
- pruneAllLogs,
36
- subscribeMemoryWarning,
37
- } from './helpers';
38
- // #5 — settings persistence
39
- import {
40
- loadSettings,
41
- saveSettings,
42
- setCustomStorage,
43
- clearPersistedSettings,
44
- calculateRamBasedLimits,
45
- } from './helpers/settingsStore';
46
- import {
47
- getNativeSystemMetrics,
48
- pushNativeLogRecord,
49
- fetchNativeCachedPage,
50
- } from './native/NativeInspector';
51
-
52
- // Network
53
- import {
54
- setupNetworkLogger,
55
- clearNetworkLogs,
56
- subscribeNetworkLogs,
57
- setNetworkModuleEnabled,
58
- setMaxNetworkLogsLimit,
59
- setRouteInfoProvider,
60
- } from './customHooks/networkLogger';
61
-
62
- // Console
63
- import {
64
- setupConsoleLogger,
65
- clearConsoleLogs,
66
- subscribeConsoleLogs,
67
- getConsoleLogs,
68
- setConsoleModuleEnabled,
69
- setMaxConsoleLogsLimit,
70
- } from './customHooks/consoleLogger';
71
- import {IGNORED_LOG_PREFIXES} from './customHooks/logFilters';
72
-
73
- // Crash Protection
74
- import {
75
- setupGlobalCrashHandler,
76
- subscribeCrashEvents,
77
- emitCrashEvent,
78
- getCrashRecords,
79
- clearCrashRecords,
80
- simulateTestCrash,
81
- exportCrashReport,
82
- parseCrashStackTrace,
83
- setMaxCrashLogsLimit,
84
- setCrashModuleEnabled,
85
- } from './customHooks/crashHandler';
86
-
87
- import {
88
- trackActiveTelemetryHeartbeat,
89
- setTelemetryEnabled,
90
- trackInspectorTabView,
91
- trackInspectorScreenView,
92
- } from './helpers/telemetry';
93
-
94
- import {
95
- subscribeAnalyticsEvents,
96
- clearAnalyticsEvents,
97
- autoSetupAnalyticsLogger,
98
- isAnalyticsConnected,
99
- setAnalyticsModuleEnabled,
100
- setMaxAnalyticsLogsLimit,
101
- } from './customHooks/analyticsLogger';
102
-
103
- import {
104
- getReduxState,
105
- subscribeReduxState,
106
- setReduxAutoRefresh,
107
- getLastActionForReducer,
108
- clearActionHistory,
109
- isReduxConnected,
110
- setReduxModuleEnabled,
111
- } from './customHooks/reduxLogger';
112
-
113
- import {setPerformanceModuleEnabled} from './customHooks/performanceTracker';
114
- import {setBundleModuleEnabled} from './customHooks/bundleAnalyzer';
115
- import {
116
- showNativeFloatingButton,
117
- hideNativeFloatingButton,
118
- setNativeFloatingButtonBadge,
119
- subscribeNativeFloatingButtonPress,
120
- subscribeNativeDeviceShake,
121
- startNativeFpsMonitoring,
122
- stopNativeFpsMonitoring,
123
- getNativeFpsMetrics,
124
- getNativeStorageItem,
125
- setNativeStorageItem,
126
- isNativeModuleAvailable,
127
- } from './native/NativeInspector';
128
-
129
- import {
130
- fetchRemoteConfigModuleStatus,
131
- isFirebaseRemoteConfigAvailable,
132
- } from './helpers/remoteConfig';
133
-
134
- // Constants
135
- import {
136
- StatusFilter,
137
- NetworkLog,
138
- RouteInfo,
139
- LocalFilter,
140
- SortOrder,
141
- GroupedListItem,
142
- ActiveTab,
143
- SettingsSubTab,
144
- ConsoleLog,
145
- Method,
146
- AnalyticsEvent,
147
- AnalyticsFilters,
148
- NetworkInspectorProps,
149
- CrashRecord,
150
- ParsedStackFrame,
151
- CrashBreadcrumb,
152
- SearchScope,
153
- } from './types';
154
- import {LIB_VERSION} from './constants';
155
-
156
- // Stylesheet
157
- import {toggleGlobalTheme} from './styles';
158
-
159
- const NetworkInspector = ({
160
- enabled = true,
161
- storage,
162
- navigationRef,
163
- appIcon,
164
- environment,
165
- initialVisible = false,
166
- visible: controlledVisible,
167
- remoteConfig,
168
- }: NetworkInspectorProps): React.JSX.Element | null => {
169
- // Set custom storage synchronously during render phase
170
- setCustomStorage(storage || null);
171
-
172
- const [isDark, setIsDark] = useState(false);
173
- const [reduxState, setReduxState] = useState<any>(null);
174
- // Per-reducer last action is kept in component state so the
175
- // Redux tab re-renders live on every dispatch, independent of the state tree ref.
176
- const [reduxLastActionMap, setReduxLastActionMap] = useState<
177
- Record<string, any>
178
- >({});
179
- // Inspector panel height as a percentage of the screen (configurable in Settings).
180
- const [modalHeightPercent, setModalHeightPercent] = useState<number>(90);
181
- const [modalAnimationType, setModalAnimationType] = useState<'slide' | 'fade' | 'none'>('slide');
182
-
183
- const [logs, setLogs] = useState<NetworkLog[]>([]);
184
- const [visible, setVisible] = useState<boolean>(
185
- controlledVisible ?? initialVisible ?? false,
186
- );
187
-
188
- useEffect(() => {
189
- if (controlledVisible !== undefined) {
190
- setVisible(controlledVisible);
191
- }
192
- }, [controlledVisible]);
193
-
194
- const [isReady, setIsReady] = useState(false);
195
- const [selected, setSelected] = useState<NetworkLog | null>(null);
196
- const [selectedLogs, setSelectedLogs] = useState<Set<number>>(new Set());
197
- const [search, setSearch] = useState('');
198
- const [searchScope, setSearchScope] = useState<SearchScope>('all');
199
- const [isRegexSearch, setIsRegexSearch] = useState<boolean>(false);
200
- const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(false);
201
- const [quickFilter, setQuickFilter] = useState<string>('all');
202
- const [detailSearch, setDetailSearch] = useState('');
203
- const [reduxSearch, setReduxSearch] = useState('');
204
- const [selectedReduxSlice, setSelectedReduxSlice] = useState<string | null>(null);
205
- const [selectedReduxAction, setSelectedReduxAction] = useState<any | null>(null);
206
- const [reduxActiveSubTab, setReduxActiveSubTab] = useState<'state' | 'timeline'>('state');
207
-
208
- const [apiDetailActiveTab, setApiDetailActiveTab] = useState<
209
- 'metadata' | 'headers' | 'request' | 'response'
210
- >('response');
211
-
212
- useEffect(() => {
213
- LogBox.ignoreAllLogs(enabled);
214
- return () => {
215
- LogBox.ignoreAllLogs(false);
216
- };
217
- }, [enabled]);
218
-
219
- useEffect(() => {
220
- if (selected) {
221
- setApiDetailActiveTab('response');
222
- setDetailSearch('');
223
- }
224
- }, [selected]);
225
- const [statusFilters, setStatusFilters] = useState<Set<StatusFilter>>(
226
- new Set(),
227
- );
228
- const [methodFilters, setMethodFilters] = useState<Set<Method>>(new Set());
229
- const [sectionFilters, setSectionFilters] = useState<
230
- Record<string, Set<LocalFilter>>
231
- >({});
232
- const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
233
- new Set(),
234
- );
235
- const [showHeaderInfo, setShowHeaderInfo] = useState(true);
236
- const [sortOrder, setSortOrder] = useState<SortOrder>('newest');
237
- // #7 — sort order for the Logs (console) tab
238
- const [logSortOrder, setLogSortOrder] = useState<SortOrder>('newest');
239
- const [reqExpanded, setReqExpanded] = useState<boolean | undefined>(true);
240
- const [resExpanded, setResExpanded] = useState<boolean | undefined>(true);
241
- const [showReqDiff, setShowReqDiff] = useState<boolean>(false);
242
- const [showResDiff, setShowResDiff] = useState<boolean>(false);
243
-
244
- // ─── Analytics state ───────────────────────────────────────────────────────
245
- const [activeTab, setActiveTab] = useState<ActiveTab>('apis');
246
- const [analyticsEvents, setAnalyticsEvents] = useState<AnalyticsEvent[]>([]);
247
-
248
- // ─── Logs state ────────────────────────────────────────────────────────────
249
- const [consoleLogs, setConsoleLogs] = useState<ConsoleLog[]>([]);
250
- const [selectedLog, setSelectedLog] = useState<ConsoleLog | null>(null);
251
- // ─── Pause states ─────────────────────────────────────────────────────────
252
- const [isNetworkPaused, setIsNetworkPaused] = useState<boolean>(false);
253
- const isNetworkPausedRef = useRef(isNetworkPaused);
254
- isNetworkPausedRef.current = isNetworkPaused;
255
- const latestNetworkLogsRef = useRef<NetworkLog[]>([]);
256
-
257
- const [isConsolePaused, setIsConsolePaused] = useState<boolean>(false);
258
- const isConsolePausedRef = useRef(isConsolePaused);
259
- isConsolePausedRef.current = isConsolePaused;
260
- const latestConsoleLogsRef = useRef<ConsoleLog[]>([]);
261
-
262
- const [isAnalyticsPaused, setIsAnalyticsPaused] = useState<boolean>(false);
263
- const isAnalyticsPausedRef = useRef(isAnalyticsPaused);
264
- isAnalyticsPausedRef.current = isAnalyticsPaused;
265
- const latestAnalyticsEventsRef = useRef<AnalyticsEvent[]>([]);
266
-
267
- const [lastReadLogsCount, setLastReadLogsCount] = useState(0);
268
- const [lastReadApisCount, setLastReadApisCount] = useState(0);
269
- const [lastReadCrashesCount, setLastReadCrashesCount] = useState(0);
270
-
271
- // ─── Crash state ───────────────────────────────────────────────────────────
272
- const [crashRecords, setCrashRecords] = useState<CrashRecord[]>(() =>
273
- getCrashRecords(),
274
- );
275
- const [selectedCrash, setSelectedCrash] = useState<CrashRecord | null>(null);
276
- const [maxCrashLogs, setMaxCrashLogs] = useState<number>(50);
277
-
278
- useEffect(() => {
279
- setMaxCrashLogsLimit(maxCrashLogs);
280
- }, [maxCrashLogs]);
281
-
282
- useEffect(() => {
283
- if (visible) {
284
- if (activeTab === 'apis') {
285
- setLastReadApisCount(logs.length);
286
- }
287
- if (activeTab === 'logs') {
288
- setLastReadLogsCount(consoleLogs.length);
289
- }
290
- if (activeTab === 'crash') {
291
- setLastReadCrashesCount(crashRecords.length);
292
- }
293
- }
294
- }, [visible]);
295
-
296
- useEffect(() => {
297
- if (activeTab === 'apis') {
298
- setLastReadApisCount(logs.length);
299
- }
300
- }, [activeTab, logs.length]);
301
-
302
- useEffect(() => {
303
- if (activeTab === 'logs') {
304
- setLastReadLogsCount(consoleLogs.length);
305
- }
306
- }, [activeTab, consoleLogs.length]);
307
-
308
- useEffect(() => {
309
- if (activeTab === 'crash') {
310
- setLastReadCrashesCount(crashRecords.length);
311
- }
312
- }, [activeTab, crashRecords.length]);
313
-
314
- const [maxConsoleLogs, setMaxConsoleLogs] = useState<number>(100);
315
- const [showConsoleLevels, setShowConsoleLevels] = useState<{
316
- info: boolean;
317
- warn: boolean;
318
- error: boolean;
319
- }>({
320
- info: true,
321
- warn: true,
322
- error: true,
323
- });
324
- const visibleConsoleLogs = useMemo(() => {
325
- const filtered = consoleLogs.filter(log => {
326
- const type = log.type;
327
- if (type === 'info' && !showConsoleLevels?.info) return false;
328
- if (type === 'warn' && !showConsoleLevels?.warn) return false;
329
- if (type === 'error' && !showConsoleLevels?.error) return false;
330
-
331
- const message = log.message || '';
332
- const allPrefixes = [
333
- ...((IGNORED_LOG_PREFIXES && IGNORED_LOG_PREFIXES.info) || []),
334
- ...((IGNORED_LOG_PREFIXES && IGNORED_LOG_PREFIXES.warn) || []),
335
- ...((IGNORED_LOG_PREFIXES && IGNORED_LOG_PREFIXES.error) || []),
336
- ].filter(p => typeof p === 'string' && p.trim().length > 0);
337
- const isIgnored = allPrefixes.some(
338
- prefix =>
339
- message
340
- .toLowerCase()
341
- .trim()
342
- .startsWith(prefix.toLowerCase().trim()) ||
343
- message.toLowerCase().trim().includes(prefix.toLowerCase().trim()),
344
- );
345
- return !isIgnored;
346
- });
347
- return filtered.slice(0, maxConsoleLogs);
348
- }, [consoleLogs, showConsoleLevels, maxConsoleLogs]);
349
- const [logSearch, setLogSearch] = useState('');
350
- const [logFilters, setLogFilters] = useState<
351
- Set<'all' | 'info' | 'warn' | 'error' | 'user-log' | 'analytics'>
352
- >(new Set(['all']));
353
-
354
- // ─── Settings state ──────────────────────────────────────────────────────────
355
- const [settingsPage, setSettingsPage] = useState<
356
- | 'main'
357
- | 'apis'
358
- | 'logs'
359
- | 'analytics'
360
- | 'redux'
361
- | null
362
- >(null);
363
- const [isFeedbackOpen, setIsFeedbackOpen] = useState<boolean>(false);
364
- const [settingsActiveSubTab, setSettingsActiveSubTab] = useState<SettingsSubTab>('module');
365
- const [tabVisibility, setTabVisibility] = useState<
366
- Record<ActiveTab, boolean>
367
- >({
368
- apis: true,
369
- logs: true,
370
- analytics: false,
371
- redux: false,
372
- bundle: false,
373
- performance: false,
374
- crash: false,
375
- device: false,
376
- storage: false,
377
- debugging: false,
378
- });
379
-
380
- const [maxNetworkLogs, setMaxNetworkLogs] = useState<number>(250);
381
- const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState<number>(150);
382
- const [isAutoRamLimitEnabled, setIsAutoRamLimitEnabled] = useState<boolean>(true);
383
- const [deviceFreeRamMb, setDeviceFreeRamMb] = useState<number>(1800);
384
-
385
- const [reduxAutoRefresh, setReduxAutoRefreshState] = useState<boolean>(true);
386
- const [reduxExpandDepth, setReduxExpandDepth] = useState<number>(1);
387
-
388
- // #6 — tab the inspector opens on. Shown with a DEFAULT badge in Settings.
389
- const [defaultTab, setDefaultTab] = useState<ActiveTab>('apis');
390
- const [showDuplicateLogs, setShowDuplicateLogs] = useState<boolean>(false);
391
- const [showUpdateToast, setShowUpdateToast] = useState<boolean>(true);
392
-
393
- // Synchronize runtime background listeners with active settings
394
- useEffect(() => {
395
- setNetworkModuleEnabled(!!tabVisibility.apis);
396
- setConsoleModuleEnabled(!!tabVisibility.logs);
397
- setAnalyticsModuleEnabled(!!tabVisibility.analytics);
398
- setReduxModuleEnabled(!!tabVisibility.redux);
399
- setPerformanceModuleEnabled(!!tabVisibility.performance);
400
- setCrashModuleEnabled(!!tabVisibility.crash);
401
- setBundleModuleEnabled(!!tabVisibility.bundle);
402
- }, [tabVisibility]);
403
-
404
- // Query native hardware RAM and auto-tune limits if auto-RAM is active
405
- useEffect(() => {
406
- getNativeSystemMetrics()
407
- .then(metrics => {
408
- if (metrics) {
409
- const freeRam = metrics.totalPhysicalRamMb - metrics.residentRamMb;
410
- const freeMb = Math.max(200, Math.round(freeRam > 0 ? freeRam : 1500));
411
- setDeviceFreeRamMb(freeMb);
412
- if (isAutoRamLimitEnabled) {
413
- const profile = calculateRamBasedLimits(freeMb);
414
- setMaxNetworkLogs(profile.maxNetworkLogs);
415
- setMaxConsoleLogs(profile.maxConsoleLogs);
416
- setMaxAnalyticsEventsLimit(profile.maxAnalyticsEvents);
417
- setMaxCrashLogs(profile.maxCrashRecords);
418
- }
419
- }
420
- })
421
- .catch(() => {});
422
- }, [isAutoRamLimitEnabled]);
423
-
424
- const resetToDefaults = async () => {
425
- await clearPersistedSettings();
426
- setIsDark(false);
427
- toggleGlobalTheme(false);
428
- setModalHeightPercent(90);
429
- setModalAnimationType('slide');
430
- setTabVisibility({
431
- apis: true,
432
- logs: true,
433
- analytics: false,
434
- redux: false,
435
- bundle: false,
436
- performance: false,
437
- crash: false,
438
- device: false,
439
- storage: false,
440
- debugging: false,
441
- });
442
-
443
- setDefaultTab('apis');
444
- setIsAutoRamLimitEnabled(true);
445
- const profile = calculateRamBasedLimits(deviceFreeRamMb);
446
- setMaxCrashLogs(profile.maxCrashRecords);
447
- setMaxNetworkLogs(profile.maxNetworkLogs);
448
- setMaxConsoleLogs(profile.maxConsoleLogs);
449
- setMaxAnalyticsEventsLimit(profile.maxAnalyticsEvents);
450
- setShowConsoleLevels({
451
- info: true,
452
- warn: true,
453
- error: true,
454
- });
455
- setReduxAutoRefreshState(true);
456
- setReduxExpandDepth(1);
457
- setShowDuplicateLogs(false);
458
- setShowUpdateToast(true);
459
- Alert.alert('Settings Reset', 'All settings have been reset to default values.');
460
- };
461
-
462
- // #5 — hydrate persisted settings once, then auto-save on any change.
463
- const settingsHydratedRef = useRef(false);
464
- useEffect(() => {
465
- let cancelled = false;
466
- loadSettings().then(saved => {
467
- if (cancelled) return;
468
- if (saved.isDark != null) {
469
- setIsDark(saved.isDark);
470
- toggleGlobalTheme(saved.isDark);
471
- }
472
- if (saved.modalHeightPercent != null)
473
- setModalHeightPercent(saved.modalHeightPercent);
474
- if (saved.modalAnimationType)
475
- setModalAnimationType(saved.modalAnimationType as 'slide' | 'fade' | 'none');
476
- if (saved.tabVisibility)
477
- setTabVisibility(prev => ({
478
- ...prev,
479
- ...(saved.tabVisibility as Record<ActiveTab, boolean>),
480
- apis: true, // APIs is always required
481
- }));
482
- if (saved.defaultTab) setDefaultTab(saved.defaultTab as ActiveTab);
483
- if (saved.isAutoRamLimitEnabled != null)
484
- setIsAutoRamLimitEnabled(saved.isAutoRamLimitEnabled);
485
- if (saved.maxNetworkLogs != null) setMaxNetworkLogs(saved.maxNetworkLogs);
486
- if (saved.maxConsoleLogs != null) setMaxConsoleLogs(saved.maxConsoleLogs);
487
- if (saved.maxAnalyticsEventsLimit != null)
488
- setMaxAnalyticsEventsLimit(saved.maxAnalyticsEventsLimit);
489
- if (saved.maxCrashLogs != null) setMaxCrashLogs(saved.maxCrashLogs);
490
- if (saved.showConsoleLevels)
491
- setShowConsoleLevels(saved.showConsoleLevels);
492
- if (saved.reduxAutoRefresh != null)
493
- setReduxAutoRefreshState(saved.reduxAutoRefresh);
494
- if (saved.reduxExpandDepth != null)
495
- setReduxExpandDepth(saved.reduxExpandDepth);
496
- if (saved.showDuplicateLogs != null)
497
- setShowDuplicateLogs(saved.showDuplicateLogs);
498
- if (saved.showUpdateToast != null)
499
- setShowUpdateToast(saved.showUpdateToast);
500
- if (saved.defaultTab) {
501
- const dt = saved.defaultTab as ActiveTab;
502
- const vis = {
503
- ...{
504
- apis: true,
505
- logs: true,
506
- analytics: false,
507
- redux: false,
508
- bundle: false,
509
- performance: false,
510
- crash: false,
511
- device: false,
512
- storage: false,
513
- },
514
- ...(saved.tabVisibility || {}),
515
- apis: true,
516
- } as Record<ActiveTab, boolean>;
517
- setActiveTab(vis[dt] ? dt : 'apis');
518
- }
519
- settingsHydratedRef.current = true;
520
- });
521
- return () => {
522
- cancelled = true;
523
- };
524
- }, []);
525
-
526
- // Fetch and apply module enable/disable statuses from Firebase Remote Config if configured or available
527
- useEffect(() => {
528
- let isMounted = true;
529
- if (remoteConfig === false) return;
530
-
531
- fetchRemoteConfigModuleStatus(typeof remoteConfig === 'object' ? remoteConfig : undefined)
532
- .then(remoteModules => {
533
- if (isMounted && remoteModules) {
534
- setTabVisibility(prev => ({
535
- ...prev,
536
- ...remoteModules,
537
- apis: remoteModules.apis ?? true,
538
- }));
539
- }
540
- })
541
- .catch(() => {});
542
-
543
- return () => {
544
- isMounted = false;
545
- };
546
- }, [remoteConfig]);
547
-
548
- useEffect(() => {
549
- if (!settingsHydratedRef.current) return;
550
- saveSettings({
551
- isDark,
552
- modalHeightPercent,
553
- modalAnimationType,
554
- tabVisibility,
555
- defaultTab,
556
- maxNetworkLogs,
557
- maxConsoleLogs,
558
- maxAnalyticsEventsLimit,
559
- maxCrashLogs,
560
- isAutoRamLimitEnabled,
561
- showConsoleLevels,
562
- reduxAutoRefresh,
563
- reduxExpandDepth,
564
- showDuplicateLogs,
565
- showUpdateToast,
566
- });
567
- }, [
568
- isDark,
569
- modalHeightPercent,
570
- modalAnimationType,
571
- tabVisibility,
572
- defaultTab,
573
- maxNetworkLogs,
574
- maxConsoleLogs,
575
- maxAnalyticsEventsLimit,
576
- maxCrashLogs,
577
- isAutoRamLimitEnabled,
578
- showConsoleLevels,
579
- reduxAutoRefresh,
580
- reduxExpandDepth,
581
- showDuplicateLogs,
582
- ]);
583
-
584
- // #1 — check NPM for a newer published version; surfaces an animated dot
585
- // in the header next to the npm chip when an update is available.
586
- const [latestNpmVersion, setLatestNpmVersion] = useState<string | null>(null);
587
- const updateAvailable = useMemo(() => {
588
- if (!latestNpmVersion) return false;
589
- const parse = (v: string) =>
590
- v
591
- .replace(/^v/, '')
592
- .split('.')
593
- .map(n => parseInt(n, 10) || 0);
594
- const cur = parse(LIB_VERSION);
595
- const latest = parse(latestNpmVersion);
596
- for (let i = 0; i < 3; i++) {
597
- if ((latest[i] || 0) > (cur[i] || 0)) return true;
598
- if ((latest[i] || 0) < (cur[i] || 0)) return false;
599
- }
600
- return false;
601
- }, [latestNpmVersion]);
602
-
603
- useEffect(() => {
604
- // Only check for npm updates when running in local development / debug mode (__DEV__)
605
- // Never show or check in production / bundled application
606
- if (typeof __DEV__ === 'undefined' || !__DEV__) {
607
- return;
608
- }
609
- let cancelled = false;
610
- fetch('https://registry.npmjs.org/react-native-inapp-inspector/latest')
611
- .then(res => (res.ok ? res.json() : null))
612
- .then(data => {
613
- if (!cancelled && data && typeof data.version === 'string') {
614
- setLatestNpmVersion(data.version);
615
- }
616
- })
617
- .catch(() => {
618
- // Offline / blocked — silently skip the update check.
619
- });
620
- return () => {
621
- cancelled = true;
622
- };
623
- }, []);
624
-
625
- useEffect(() => {
626
- setReduxAutoRefresh(reduxAutoRefresh);
627
- }, [reduxAutoRefresh]);
628
-
629
- // Auto-unselect Redux or Analytics tab if module is not connected / available
630
- useEffect(() => {
631
- if (activeTab === 'redux' && !isReduxConnected()) {
632
- setActiveTab('apis');
633
- }
634
- if (activeTab === 'analytics' && !isAnalyticsConnected()) {
635
- setActiveTab('apis');
636
- }
637
- }, [activeTab]);
638
-
639
- const toggleTabVisibility = (key: ActiveTab) => {
640
- if (key === 'apis') return;
641
- if (key === 'redux' && !isReduxConnected()) return;
642
- if (key === 'analytics' && !isAnalyticsConnected()) return;
643
- setTabVisibility(prev => {
644
- const nextVal = !prev[key];
645
- const newVisibility = {...prev, [key]: nextVal};
646
- if (!nextVal && activeTab === key) {
647
- animateNextLayout();
648
- setActiveTab('apis');
649
- }
650
- // #6 — a hidden module can't be the default landing tab.
651
- if (!nextVal && defaultTab === key) {
652
- setDefaultTab('apis');
653
- }
654
- return newVisibility;
655
- });
656
- };
657
-
658
- const loadNativePage = useCallback(async (tabKey: ActiveTab, query: string = '') => {
659
- if (tabKey === 'apis' || tabKey === 'logs' || tabKey === 'analytics' || tabKey === 'crash') {
660
- const pageData = await fetchNativeCachedPage(tabKey, 0, 100, query);
661
- if (pageData && pageData.items && pageData.items.length > 0) {
662
- if (tabKey === 'apis') setLogs(pageData.items);
663
- else if (tabKey === 'logs') setConsoleLogs(pageData.items);
664
- else if (tabKey === 'analytics') setAnalyticsEvents(pageData.items);
665
- else if (tabKey === 'crash') setCrashRecords(pageData.items);
666
- }
667
- }
668
- }, []);
669
-
670
- const switchActiveTab = useCallback((key: ActiveTab) => {
671
- if (key === 'redux' && !isReduxConnected()) return;
672
- if (key === 'analytics' && !isAnalyticsConnected()) return;
673
-
674
- setSelected(null);
675
- setSelectedEvent(null);
676
- setSelectedLog(null);
677
- setSelectedReduxSlice(null);
678
- setSelectedReduxAction(null);
679
- setSelectedCrash(null);
680
-
681
- if (typeof React.startTransition === 'function') {
682
- React.startTransition(() => {
683
- setActiveTab(key);
684
- loadNativePage(key);
685
- });
686
- } else {
687
- setActiveTab(key);
688
- loadNativePage(key);
689
- }
690
- trackInspectorTabView(key);
691
- }, [loadNativePage]);
692
-
693
- const [selectedEvent, setSelectedEvent] = useState<AnalyticsEvent | null>(
694
- null,
695
- );
696
- const [analyticsSearch, setAnalyticsSearch] = useState('');
697
- const [analyticsFilters, setAnalyticsFilters] = useState<AnalyticsFilters>({
698
- categories: new Set(['all']),
699
- screens: new Set(),
700
- sources: new Set(['all']),
701
- userTypes: new Set(['all']),
702
- timeWindow: 'all',
703
- payloadComplexity: 'all',
704
- hasRevenue: false,
705
- hasItems: false,
706
- hasUserProps: false,
707
- hasParams: false,
708
- onlyDuplicates: false,
709
- onlyConversions: false,
710
- sortBy: 'time_desc',
711
- });
712
-
713
- const isAnalyticsFilterApplied = useMemo(() => {
714
- if (analyticsFilters.categories.size > 0 && !analyticsFilters.categories.has('all')) return true;
715
- if (analyticsFilters.screens.size > 0) return true;
716
- if (analyticsFilters.sources.size > 0 && !analyticsFilters.sources.has('all')) return true;
717
- if (analyticsFilters.userTypes.size > 0 && !analyticsFilters.userTypes.has('all')) return true;
718
- if (analyticsFilters.timeWindow !== 'all') return true;
719
- if (analyticsFilters.payloadComplexity !== 'all') return true;
720
- if (analyticsFilters.hasRevenue) return true;
721
- if (analyticsFilters.hasItems) return true;
722
- if (analyticsFilters.hasUserProps) return true;
723
- if (analyticsFilters.hasParams) return true;
724
- if (analyticsFilters.onlyDuplicates) return true;
725
- if (analyticsFilters.onlyConversions) return true;
726
- if (analyticsFilters.sortBy !== 'time_desc') return true;
727
- return false;
728
- }, [analyticsFilters]);
729
-
730
- const resetAnalyticsFilters = useCallback(() => {
731
- setAnalyticsFilters({
732
- categories: new Set(['all']),
733
- screens: new Set(),
734
- sources: new Set(['all']),
735
- userTypes: new Set(['all']),
736
- timeWindow: 'all',
737
- payloadComplexity: 'all',
738
- hasRevenue: false,
739
- hasItems: false,
740
- hasUserProps: false,
741
- hasParams: false,
742
- onlyDuplicates: false,
743
- onlyConversions: false,
744
- sortBy: 'time_desc',
745
- });
746
- }, []);
747
-
748
- const [isAnalyticsLayoutReady, setIsAnalyticsLayoutReady] = useState(false);
749
- const [analyticsHeaderExpanded, setAnalyticsHeaderExpanded] = useState(false);
750
-
751
- const [newEventIds, setNewEventIds] = useState<Set<number>>(new Set());
752
- const prevEventIdsRef = useRef<Set<number>>(new Set());
753
-
754
- const [navState, setNavState] = useState<any>(null);
755
- const navigationContext = React.useContext(NavigationContext);
756
- const hasNavigationContext = navigationContext !== undefined;
757
-
758
- const currentRouteRef = useRef<RouteInfo>({
759
- path: '',
760
- params: null,
761
- });
762
-
763
- useEffect(() => {
764
- setRouteInfoProvider(() => currentRouteRef.current);
765
- return () => {
766
- setRouteInfoProvider(null);
767
- };
768
- }, []);
769
-
770
- useEffect(() => {
771
- if (navState) {
772
- const info = getNavigationInfo(navState);
773
- if (info?.path) {
774
- currentRouteRef.current = info;
775
- }
776
- }
777
- }, [navState]);
778
-
779
- useEffect(() => {
780
- if (!navigationRef) return;
781
-
782
- const updateState = () => {
783
- try {
784
- if (typeof navigationRef.isReady === 'function' && navigationRef.isReady()) {
785
- const currentRoute = typeof navigationRef.getCurrentRoute === 'function'
786
- ? navigationRef.getCurrentRoute()
787
- : null;
788
- if (currentRoute?.name) {
789
- currentRouteRef.current = {
790
- path: currentRoute.name,
791
- params: currentRoute.params || null,
792
- };
793
- }
794
- const state = navigationRef.getRootState();
795
- if (state) {
796
- setNavState(state);
797
- const routeInfo = getNavigationInfo(state);
798
- if (routeInfo?.path) {
799
- currentRouteRef.current = routeInfo;
800
- }
801
- }
802
- }
803
- } catch (err) {
804
- // Safe check
805
- }
806
- };
807
-
808
- // Initialize state
809
- updateState();
810
-
811
- // Listen to changes
812
- const unsubscribe = typeof navigationRef.addListener === 'function'
813
- ? navigationRef.addListener('state', () => {
814
- updateState();
815
- })
816
- : null;
817
-
818
- return () => {
819
- if (unsubscribe) {
820
- unsubscribe();
821
- }
822
- };
823
- }, [navigationRef]);
824
-
825
- const logRouteMapRef = useRef<Map<number, RouteInfo>>(new Map());
826
- const prevLogIdsRef = useRef<Set<number>>(new Set());
827
- const [newLogIds, setNewLogIds] = useState<Set<number>>(new Set());
828
-
829
- const pulseAnim = useRef(new Animated.Value(1)).current;
830
- const activePulseAnim = useRef(new Animated.Value(0.4)).current;
831
- const unreadPulseAnim = useRef(new Animated.Value(1)).current;
832
- // #4 — diagonal light streak sweeping across the floating launcher
833
- const fabShineAnim = useRef(new Animated.Value(0)).current;
834
- // #11 — header "clear all" icon spin/scale animation
835
- const clearAnim = useRef(new Animated.Value(0)).current;
836
-
837
- // #4 — draggable floating launcher (drag anywhere on screen)
838
- const fabPan = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
839
- const fabPanRef = useRef({x: 0, y: 0});
840
- useEffect(() => {
841
- const idX = fabPan.x.addListener(v => (fabPanRef.current.x = v.value));
842
- const idY = fabPan.y.addListener(v => (fabPanRef.current.y = v.value));
843
- return () => {
844
- fabPan.x.removeListener(idX);
845
- fabPan.y.removeListener(idY);
846
- };
847
- }, [fabPan]);
848
- const fabDraggedRef = useRef(false);
849
- const fabPanResponder = useRef(
850
- PanResponder.create({
851
- // Let taps fall through to the launcher; only hijack once the
852
- // finger actually moves, so onPress still fires on a tap.
853
- onStartShouldSetPanResponder: () => false,
854
- onMoveShouldSetPanResponder: (_e, g) =>
855
- Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
856
- onPanResponderGrant: () => {
857
- fabDraggedRef.current = true;
858
- fabPan.setOffset({
859
- x: fabPanRef.current.x,
860
- y: fabPanRef.current.y,
861
- });
862
- fabPan.setValue({x: 0, y: 0});
863
- },
864
- onPanResponderMove: Animated.event([null, {dx: fabPan.x, dy: fabPan.y}], {
865
- useNativeDriver: false,
866
- }),
867
- onPanResponderRelease: () => {
868
- fabPan.flattenOffset();
869
- // small delay so the trailing tap (if any) is ignored
870
- setTimeout(() => {
871
- fabDraggedRef.current = false;
872
- }, 50);
873
- },
874
- onPanResponderTerminate: () => {
875
- fabPan.flattenOffset();
876
- fabDraggedRef.current = false;
877
- },
878
- }),
879
- ).current;
880
-
881
- // #2 — scroll-to-top button for the main APIs list, always visible at the
882
- // bottom right of the list.
883
-
884
- const runClearAllWithAnimation = useCallback(() => {
885
- Animated.sequence([
886
- Animated.timing(clearAnim, {
887
- toValue: 1,
888
- duration: 320,
889
- useNativeDriver: false,
890
- }),
891
- Animated.timing(clearAnim, {
892
- toValue: 0,
893
- duration: 0,
894
- useNativeDriver: false,
895
- }),
896
- ]).start();
897
- handleClearAll();
898
- }, [clearAnim]);
899
-
900
- useEffect(() => {
901
- if (Platform.OS === 'android') {
902
- UIManager.setLayoutAnimationEnabledExperimental?.(true);
903
- }
904
- }, []);
905
-
906
- useEffect(() => {
907
- if (visible) return;
908
- const loop = Animated.loop(
909
- Animated.sequence([
910
- Animated.timing(pulseAnim, {
911
- toValue: 1.2,
912
- duration: 800,
913
- useNativeDriver: false,
914
- }),
915
- Animated.timing(pulseAnim, {
916
- toValue: 1,
917
- duration: 800,
918
- useNativeDriver: false,
919
- }),
920
- ]),
921
- );
922
- loop.start();
923
- return () => loop.stop();
924
- }, [pulseAnim, visible]);
925
-
926
- // #4 — sweep the shine streak across the launcher, pause, repeat.
927
- useEffect(() => {
928
- if (visible) return;
929
- const loop = Animated.loop(
930
- Animated.sequence([
931
- Animated.timing(fabShineAnim, {
932
- toValue: 1,
933
- duration: 1100,
934
- useNativeDriver: false,
935
- }),
936
- Animated.delay(1600),
937
- Animated.timing(fabShineAnim, {
938
- toValue: 0,
939
- duration: 0,
940
- useNativeDriver: false,
941
- }),
942
- ]),
943
- );
944
- loop.start();
945
- return () => loop.stop();
946
- }, [fabShineAnim, visible]);
947
-
948
- useEffect(() => {
949
- const loop = Animated.loop(
950
- Animated.sequence([
951
- Animated.timing(activePulseAnim, {
952
- toValue: 1,
953
- duration: 1200,
954
- useNativeDriver: false,
955
- }),
956
- Animated.timing(activePulseAnim, {
957
- toValue: 0.4,
958
- duration: 1200,
959
- useNativeDriver: false,
960
- }),
961
- ]),
962
- );
963
- loop.start();
964
- return () => loop.stop();
965
- }, [activePulseAnim]);
966
-
967
- useEffect(() => {
968
- const loop = Animated.loop(
969
- Animated.sequence([
970
- Animated.timing(unreadPulseAnim, {
971
- toValue: 1.3,
972
- duration: 800,
973
- useNativeDriver: false,
974
- }),
975
- Animated.timing(unreadPulseAnim, {
976
- toValue: 0.8,
977
- duration: 800,
978
- useNativeDriver: false,
979
- }),
980
- ]),
981
- );
982
- loop.start();
983
- return () => loop.stop();
984
- }, [unreadPulseAnim]);
985
-
986
- const isNativeModule = useMemo(() => isNativeModuleAvailable(), []);
987
- const useNativeFab =
988
- (Platform.OS === 'ios' || Platform.OS === 'android') && isNativeModule;
989
-
990
-
991
-
992
- // 100% Native Main-Thread Floating Button Lifecycle
993
- useEffect(() => {
994
- if (!useNativeFab || !enabled) {
995
- if (useNativeFab) {
996
- hideNativeFloatingButton().catch(() => {});
997
- }
998
- return;
999
- }
1000
-
1001
- if (visible) {
1002
- hideNativeFloatingButton().catch(() => {});
1003
- } else {
1004
- showNativeFloatingButton().catch(() => {});
1005
- setNativeFloatingButtonBadge(
1006
- logs.length > 0 || analyticsEvents.length > 0,
1007
- ).catch(() => {});
1008
- }
1009
-
1010
- return () => {
1011
- if (useNativeFab) {
1012
- hideNativeFloatingButton().catch(() => {});
1013
- }
1014
- };
1015
- }, [
1016
- useNativeFab,
1017
- enabled,
1018
- visible,
1019
- logs.length,
1020
- analyticsEvents.length,
1021
- ]);
1022
-
1023
- // Subscribe to native UI-thread floating button tap events
1024
- useEffect(() => {
1025
- if (!useNativeFab) return;
1026
- const unsubscribe = subscribeNativeFloatingButtonPress(() => {
1027
- hideNativeFloatingButton().catch(() => {});
1028
- setVisible(true);
1029
- });
1030
- return () => {
1031
- unsubscribe();
1032
- };
1033
- }, [useNativeFab]);
1034
-
1035
- // Subscribe to physical hardware shake events (or Cmd+Ctrl+Z on iOS simulator)
1036
- useEffect(() => {
1037
- if (!useNativeFab) return;
1038
- const unsubscribe = subscribeNativeDeviceShake(() => {
1039
- setVisible(prev => {
1040
- const next = !prev;
1041
- if (next) {
1042
- hideNativeFloatingButton().catch(() => {});
1043
- }
1044
- return next;
1045
- });
1046
- });
1047
- return () => {
1048
- unsubscribe();
1049
- };
1050
- }, [useNativeFab]);
1051
-
1052
- const isVisibleRefObj = useRef(visible);
1053
-
1054
- // #6 — every time the inspector is opened, land on chosen default tab & sync latest logs
1055
- useEffect(() => {
1056
- isVisibleRefObj.current = visible;
1057
- if (visible) {
1058
- trackInspectorScreenView('InspectorModal');
1059
- const target =
1060
- defaultTab === 'apis' || tabVisibility?.[defaultTab]
1061
- ? defaultTab
1062
- : 'apis';
1063
- setActiveTab(target);
1064
- trackInspectorTabView(target);
1065
-
1066
-
1067
-
1068
- // Instant synchronization of data collected while modal was closed
1069
- if (latestNetworkLogsRef.current.length > 0) {
1070
- const deduped = deduplicateLogs(latestNetworkLogsRef.current);
1071
- const incoming = new Set(deduped.map(l => l.id));
1072
- prevLogIdsRef.current = incoming;
1073
- setLogs(deduped);
1074
- }
1075
- if (latestConsoleLogsRef.current.length > 0) {
1076
- setConsoleLogs(latestConsoleLogsRef.current);
1077
- }
1078
- if (latestAnalyticsEventsRef.current.length > 0) {
1079
- setAnalyticsEvents(latestAnalyticsEventsRef.current);
1080
- }
1081
- const freshState = getReduxState();
1082
- if (freshState) {
1083
- setReduxState(typeof freshState === 'object' ? {...freshState} : freshState);
1084
- setReduxLastActionMap({...getLastActionForReducer()});
1085
- }
1086
- const freshCrashes = getCrashRecords();
1087
- if (freshCrashes.length > 0) {
1088
- setCrashRecords(freshCrashes);
1089
- }
1090
-
1091
- const frame = requestAnimationFrame(() => {
1092
- setIsReady(true);
1093
- });
1094
- return () => {
1095
- cancelAnimationFrame(frame);
1096
- };
1097
- } else {
1098
- setIsReady(false);
1099
- setSelectedLogs(new Set());
1100
- }
1101
- }, [visible]);
1102
-
1103
- useEffect(() => {
1104
- setupNetworkLogger();
1105
- clearNetworkLogs();
1106
- setupConsoleLogger();
1107
- autoSetupAnalyticsLogger();
1108
- setupGlobalCrashHandler();
1109
- const cleanupMemoryWarning = setupMemoryWarningHandler();
1110
-
1111
- const isVisibleRef = isVisibleRefObj;
1112
-
1113
- const unsubscribeCrash = subscribeCrashEvents(crashInfo => {
1114
- if (crashInfo.message === '__CLEARED__') {
1115
- setCrashRecords([]);
1116
- setSelectedCrash(null);
1117
- return;
1118
- }
1119
- const updated = getCrashRecords();
1120
- if (updated.length > 0) {
1121
- pushNativeLogRecord('crash', JSON.stringify(updated[0]));
1122
- }
1123
- if (isVisibleRef.current) {
1124
- setCrashRecords(updated);
1125
- }
1126
- });
1127
-
1128
- // Sync crashes recorded before this subscription ran (e.g. a render crash
1129
- // during the very first commit, which fires before effects are mounted).
1130
- const pendingCrashes = getCrashRecords();
1131
- if (pendingCrashes.length > 0) {
1132
- pendingCrashes.forEach(c => pushNativeLogRecord('crash', JSON.stringify(c)));
1133
- setCrashRecords(pendingCrashes);
1134
- }
1135
-
1136
- let timeoutId: ReturnType<typeof setTimeout>;
1137
-
1138
- let isFirstNetworkCall = true;
1139
- const unsubscribe = subscribeNetworkLogs((raw: NetworkLog[]) => {
1140
- latestNetworkLogsRef.current = raw;
1141
- if (raw.length > 0) {
1142
- pushNativeLogRecord('apis', JSON.stringify(raw[0]));
1143
- }
1144
- if (isNetworkPausedRef.current) return;
1145
- if (!isVisibleRef.current) return; // ZERO-RENDER INACTIVE MODE
1146
-
1147
- clearTimeout(timeoutId);
1148
- const updateNetworkState = () => {
1149
- const deduped = deduplicateLogs(raw);
1150
- const incoming = new Set(deduped.map(l => l.id));
1151
- const freshIds = new Set<number>();
1152
- incoming.forEach(id => {
1153
- if (!prevLogIdsRef.current.has(id)) freshIds.add(id);
1154
- });
1155
- prevLogIdsRef.current = incoming;
1156
- if (freshIds.size > 0) {
1157
- freshIds.forEach(id => {
1158
- if (!logRouteMapRef.current.has(id)) {
1159
- const matchedLog = deduped.find(l => l.id === id);
1160
- const resolvedRoute =
1161
- (matchedLog as any)?.routeInfo || currentRouteRef.current;
1162
- logRouteMapRef.current.set(id, resolvedRoute);
1163
- }
1164
- });
1165
- setNewLogIds(freshIds);
1166
- setTimeout(() => setNewLogIds(new Set()), 1200);
1167
- }
1168
- setLogs(deduped);
1169
- };
1170
-
1171
- if (isFirstNetworkCall) {
1172
- isFirstNetworkCall = false;
1173
- const deduped = deduplicateLogs(raw);
1174
- const incoming = new Set(deduped.map(l => l.id));
1175
- prevLogIdsRef.current = incoming;
1176
- deduped.forEach(l => {
1177
- if (!logRouteMapRef.current.has(l.id)) {
1178
- const resolvedRoute =
1179
- (l as any)?.routeInfo || currentRouteRef.current;
1180
- logRouteMapRef.current.set(l.id, resolvedRoute);
1181
- }
1182
- });
1183
- setLogs(deduped);
1184
- } else {
1185
- timeoutId = setTimeout(updateNetworkState, 250);
1186
- }
1187
- });
1188
-
1189
- // ─── Analytics subscription ──────────────────────────────────────────────
1190
- let analyticsTimeoutId: ReturnType<typeof setTimeout>;
1191
- let isFirstAnalyticsCall = true;
1192
-
1193
- const unsubscribeAnalytics = subscribeAnalyticsEvents(
1194
- (raw: AnalyticsEvent[]) => {
1195
- latestAnalyticsEventsRef.current = raw;
1196
- if (raw.length > 0) {
1197
- pushNativeLogRecord('analytics', JSON.stringify(raw[0]));
1198
- }
1199
- if (isAnalyticsPausedRef.current) return;
1200
- if (!isVisibleRef.current) return; // ZERO-RENDER INACTIVE MODE
1201
-
1202
- clearTimeout(analyticsTimeoutId);
1203
- const updateAnalyticsState = () => {
1204
- const incoming = new Set(raw.map(e => e.id));
1205
- const freshIds = new Set<number>();
1206
- incoming.forEach(id => {
1207
- if (!prevEventIdsRef.current.has(id)) freshIds.add(id);
1208
- });
1209
- prevEventIdsRef.current = incoming;
1210
- if (freshIds.size > 0) {
1211
- freshIds.forEach(id => {
1212
- if (!logRouteMapRef.current.has(id + 1000000)) {
1213
- logRouteMapRef.current.set(
1214
- id + 1000000,
1215
- currentRouteRef.current,
1216
- );
1217
- }
1218
- });
1219
- setNewEventIds(freshIds);
1220
- setTimeout(() => setNewEventIds(new Set()), 1200);
1221
- }
1222
- setAnalyticsEvents(raw);
1223
- };
1224
-
1225
- if (isFirstAnalyticsCall) {
1226
- isFirstAnalyticsCall = false;
1227
- const incoming = new Set(raw.map(e => e.id));
1228
- prevEventIdsRef.current = incoming;
1229
- setAnalyticsEvents(raw);
1230
- } else {
1231
- analyticsTimeoutId = setTimeout(updateAnalyticsState, 200);
1232
- }
1233
- },
1234
- );
1235
-
1236
- // ─── Console subscription ────────────────────────────────────────────────
1237
- let consoleTimeoutId: ReturnType<typeof setTimeout>;
1238
- let isFirstConsoleCall = true;
1239
-
1240
- const unsubscribeConsole = subscribeConsoleLogs((raw: ConsoleLog[]) => {
1241
- latestConsoleLogsRef.current = raw;
1242
- if (raw.length > 0) {
1243
- pushNativeLogRecord('logs', JSON.stringify(raw[0]));
1244
- }
1245
- if (isConsolePausedRef.current) return;
1246
- if (!isVisibleRef.current) return; // ZERO-RENDER INACTIVE MODE
1247
-
1248
- clearTimeout(consoleTimeoutId);
1249
- if (isFirstConsoleCall) {
1250
- isFirstConsoleCall = false;
1251
- setConsoleLogs(raw);
1252
- } else {
1253
- consoleTimeoutId = setTimeout(() => {
1254
- setConsoleLogs(raw);
1255
- }, 200);
1256
- }
1257
- });
1258
-
1259
- const initialReduxState = getReduxState();
1260
- if (initialReduxState) {
1261
- setReduxState(typeof initialReduxState === 'object' ? {...initialReduxState} : initialReduxState);
1262
- setReduxLastActionMap({...getLastActionForReducer()});
1263
- }
1264
- const unsubscribeRedux = subscribeReduxState(() => {
1265
- if (!isVisibleRef.current) return; // ZERO-RENDER INACTIVE MODE
1266
- const freshState = getReduxState();
1267
- setReduxState(freshState && typeof freshState === 'object' ? {...freshState} : freshState);
1268
- setReduxLastActionMap({...getLastActionForReducer()});
1269
- });
1270
-
1271
- return () => {
1272
- unsubscribe();
1273
- clearTimeout(timeoutId);
1274
- unsubscribeAnalytics();
1275
- clearTimeout(analyticsTimeoutId);
1276
- unsubscribeConsole();
1277
- clearTimeout(consoleTimeoutId);
1278
- unsubscribeRedux();
1279
- unsubscribeCrash();
1280
- cleanupMemoryWarning();
1281
- };
1282
- }, []);
1283
-
1284
- useEffect(() => {
1285
- setMaxNetworkLogsLimit(maxNetworkLogs);
1286
- }, [maxNetworkLogs]);
1287
-
1288
- useEffect(() => {
1289
- setMaxCrashLogsLimit(maxCrashLogs);
1290
- }, [maxCrashLogs]);
1291
-
1292
- useEffect(() => {
1293
- if (!isNetworkPaused && latestNetworkLogsRef.current.length > 0) {
1294
- const deduped = deduplicateLogs(latestNetworkLogsRef.current);
1295
- setLogs(deduped);
1296
- }
1297
- }, [isNetworkPaused]);
1298
-
1299
- useEffect(() => {
1300
- if (!isAnalyticsPaused && latestAnalyticsEventsRef.current.length > 0) {
1301
- setAnalyticsEvents(latestAnalyticsEventsRef.current);
1302
- }
1303
- }, [isAnalyticsPaused]);
1304
-
1305
- useEffect(() => {
1306
- if (!isConsolePaused && latestConsoleLogsRef.current.length > 0) {
1307
- setConsoleLogs(latestConsoleLogsRef.current);
1308
- }
1309
- }, [isConsolePaused]);
1310
-
1311
- useEffect(() => {
1312
- setReqExpanded(true);
1313
- setResExpanded(true);
1314
- setShowReqDiff(false);
1315
- setShowResDiff(false);
1316
- setDetailSearch('');
1317
- }, [selected]);
1318
-
1319
- const filteredLogs = useMemo(() => {
1320
- let result = logs.filter(log => {
1321
- // 1. Quick Filter Check (All, Errors, Success, Slow, GET, POST, GraphQL)
1322
- if (quickFilter && quickFilter !== 'all') {
1323
- if (quickFilter === 'errors') {
1324
- const isErr =
1325
- log.status === 0 ||
1326
- log.status == null ||
1327
- (typeof log.status === 'number' && log.status >= 400);
1328
- if (!isErr) return false;
1329
- } else if (quickFilter === 'success') {
1330
- const isSuccess =
1331
- typeof log.status === 'number' &&
1332
- log.status >= 200 &&
1333
- log.status < 400;
1334
- if (!isSuccess) return false;
1335
- } else if (quickFilter === 'slow') {
1336
- if ((log.duration || 0) < 500) return false;
1337
- } else if (quickFilter === 'graphql') {
1338
- const isGql =
1339
- (log.url || '').toLowerCase().includes('graphql') ||
1340
- (log.client || '').toLowerCase().includes('graphql') ||
1341
- (log.client || '').toLowerCase().includes('apollo');
1342
- if (!isGql) return false;
1343
- } else {
1344
- if (log.method?.toUpperCase() !== quickFilter.toUpperCase()) {
1345
- return false;
1346
- }
1347
- }
1348
- }
1349
-
1350
- // 2. Status Filter Check (from filters accordion dropdown)
1351
- if (statusFilters.size > 0) {
1352
- const matched = [...statusFilters].some(f => {
1353
- if (f === 'ALL') return true;
1354
- if (f === 'Failed') return log.status === 0 || log.status == null;
1355
- const codeNum = parseInt(f, 10);
1356
- if (!isNaN(codeNum)) {
1357
- return Number(log.status) === codeNum;
1358
- }
1359
- return String(log.status)[0] === f[0];
1360
- });
1361
- if (!matched) return false;
1362
- }
1363
-
1364
- // 3. Method Filter Check (from filters accordion dropdown)
1365
- if (methodFilters.size > 0) {
1366
- const matchedMethod = [...methodFilters].some(m => {
1367
- if (m === 'ALL') return true;
1368
- return log.method?.toUpperCase() === m;
1369
- });
1370
- if (!matchedMethod) return false;
1371
- }
1372
-
1373
- // 4. Advanced Search Query Engine Check with Scope, Regex and Case-Sensitivity
1374
- if (search && search.trim().length > 0) {
1375
- const routePath = logRouteMapRef.current.get(log.id)?.path || '';
1376
- const isMatch = matchNetworkLogQuery(log, search, routePath, {
1377
- scope: searchScope,
1378
- isRegex: isRegexSearch,
1379
- isCaseSensitive: isCaseSensitive,
1380
- });
1381
- if (!isMatch) return false;
1382
- }
1383
-
1384
- return true;
1385
- });
1386
-
1387
- if (sortOrder === 'oldest') {
1388
- result = [...result].reverse();
1389
- }
1390
-
1391
- // #9 — collapse consecutive identical requests
1392
- if (!showDuplicateLogs) {
1393
- const collapsed: NetworkLog[] = [];
1394
- for (const log of result) {
1395
- const last = collapsed[collapsed.length - 1];
1396
- if (
1397
- last &&
1398
- last.method === log.method &&
1399
- last.url === log.url &&
1400
- last.status === log.status
1401
- ) {
1402
- collapsed[collapsed.length - 1] = {
1403
- ...last,
1404
- duplicateCount: (last.duplicateCount || 1) + 1,
1405
- };
1406
- } else {
1407
- collapsed.push({...log, duplicateCount: 1});
1408
- }
1409
- }
1410
- result = collapsed;
1411
- }
1412
-
1413
- return result.slice(0, maxNetworkLogs);
1414
- }, [
1415
- logs,
1416
- search,
1417
- searchScope,
1418
- isRegexSearch,
1419
- isCaseSensitive,
1420
- quickFilter,
1421
- statusFilters,
1422
- methodFilters,
1423
- sortOrder,
1424
- maxNetworkLogs,
1425
- showDuplicateLogs,
1426
- ]);
1427
-
1428
- const availableMethods = useMemo(() => {
1429
- const methods = new Set<Method>();
1430
- logs.forEach(log => {
1431
- if (log.method) methods.add(log.method.toUpperCase() as Method);
1432
- });
1433
- return ['ALL' as Method, ...Array.from(methods)];
1434
- }, [logs]);
1435
-
1436
- const toggleSectionFilter = useCallback(
1437
- (pageName: string, filter: LocalFilter) => {
1438
- setSectionFilters(prev => {
1439
- const current =
1440
- prev[pageName] || new Set(['success', 'failed', 'loading']);
1441
- const next = new Set(current);
1442
-
1443
- if (next.has(filter)) {
1444
- next.delete(filter);
1445
- } else {
1446
- next.add(filter);
1447
- }
1448
-
1449
- return {...prev, [pageName]: next};
1450
- });
1451
- },
1452
- [],
1453
- );
1454
-
1455
- const toggleSectionCollapse = useCallback((pageName: string) => {
1456
- setCollapsedSections(prev => {
1457
- const next = new Set(prev);
1458
- if (next.has(pageName)) next.delete(pageName);
1459
- else next.add(pageName);
1460
- return next;
1461
- });
1462
- }, []);
1463
-
1464
- const groupedData = useMemo(() => {
1465
- const result: GroupedListItem[] = [];
1466
- const groupMap = new Map<
1467
- string,
1468
- {pageName: string; color: string; logs: NetworkLog[]}
1469
- >();
1470
-
1471
- for (let i = 0; i < filteredLogs.length; i++) {
1472
- const log = filteredLogs[i];
1473
- const routeInfo =
1474
- logRouteMapRef.current.get(log.id) || (log as any)?.routeInfo;
1475
- const pageName = getLogPageName(log, routeInfo);
1476
-
1477
- let group = groupMap.get(pageName);
1478
- if (!group) {
1479
- group = {pageName, color: getDomainColor(pageName), logs: []};
1480
- groupMap.set(pageName, group);
1481
- }
1482
- group.logs.push(log);
1483
- }
1484
-
1485
- let idx = 0;
1486
- groupMap.forEach(g => {
1487
- let success = 0;
1488
- let failed = 0;
1489
- let loading = 0;
1490
-
1491
- g.logs.forEach(l => {
1492
- if (l.status == null) loading++;
1493
- else if (l.status === 0 || l.status >= 400) failed++;
1494
- else success++;
1495
- });
1496
-
1497
- const activeFilters =
1498
- sectionFilters[g.pageName] || new Set(['success', 'failed', 'loading']);
1499
-
1500
- const isCollapsed = collapsedSections.has(g.pageName);
1501
- const timestamp = g.logs[0]?.startTime || 0;
1502
-
1503
- result.push({
1504
- type: 'header',
1505
- id: `hdr-${g.pageName}`,
1506
- pageName: g.pageName,
1507
- color: g.color,
1508
- stats: {success, failed, loading},
1509
- timestamp,
1510
- activeFilters,
1511
- isCollapsed,
1512
- isFirst: idx === 0,
1513
- });
1514
- idx++;
1515
-
1516
- if (!isCollapsed) {
1517
- const displayLogs = g.logs.filter(l => {
1518
- if (l.status == null) return activeFilters.has('loading');
1519
- if (l.status === 0 || l.status >= 400)
1520
- return activeFilters.has('failed');
1521
- return activeFilters.has('success');
1522
- });
1523
-
1524
- displayLogs.forEach((log, index) => {
1525
- result.push({
1526
- type: 'log',
1527
- id: `log-${log.id}`,
1528
- log,
1529
- isLast: index === displayLogs.length - 1,
1530
- color: g.color,
1531
- });
1532
- });
1533
- }
1534
- });
1535
-
1536
- return result;
1537
- }, [filteredLogs, logs, sectionFilters, collapsedSections]);
1538
-
1539
- const {minStart, totalRange} = useMemo(() => {
1540
- if (filteredLogs.length === 0) return {minStart: 0, totalRange: 0};
1541
- const min = Math.min(...filteredLogs.map(l => l.startTime));
1542
- const max = Math.max(
1543
- ...filteredLogs.map(l => l.startTime + (l.duration || 10)),
1544
- );
1545
- return {minStart: min, totalRange: max - min};
1546
- }, [filteredLogs]);
1547
-
1548
- const prevSameRequest = useMemo(() => {
1549
- if (!selected) return null;
1550
- const index = logs.findIndex(l => l.id === selected.id);
1551
- if (index === -1) return null;
1552
- for (let i = index + 1; i < logs.length; i++) {
1553
- const l = logs[i];
1554
- if (l.url === selected.url && l.method === selected.method) {
1555
- return l;
1556
- }
1557
- }
1558
- return null;
1559
- }, [selected, logs]);
1560
-
1561
- const prevRequestData = prevSameRequest ? prevSameRequest.request : null;
1562
- const prevResponseData = prevSameRequest ? prevSameRequest.response : null;
1563
-
1564
- const filteredAnalyticsEvents = useMemo(() => {
1565
- let events = analyticsEvents;
1566
-
1567
- // Search query filter
1568
- if (analyticsSearch && analyticsSearch.trim().length > 0) {
1569
- const queryTokens = analyticsSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
1570
- events = events.filter(e => {
1571
- const searchTarget = [
1572
- e.name || '',
1573
- JSON.stringify(e.params || ''),
1574
- JSON.stringify(e.userProperties || ''),
1575
- e.screenName || '',
1576
- e.pageTitle || '',
1577
- e.userId || '',
1578
- e.source || '',
1579
- ].join(' ').toLowerCase();
1580
-
1581
- return queryTokens.every(token => searchTarget.includes(token));
1582
- });
1583
- }
1584
-
1585
- // Category filter
1586
- if (analyticsFilters.categories.size > 0 && !analyticsFilters.categories.has('all')) {
1587
- events = events.filter(e => {
1588
- const cat = getEventCategory(e.name);
1589
- return analyticsFilters.categories.has(cat);
1590
- });
1591
- }
1592
-
1593
- // Time window filter
1594
- if (analyticsFilters.timeWindow !== 'all') {
1595
- const now = Date.now();
1596
- const cutoff =
1597
- analyticsFilters.timeWindow === '1m'
1598
- ? now - 60 * 1000
1599
- : analyticsFilters.timeWindow === '5m'
1600
- ? now - 5 * 60 * 1000
1601
- : analyticsFilters.timeWindow === '15m'
1602
- ? now - 15 * 60 * 1000
1603
- : now - 60 * 60 * 1000;
1604
- events = events.filter(e => e.timestamp >= cutoff);
1605
- }
1606
-
1607
- // Source filter
1608
- if (analyticsFilters.sources.size > 0 && !analyticsFilters.sources.has('all')) {
1609
- events = events.filter(e => analyticsFilters.sources.has(e.source || 'manual'));
1610
- }
1611
-
1612
- // User identification filter
1613
- if (analyticsFilters.userTypes.size > 0 && !analyticsFilters.userTypes.has('all')) {
1614
- events = events.filter(e => {
1615
- const isIdentified = Boolean(e.userId && e.userId.trim() !== '');
1616
- if (analyticsFilters.userTypes.has('identified') && isIdentified) return true;
1617
- if (analyticsFilters.userTypes.has('anonymous') && !isIdentified) return true;
1618
- return false;
1619
- });
1620
- }
1621
-
1622
- // Payload complexity filter
1623
- if (analyticsFilters.payloadComplexity !== 'all') {
1624
- if (analyticsFilters.payloadComplexity === 'none') {
1625
- events = events.filter(
1626
- e => !e.params || Object.keys(e.params).length === 0,
1627
- );
1628
- } else if (analyticsFilters.payloadComplexity === 'simple') {
1629
- events = events.filter(
1630
- e => e.params && Object.keys(e.params).length <= 3,
1631
- );
1632
- } else if (analyticsFilters.payloadComplexity === 'heavy') {
1633
- events = events.filter(
1634
- e => e.params && Object.keys(e.params).length > 3,
1635
- );
1636
- }
1637
- }
1638
-
1639
- // Conversion / Goal events filter
1640
- if (analyticsFilters.onlyConversions) {
1641
- const CONVERSION_PATTERNS = [
1642
- 'purchase',
1643
- 'item_purchase',
1644
- 'ecommerce_purchase',
1645
- 'sign_up',
1646
- 'login',
1647
- 'lead',
1648
- 'generate_lead',
1649
- 'tutorial_complete',
1650
- 'add_payment_info',
1651
- 'begin_checkout',
1652
- 'spend_virtual_currency',
1653
- ];
1654
- events = events.filter(e =>
1655
- CONVERSION_PATTERNS.some(pat => e.name.toLowerCase().includes(pat)),
1656
- );
1657
- }
1658
-
1659
- // Screen filter
1660
- if (analyticsFilters.screens.size > 0) {
1661
- events = events.filter(e => {
1662
- const scr =
1663
- e.screenName ||
1664
- e.params?.firebase_screen ||
1665
- e.params?.screen_name ||
1666
- e.params?.firebase_screen_class ||
1667
- e.screenClass ||
1668
- '';
1669
- return analyticsFilters.screens.has(scr);
1670
- });
1671
- }
1672
-
1673
- // Has Revenue filter
1674
- if (analyticsFilters.hasRevenue) {
1675
- events = events.filter(
1676
- e =>
1677
- (e.params?.value != null && !isNaN(Number(e.params.value))) ||
1678
- (e.params?.price != null && !isNaN(Number(e.params.price))),
1679
- );
1680
- }
1681
-
1682
- // Has Items filter
1683
- if (analyticsFilters.hasItems) {
1684
- events = events.filter(
1685
- e => Array.isArray(e.params?.items) && e.params.items.length > 0,
1686
- );
1687
- }
1688
-
1689
- // Has User Props filter
1690
- if (analyticsFilters.hasUserProps) {
1691
- events = events.filter(
1692
- e => e.userProperties && Object.keys(e.userProperties).length > 0,
1693
- );
1694
- }
1695
-
1696
- // Has Params filter
1697
- if (analyticsFilters.hasParams) {
1698
- events = events.filter(
1699
- e => e.params && Object.keys(e.params).length > 0,
1700
- );
1701
- }
1702
-
1703
- // Deduplication
1704
- const deduplicatedEvents: (AnalyticsEvent & {count?: number})[] = [];
1705
- for (const e of events) {
1706
- if (deduplicatedEvents.length === 0) {
1707
- deduplicatedEvents.push({...e, count: 1});
1708
- continue;
1709
- }
1710
- const last = deduplicatedEvents[deduplicatedEvents.length - 1];
1711
- if (
1712
- last.name === e.name &&
1713
- JSON.stringify(last.params) === JSON.stringify(e.params) &&
1714
- JSON.stringify(last.userProperties) === JSON.stringify(e.userProperties)
1715
- ) {
1716
- last.count = (last.count || 1) + 1;
1717
- // Point to the newest timestamp and id
1718
- last.timestamp = e.timestamp;
1719
- last.id = e.id;
1720
- } else {
1721
- deduplicatedEvents.push({...e, count: 1});
1722
- }
1723
- }
1724
-
1725
- let result = deduplicatedEvents;
1726
-
1727
- // Only duplicates filter
1728
- if (analyticsFilters.onlyDuplicates) {
1729
- result = result.filter(e => (e.count || 1) > 1);
1730
- }
1731
-
1732
- // Sorting
1733
- if (analyticsFilters.sortBy === 'time_asc') {
1734
- result = [...result].sort((a, b) => a.timestamp - b.timestamp);
1735
- } else if (analyticsFilters.sortBy === 'revenue_desc') {
1736
- result = [...result].sort((a, b) => {
1737
- const valA = Number(a.params?.value ?? a.params?.price ?? 0);
1738
- const valB = Number(b.params?.value ?? b.params?.price ?? 0);
1739
- return valB - valA;
1740
- });
1741
- } else if (analyticsFilters.sortBy === 'count_desc') {
1742
- result = [...result].sort((a, b) => (b.count || 1) - (a.count || 1));
1743
- }
1744
-
1745
- return result.slice(0, maxAnalyticsEventsLimit);
1746
- }, [analyticsEvents, analyticsSearch, analyticsFilters, maxAnalyticsEventsLimit]);
1747
-
1748
- const filteredConsoleLogs = useMemo(() => {
1749
- let result = visibleConsoleLogs;
1750
-
1751
- // Filters check
1752
- if (logFilters.size > 0 && !logFilters.has('all')) {
1753
- result = result.filter(log => {
1754
- if (logFilters.has(log.type)) return true;
1755
- if (logFilters.has('user-log') && log.sourceMethod === 'log')
1756
- return true;
1757
- if (
1758
- logFilters.has('analytics') &&
1759
- log.message?.toLowerCase().includes('[analytics error]')
1760
- )
1761
- return true;
1762
- return false;
1763
- });
1764
- }
1765
-
1766
- // Straightforward keyword search
1767
- if (logSearch && logSearch.trim().length > 0) {
1768
- const queryTokens = logSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
1769
- result = result.filter(log => {
1770
- const searchTarget = [
1771
- log.message || '',
1772
- log.caller || '',
1773
- log.type || '',
1774
- log.sourceMethod || '',
1775
- log.stack || '',
1776
- ].join(' ').toLowerCase();
1777
-
1778
- return queryTokens.every(token => {
1779
- if (token === 'error' || token === 'err') {
1780
- return log.type === 'error' || searchTarget.includes(token);
1781
- }
1782
- if (token === 'warn' || token === 'warning') {
1783
- return log.type === 'warn' || searchTarget.includes(token);
1784
- }
1785
- if (token === 'info') {
1786
- return log.type === 'info' || searchTarget.includes(token);
1787
- }
1788
- return searchTarget.includes(token);
1789
- });
1790
- });
1791
- }
1792
-
1793
- // Apply sort order (newest/oldest first)
1794
- result = [...result].sort((a, b) =>
1795
- logSortOrder === 'newest'
1796
- ? b.timestamp - a.timestamp
1797
- : a.timestamp - b.timestamp,
1798
- );
1799
-
1800
- // Collapse consecutive identical messages into one row with a ×N counter unless duplicates are explicitly enabled
1801
- if (!showDuplicateLogs) {
1802
- const collapsed: ConsoleLog[] = [];
1803
- for (const log of result) {
1804
- const last = collapsed[collapsed.length - 1];
1805
- if (
1806
- last &&
1807
- last.type === log.type &&
1808
- last.sourceMethod === log.sourceMethod &&
1809
- last.message === log.message
1810
- ) {
1811
- collapsed[collapsed.length - 1] = {
1812
- ...last,
1813
- duplicateCount: (last.duplicateCount || 1) + 1,
1814
- };
1815
- } else {
1816
- collapsed.push({...log, duplicateCount: 1});
1817
- }
1818
- }
1819
- result = collapsed;
1820
- }
1821
-
1822
- return result;
1823
- }, [
1824
- visibleConsoleLogs,
1825
- logFilters,
1826
- logSearch,
1827
- logSortOrder,
1828
- showDuplicateLogs,
1829
- ]);
1830
-
1831
- const logCounts = useMemo(() => {
1832
- let searchedLogs = visibleConsoleLogs;
1833
- if (logSearch && logSearch.trim().length > 0) {
1834
- const queryTokens = logSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
1835
- searchedLogs = visibleConsoleLogs.filter(log => {
1836
- const searchTarget = [
1837
- log.message || '',
1838
- log.caller || '',
1839
- log.type || '',
1840
- log.sourceMethod || '',
1841
- log.stack || '',
1842
- ].join(' ').toLowerCase();
1843
-
1844
- return queryTokens.every(token => {
1845
- if (token === 'error' || token === 'err') {
1846
- return log.type === 'error' || searchTarget.includes(token);
1847
- }
1848
- if (token === 'warn' || token === 'warning') {
1849
- return log.type === 'warn' || searchTarget.includes(token);
1850
- }
1851
- if (token === 'info') {
1852
- return log.type === 'info' || searchTarget.includes(token);
1853
- }
1854
- return searchTarget.includes(token);
1855
- });
1856
- });
1857
- }
1858
-
1859
- const total = visibleConsoleLogs.length;
1860
-
1861
- return {
1862
- all: `${searchedLogs.length}/${total}`,
1863
- info: `${searchedLogs.filter(l => l.type === 'info').length}/${total}`,
1864
- warn: `${searchedLogs.filter(l => l.type === 'warn').length}/${total}`,
1865
- error: `${searchedLogs.filter(l => l.type === 'error').length}/${total}`,
1866
- 'user-log': `${
1867
- searchedLogs.filter(l => l.sourceMethod === 'log').length
1868
- }/${total}`,
1869
- analytics: `${
1870
- searchedLogs.filter(l =>
1871
- l.message.toLowerCase().includes('[analytics error]'),
1872
- ).length
1873
- }/${total}`,
1874
- };
1875
- }, [visibleConsoleLogs, logSearch]);
1876
-
1877
- function closeModal() {
1878
- setVisible(false);
1879
- setTimeout(() => {
1880
- setSelected(null);
1881
- setSelectedEvent(null);
1882
- setSelectedLog(null);
1883
- setSelectedReduxSlice(null);
1884
- setSelectedReduxAction(null);
1885
- setSelectedCrash(null);
1886
- }, 300);
1887
- }
1888
-
1889
- function handleClearAll() {
1890
- clearNetworkLogs();
1891
- setLogs([]);
1892
- setSelectedLogs(new Set());
1893
- setSectionFilters({});
1894
- setCollapsedSections(new Set());
1895
- setStatusFilters(new Set());
1896
- setMethodFilters(new Set());
1897
- setSearch('');
1898
- prevLogIdsRef.current = new Set();
1899
- logRouteMapRef.current = new Map();
1900
- // Also clear analytics
1901
- clearAnalyticsEvents();
1902
- setAnalyticsEvents([]);
1903
- setAnalyticsSearch('');
1904
- prevEventIdsRef.current = new Set();
1905
- // Also clear console logs
1906
- clearConsoleLogs();
1907
- setConsoleLogs([]);
1908
- setLogFilters(new Set(['all']));
1909
- setLogSearch('');
1910
- }
1911
-
1912
- function handleDelete() {
1913
- if (activeTab === 'logs') {
1914
- Alert.alert(
1915
- 'Clear Logs',
1916
- 'Are you sure you want to clear all console logs?',
1917
- [
1918
- {text: 'Cancel', style: 'cancel'},
1919
- {
1920
- text: 'Clear All',
1921
- onPress: () => {
1922
- clearConsoleLogs();
1923
- setConsoleLogs([]);
1924
- },
1925
- style: 'destructive',
1926
- },
1927
- ],
1928
- );
1929
- return;
1930
- }
1931
- if (activeTab === 'analytics') {
1932
- Alert.alert(
1933
- 'Clear Analytics',
1934
- 'Are you sure you want to clear all analytics events?',
1935
- [
1936
- {text: 'Cancel', style: 'cancel'},
1937
- {
1938
- text: 'Clear All',
1939
- onPress: () => {
1940
- clearAnalyticsEvents();
1941
- setAnalyticsEvents([]);
1942
- setSelectedEvent(null);
1943
- prevEventIdsRef.current = new Set();
1944
- },
1945
- style: 'destructive',
1946
- },
1947
- ],
1948
- );
1949
- return;
1950
- }
1951
- if (activeTab === 'redux') {
1952
- Alert.alert(
1953
- 'Clear Redux Timeline',
1954
- 'Are you sure you want to clear the dispatched action history?',
1955
- [
1956
- {text: 'Cancel', style: 'cancel'},
1957
- {
1958
- text: 'Clear All',
1959
- onPress: () => {
1960
- clearActionHistory();
1961
- setReduxLastActionMap({});
1962
- },
1963
- style: 'destructive',
1964
- },
1965
- ],
1966
- );
1967
- return;
1968
- }
1969
- if (activeTab === 'crash') {
1970
- Alert.alert(
1971
- 'Clear Crash History',
1972
- 'Are you sure you want to clear all intercepted crash records?',
1973
- [
1974
- {text: 'Cancel', style: 'cancel'},
1975
- {
1976
- text: 'Clear All',
1977
- onPress: () => {
1978
- clearCrashRecords();
1979
- setCrashRecords([]);
1980
- setSelectedCrash(null);
1981
- },
1982
- style: 'destructive',
1983
- },
1984
- ],
1985
- );
1986
- return;
1987
- }
1988
- // Default: APIs tab. Only clears NETWORK logs — never touches the other tabs.
1989
- if (selectedLogs.size > 0) {
1990
- setLogs(prev => prev.filter(l => !selectedLogs.has(l.id)));
1991
- setSelectedLogs(new Set());
1992
- } else {
1993
- Alert.alert(
1994
- 'Clear Logs',
1995
- 'Are you sure you want to clear all network logs?',
1996
- [
1997
- {text: 'Cancel', style: 'cancel'},
1998
- {
1999
- text: 'Clear All',
2000
- onPress: clearNetworkOnly,
2001
- style: 'destructive',
2002
- },
2003
- ],
2004
- );
2005
- }
2006
- }
2007
-
2008
- // Clears ONLY network logs + their derived selection/filter state.
2009
- function clearNetworkOnly() {
2010
- clearNetworkLogs();
2011
- setLogs([]);
2012
- setSelectedLogs(new Set());
2013
- setSectionFilters({});
2014
- setCollapsedSections(new Set());
2015
- setStatusFilters(new Set());
2016
- setMethodFilters(new Set());
2017
- prevLogIdsRef.current = new Set();
2018
- logRouteMapRef.current = new Map();
2019
- }
2020
-
2021
- const detailTitle = useMemo(() => {
2022
- if (!selected) return '';
2023
- try {
2024
- const path = new URL(selected.url).pathname;
2025
- const parts = path.split('/').filter(Boolean);
2026
- return parts.length > 0 ? `/${parts.slice(-2).join('/')}` : '/';
2027
- } catch {
2028
- const parts = selected.url.split('/').filter(Boolean);
2029
- return parts.length > 0 ? `/${parts.slice(-2).join('/')}` : selected.url;
2030
- }
2031
- }, [selected]);
2032
-
2033
- const detailDisplayUrl = useMemo(() => {
2034
- return selected ? formatDisplayUrl(selected.url) : '';
2035
- }, [selected]);
2036
-
2037
- const toggleSelect = useCallback((id: number) => {
2038
- setSelectedLogs(prev => {
2039
- const next = new Set(prev);
2040
- if (next.has(id)) next.delete(id);
2041
- else next.add(id);
2042
- return next;
2043
- });
2044
- }, []);
2045
-
2046
- const contextValue: InspectorContextValue = useMemo(
2047
- () => ({
2048
- // ─── Modal / launcher ───────────────────────────────────────────────
2049
- visible,
2050
- setVisible,
2051
- closeModal,
2052
- isReady,
2053
- enabled,
2054
- isEnabled: enabled,
2055
- appIcon,
2056
- environment,
2057
- modalHeightPercent,
2058
- setModalHeightPercent,
2059
- modalAnimationType,
2060
- setModalAnimationType,
2061
- hasNavigationContext,
2062
- setNavState,
2063
-
2064
- // ─── Tabs ───────────────────────────────────────────────────────────
2065
- activeTab,
2066
- switchActiveTab,
2067
- tabVisibility,
2068
- toggleTabVisibility,
2069
- lastReadApisCount,
2070
- lastReadLogsCount,
2071
-
2072
- // ─── Selection / header state ───────────────────────────────────────
2073
- selected,
2074
- setSelected,
2075
- selectedEvent,
2076
- setSelectedEvent,
2077
- selectedLog,
2078
- setSelectedLog,
2079
- showHeaderInfo,
2080
- setShowHeaderInfo,
2081
- settingsPage,
2082
- setSettingsPage,
2083
- isFeedbackOpen,
2084
- setIsFeedbackOpen,
2085
- updateAvailable,
2086
- latestNpmVersion,
2087
- clearAnim,
2088
- activePulseAnim,
2089
- unreadPulseAnim,
2090
- runClearAllWithAnimation,
2091
-
2092
- // ─── FAB / launcher ─────────────────────────────────────────────────
2093
- useNativeFab,
2094
- fabPan,
2095
- fabPanResponder,
2096
- fabDraggedRef,
2097
- pulseAnim,
2098
- fabShineAnim,
2099
-
2100
- // ─── Network (APIs) ─────────────────────────────────────────────────
2101
- logs,
2102
- filteredLogs,
2103
- groupedData,
2104
- search,
2105
- setSearch,
2106
- searchScope,
2107
- setSearchScope,
2108
- isRegexSearch,
2109
- setIsRegexSearch,
2110
- isCaseSensitive,
2111
- setIsCaseSensitive,
2112
- quickFilter,
2113
- setQuickFilter,
2114
- statusFilters,
2115
- setStatusFilters,
2116
- methodFilters,
2117
- setMethodFilters,
2118
- availableMethods,
2119
- sortOrder,
2120
- setSortOrder,
2121
- selectedLogs,
2122
- toggleSelect,
2123
- minStart,
2124
- totalRange,
2125
- newLogIds,
2126
- toggleSectionFilter,
2127
- toggleSectionCollapse,
2128
- handleDelete,
2129
- isNetworkPaused,
2130
- setIsNetworkPaused,
2131
-
2132
- // ─── Network detail ─────────────────────────────────────────────────
2133
- detailTitle,
2134
- detailDisplayUrl,
2135
- apiDetailActiveTab,
2136
- setApiDetailActiveTab,
2137
- detailSearch,
2138
- setDetailSearch,
2139
- reqExpanded,
2140
- setReqExpanded,
2141
- resExpanded,
2142
- setResExpanded,
2143
- showReqDiff,
2144
- setShowReqDiff,
2145
- showResDiff,
2146
- setShowResDiff,
2147
- prevRequestData,
2148
- prevResponseData,
2149
- logRouteMapRef,
2150
-
2151
- // ─── Console (Logs) ─────────────────────────────────────────────────
2152
- consoleLogs,
2153
- visibleConsoleLogs,
2154
- filteredConsoleLogs,
2155
- logSearch,
2156
- setLogSearch,
2157
- logFilters,
2158
- setLogFilters,
2159
- logCounts,
2160
- logSortOrder,
2161
- setLogSortOrder,
2162
- isConsolePaused,
2163
- setIsConsolePaused,
2164
-
2165
- // ─── Analytics ──────────────────────────────────────────────────────
2166
- analyticsEvents,
2167
- filteredAnalyticsEvents,
2168
- analyticsSearch,
2169
- setAnalyticsSearch,
2170
- analyticsFilters,
2171
- setAnalyticsFilters,
2172
- isAnalyticsFilterApplied,
2173
- resetAnalyticsFilters,
2174
- newEventIds,
2175
- isAnalyticsLayoutReady,
2176
- setIsAnalyticsLayoutReady,
2177
- analyticsHeaderExpanded,
2178
- setAnalyticsHeaderExpanded,
2179
- isAnalyticsPaused,
2180
- setIsAnalyticsPaused,
2181
-
2182
- // ─── Redux ──────────────────────────────────────────────────────────
2183
- reduxState,
2184
- setReduxState,
2185
- reduxLastActionMap,
2186
- reduxSearch,
2187
- setReduxSearch,
2188
- selectedReduxSlice,
2189
- setSelectedReduxSlice,
2190
- selectedReduxAction,
2191
- setSelectedReduxAction,
2192
- reduxActiveSubTab,
2193
- setReduxActiveSubTab,
2194
-
2195
- // ─── Crash ───────────────────────────────────────────────────────────
2196
- crashRecords,
2197
- setCrashRecords,
2198
- selectedCrash,
2199
- setSelectedCrash,
2200
- lastReadCrashesCount,
2201
- maxCrashLogs,
2202
- setMaxCrashLogs,
2203
- clearAllCrashes: () => {
2204
- clearCrashRecords();
2205
- setCrashRecords([]);
2206
- setSelectedCrash(null);
2207
- },
2208
-
2209
- // ─── Settings ───────────────────────────────────────────────────────
2210
- settingsActiveSubTab,
2211
- setSettingsActiveSubTab,
2212
- defaultTab,
2213
- setDefaultTab,
2214
- isDark,
2215
- setIsDark,
2216
- showDuplicateLogs,
2217
- setShowDuplicateLogs,
2218
- showUpdateToast,
2219
- setShowUpdateToast,
2220
- showConsoleLevels,
2221
- setShowConsoleLevels,
2222
- resetToDefaults,
2223
- storage,
2224
- maxNetworkLogs,
2225
- setMaxNetworkLogs,
2226
- maxConsoleLogs,
2227
- setMaxConsoleLogs,
2228
- maxAnalyticsEventsLimit,
2229
- setMaxAnalyticsEventsLimit,
2230
- isAutoRamLimitEnabled,
2231
- setIsAutoRamLimitEnabled,
2232
- deviceFreeRamMb,
2233
- reduxAutoRefresh,
2234
- setReduxAutoRefreshState,
2235
- reduxExpandDepth,
2236
- setReduxExpandDepth,
2237
- }),
2238
- [
2239
- visible,
2240
- closeModal,
2241
- isReady,
2242
- enabled,
2243
- appIcon,
2244
- environment,
2245
- modalHeightPercent,
2246
- modalAnimationType,
2247
- hasNavigationContext,
2248
- setNavState,
2249
- activeTab,
2250
- switchActiveTab,
2251
- tabVisibility,
2252
- toggleTabVisibility,
2253
- lastReadApisCount,
2254
- lastReadLogsCount,
2255
- selected,
2256
- selectedEvent,
2257
- selectedLog,
2258
- showHeaderInfo,
2259
- settingsPage,
2260
- isFeedbackOpen,
2261
- updateAvailable,
2262
- latestNpmVersion,
2263
- clearAnim,
2264
- activePulseAnim,
2265
- unreadPulseAnim,
2266
- runClearAllWithAnimation,
2267
- useNativeFab,
2268
- fabPan,
2269
- fabPanResponder,
2270
- pulseAnim,
2271
- fabShineAnim,
2272
- logs,
2273
- filteredLogs,
2274
- groupedData,
2275
- search,
2276
- searchScope,
2277
- isRegexSearch,
2278
- isCaseSensitive,
2279
- quickFilter,
2280
- statusFilters,
2281
- methodFilters,
2282
- availableMethods,
2283
- sortOrder,
2284
- selectedLogs,
2285
- toggleSelect,
2286
- minStart,
2287
- totalRange,
2288
- newLogIds,
2289
- toggleSectionFilter,
2290
- toggleSectionCollapse,
2291
- handleDelete,
2292
- isNetworkPaused,
2293
- detailTitle,
2294
- detailDisplayUrl,
2295
- apiDetailActiveTab,
2296
- detailSearch,
2297
- reqExpanded,
2298
- resExpanded,
2299
- showReqDiff,
2300
- showResDiff,
2301
- prevRequestData,
2302
- prevResponseData,
2303
- consoleLogs,
2304
- visibleConsoleLogs,
2305
- filteredConsoleLogs,
2306
- logSearch,
2307
- logFilters,
2308
- logCounts,
2309
- logSortOrder,
2310
- isConsolePaused,
2311
- analyticsEvents,
2312
- filteredAnalyticsEvents,
2313
- analyticsSearch,
2314
- analyticsFilters,
2315
- isAnalyticsFilterApplied,
2316
- resetAnalyticsFilters,
2317
- newEventIds,
2318
- isAnalyticsLayoutReady,
2319
- analyticsHeaderExpanded,
2320
- isAnalyticsPaused,
2321
- reduxState,
2322
- reduxLastActionMap,
2323
- reduxSearch,
2324
- selectedReduxSlice,
2325
- selectedReduxAction,
2326
- reduxActiveSubTab,
2327
- crashRecords,
2328
- selectedCrash,
2329
- lastReadCrashesCount,
2330
- maxCrashLogs,
2331
- settingsActiveSubTab,
2332
- defaultTab,
2333
- isDark,
2334
- showDuplicateLogs,
2335
- showUpdateToast,
2336
- showConsoleLevels,
2337
- storage,
2338
- maxNetworkLogs,
2339
- maxConsoleLogs,
2340
- maxAnalyticsEventsLimit,
2341
- isAutoRamLimitEnabled,
2342
- deviceFreeRamMb,
2343
- reduxAutoRefresh,
2344
- reduxExpandDepth,
2345
- ],
2346
- );
2347
-
2348
- return (
2349
- <InspectorContext.Provider value={contextValue}>
2350
- <MainScreen />
2351
- </InspectorContext.Provider>
2352
- );
2353
- };
2354
-
2355
- const NetworkInspectorWrapper = (props: NetworkInspectorProps) => {
2356
- const enabled = props?.enabled ?? true;
2357
- const telemetry = props?.telemetry ?? true;
2358
-
2359
- useEffect(() => {
2360
- if (!enabled) {
2361
- // When inspector is disabled: hide FAB and kill all telemetry
2362
- hideNativeFloatingButton().catch(() => {});
2363
- setTelemetryEnabled(false);
2364
- } else if (telemetry) {
2365
- // Inspector is enabled and telemetry is on — fire heartbeat
2366
- trackActiveTelemetryHeartbeat(true, props?.environment);
2367
- } else {
2368
- // Inspector is enabled but telemetry is explicitly off
2369
- setTelemetryEnabled(false);
2370
- }
2371
- return () => {
2372
- hideNativeFloatingButton().catch(() => {});
2373
- };
2374
- }, [enabled, telemetry, props?.environment]);
2375
-
2376
- // If enabled is false, return null immediately with 0 overhead
2377
- if (!enabled) {
2378
- return null;
2379
- }
2380
-
2381
- return (
2382
- <I18nextProvider i18n={i18n}>
2383
- <ErrorBoundary fallbackType="inline">
2384
- <NetworkInspector
2385
- {...props}
2386
- enabled={enabled}
2387
- />
2388
- </ErrorBoundary>
2389
- </I18nextProvider>
2390
- );
2391
- };
2392
-
2393
- export default NetworkInspectorWrapper;
2394
-
2395
- // Re-export public APIs
2396
- export {
2397
- setupNetworkLogger,
2398
- clearNetworkLogs,
2399
- subscribeNetworkLogs,
2400
- addAxiosInterceptors,
2401
- } from './customHooks/networkLogger';
2402
-
2403
- export {
2404
- setupConsoleLogger,
2405
- clearConsoleLogs,
2406
- subscribeConsoleLogs,
2407
- } from './customHooks/consoleLogger';
2408
-
2409
- export {
2410
- setupAnalyticsLogger,
2411
- logAnalyticsEvent,
2412
- subscribeAnalyticsEvents,
2413
- clearAnalyticsEvents,
2414
- getCurrentUserProperties,
2415
- getCurrentUserId,
2416
- getDefaultEventParameters,
2417
- getCollectionEnabled,
2418
- } from './customHooks/analyticsLogger';
2419
-
2420
- export {
2421
- setupGlobalCrashHandler,
2422
- subscribeCrashEvents,
2423
- emitCrashEvent,
2424
- getCrashRecords,
2425
- clearCrashRecords,
2426
- simulateTestCrash,
2427
- exportCrashReport,
2428
- parseCrashStackTrace,
2429
- recordCustomCrash,
2430
- addCrashBreadcrumb,
2431
- recordNavigationBreadcrumb,
2432
- recordNetworkBreadcrumb,
2433
- recordReduxBreadcrumb,
2434
- recordUserActionBreadcrumb,
2435
- computeCrashFingerprint,
2436
- type CrashEventPayload,
2437
- } from './customHooks/crashHandler';
2438
-
2439
- export {default as CrashTab} from './components/Inspector/CrashTab';
2440
- export {default as ErrorBoundary} from './components/ErrorBoundary';
2441
-
2442
- export {
2443
- connectReduxStore,
2444
- inspectorReduxMiddleware,
2445
- getReduxState,
2446
- subscribeReduxState,
2447
- getActionHistory,
2448
- clearActionHistory,
2449
- getLastActionForReducer,
2450
- } from './customHooks/reduxLogger';
2451
-
2452
- export {
2453
- getEventCategory,
2454
- registerGAPlugin,
2455
- type GAPlugin,
2456
- } from './helpers/gaAnalyticsRegistry';
2457
-
2458
- export {
2459
- usePerformanceTracker,
2460
- useComponentProfiler,
2461
- useNavigationProfiler,
2462
- trackComponentRender,
2463
- trackNavigationTransition,
2464
- trackHeavyTask,
2465
- measureAsync,
2466
- getHermesMemoryStats,
2467
- registerComponentProfile,
2468
- subscribeRenderProfiles,
2469
- getRenderProfiles,
2470
- logPerformanceEvent,
2471
- clearPerformanceEvents,
2472
- subscribePerformanceEvents,
2473
- getPerformanceEvents,
2474
- getInitialRenderProfiles,
2475
- getInitialPerformanceEvents,
2476
- generateFixSnippet,
2477
- } from './customHooks/performanceTracker';
2478
-
2479
- export {
2480
- InspectLog,
2481
- InspectTrackTime,
2482
- InspectCatch,
2483
- type InspectLogOptions,
2484
- } from './decorators';
2485
-
2486
- export {
2487
- getNativeDeviceMetrics,
2488
- enableNativeCrashProtection,
2489
- subscribeNativeCrashes,
2490
- showNativeFloatingButton,
2491
- hideNativeFloatingButton,
2492
- setNativeFloatingButtonBadge,
2493
- subscribeNativeFloatingButtonPress,
2494
- subscribeNativeDeviceShake,
2495
- startNativeFpsMonitoring,
2496
- stopNativeFpsMonitoring,
2497
- getNativeFpsMetrics,
2498
- getNativeStorageItem,
2499
- setNativeStorageItem,
2500
- isNativeModuleAvailable,
2501
- type NativeDeviceMetrics,
2502
- type NativeCrashEvent,
2503
- type FloatingButtonOptions,
2504
- type NativeFpsMetrics,
2505
- } from './native/NativeInspector';
2506
-
2507
- export {
2508
- setupMemoryWarningHandler,
2509
- pruneAllLogs,
2510
- subscribeMemoryWarning,
2511
- type MemoryPruneSummary,
2512
- } from './helpers';
2513
-
2514
- export {
2515
- setMaxNetworkLogsLimit,
2516
- getMaxNetworkLogsLimit,
2517
- pruneNetworkLogs,
2518
- } from './customHooks/networkLogger';
2519
-
2520
- export {
2521
- setMaxConsoleLogsLimit,
2522
- getMaxConsoleLogsLimit,
2523
- pruneConsoleLogs,
2524
- } from './customHooks/consoleLogger';
2525
-
2526
- export {
2527
- setMaxReduxHistoryLimit,
2528
- getMaxReduxHistoryLimit,
2529
- pruneReduxHistory,
2530
- } from './customHooks/reduxLogger';
2531
-
2532
- export {
2533
- setMaxAnalyticsLogsLimit,
2534
- getMaxAnalyticsLogsLimit,
2535
- pruneAnalyticsLogs,
2536
- } from './customHooks/analyticsLogger';
2537
-
2538
- export {
2539
- getMaxCrashLogsLimit,
2540
- pruneCrashRecords,
2541
- } from './customHooks/crashHandler';
2542
-
2543
- export {
2544
- setMaxPerformanceEventsLimit,
2545
- getMaxPerformanceEventsLimit,
2546
- prunePerformanceEvents,
2547
- } from './customHooks/performanceTracker';
2548
-
2549
- export {
2550
- BrandSquareIcon,
2551
- BrandCircleIcon,
2552
- } from './components/NetworkIcons';
2553
-
2554
- export {
2555
- connectAsyncStorage,
2556
- connectMMKV,
2557
- isAsyncStorageConnected,
2558
- isMMKVConnected,
2559
- getRegisteredMMKVInstanceIds,
2560
- fetchStorageEntries,
2561
- setStorageEntry,
2562
- removeStorageEntry,
2563
- clearStorageDriver,
2564
- subscribeToStorageChanges,
2565
- type StorageEntry,
2566
- type StorageDriver,
2567
- } from './customHooks/storageInspector';
2568
-
2569
- export {
2570
- ActiveTab,
2571
- Method,
2572
- StatusFilter,
2573
- SortOrder,
2574
- LocalFilter,
2575
- ModalAnimationType,
2576
- SettingsPage,
2577
- SettingsSubTab,
2578
- LogFilter,
2579
- ConsoleLogType,
2580
- AnalyticsEventSource,
2581
- GAEventCategory,
2582
- StackFrameType,
2583
- DiffResultType,
2584
- BundleSubTab,
2585
- PerformanceSubTab,
2586
- CrashType,
2587
- CrashExportFormat,
2588
- CrashDetailSubTab,
2589
- CrashFilterType,
2590
- BreadcrumbType,
2591
- } from './types';
2592
-
2593
- export {
2594
- AppFonts,
2595
- setAppFonts,
2596
- type AppFontConfig,
2597
- } from './styles/AppFonts';
2598
-
2599
- export {
2600
- AppColors,
2601
- setAppColors,
2602
- getThemeColors,
2603
- updateAppColorsTheme,
2604
- } from './styles/AppColors';
2605
-
2606
- export {
2607
- t,
2608
- i18n,
2609
- useTranslation,
2610
- setLanguage,
2611
- addTranslations,
2612
- setTranslations,
2613
- I18nextProvider,
2614
- } from './i18n';
2615
-
2616
- export {
2617
- fetchRemoteConfigModuleStatus,
2618
- isFirebaseRemoteConfigAvailable,
2619
- } from './helpers/remoteConfig';
2620
-
2621
- export {
2622
- ScreenCapture,
2623
- ScreenRecorder,
2624
- type ScreenshotOptions,
2625
- type ScreenshotResult,
2626
- type RecordingOptions,
2627
- type RecordingResult,
2628
- type GifConversionOptions,
2629
- type CapturedMediaItem,
2630
- type ImageFormat,
2631
- type AudioSource,
2632
- type RecordingFormat,
2633
- } from './capture';
2634
-
2635
- export { LIB_VERSION } from './constants/version';