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.
- package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt +57 -0
- package/dist/commonjs/analytics.js +1 -24
- package/dist/commonjs/bundle.js +1 -16
- package/dist/commonjs/capture.d.ts +2 -0
- package/dist/commonjs/capture.js +1 -32
- package/dist/commonjs/components/AnalyticsDetail.js +92 -623
- package/dist/commonjs/components/AnalyticsEventCard.js +54 -350
- package/dist/commonjs/components/AnalyticsGraph.js +70 -370
- package/dist/commonjs/components/AnimatedEntrance.js +1 -11
- package/dist/commonjs/components/AppHeaderLogo.js +7 -134
- package/dist/commonjs/components/BrandCircleIcon.js +73 -118
- package/dist/commonjs/components/BrandSquareIcon.js +63 -108
- package/dist/commonjs/components/CodeSnippet.js +48 -623
- package/dist/commonjs/components/ConsoleLogCard.js +63 -537
- package/dist/commonjs/components/CopyButton.js +3 -89
- package/dist/commonjs/components/DiffViewer.js +19 -83
- package/dist/commonjs/components/DomainHeader.js +27 -127
- package/dist/commonjs/components/EmptyState.d.ts +1 -0
- package/dist/commonjs/components/EmptyState.js +10 -87
- package/dist/commonjs/components/EndOfListFooter.js +7 -81
- package/dist/commonjs/components/ErrorBoundary.js +72 -566
- package/dist/commonjs/components/HeadersSection.js +31 -110
- package/dist/commonjs/components/HighlightText.js +17 -58
- package/dist/commonjs/components/Inspector/AboutModal.d.ts +6 -0
- package/dist/commonjs/components/Inspector/AboutModal.js +351 -0
- package/dist/commonjs/components/Inspector/AnalyticsFilterModal.js +98 -797
- package/dist/commonjs/components/Inspector/AnalyticsTab.js +284 -930
- package/dist/commonjs/components/Inspector/BundleTab.js +551 -2918
- package/dist/commonjs/components/Inspector/ConsoleTab.js +79 -492
- package/dist/commonjs/components/Inspector/CrashDetail.js +123 -672
- package/dist/commonjs/components/Inspector/CrashFilterModal.js +66 -498
- package/dist/commonjs/components/Inspector/CrashTab.js +98 -670
- package/dist/commonjs/components/Inspector/DebuggingTab.js +64 -871
- package/dist/commonjs/components/Inspector/DeviceInfoTab.js +143 -907
- package/dist/commonjs/components/Inspector/FabLauncher.js +85 -54
- package/dist/commonjs/components/Inspector/FeatureUnderDevNotice.js +6 -99
- package/dist/commonjs/components/Inspector/FeedbackModal.d.ts +9 -0
- package/dist/commonjs/components/Inspector/FeedbackModal.js +167 -521
- package/dist/commonjs/components/Inspector/InspectorContext.js +1 -21
- package/dist/commonjs/components/Inspector/InspectorHeader.js +219 -1093
- package/dist/commonjs/components/Inspector/LogDetail.js +168 -994
- package/dist/commonjs/components/Inspector/MainScreen.js +60 -332
- package/dist/commonjs/components/Inspector/MediaGalleryTab.js +136 -278
- package/dist/commonjs/components/Inspector/MediaPreviewModal.js +134 -361
- package/dist/commonjs/components/Inspector/NavigationTracker.js +1 -12
- package/dist/commonjs/components/Inspector/NetworkDetail.js +96 -432
- package/dist/commonjs/components/Inspector/NetworkFilterModal.js +60 -576
- package/dist/commonjs/components/Inspector/NetworkTab.js +84 -514
- package/dist/commonjs/components/Inspector/NpmStarPrompt.js +17 -433
- package/dist/commonjs/components/Inspector/NpmUpdateToast.js +25 -298
- package/dist/commonjs/components/Inspector/PerformanceTab.js +182 -1397
- package/dist/commonjs/components/Inspector/ReduxDetail.js +188 -1089
- package/dist/commonjs/components/Inspector/ReduxTab.js +85 -701
- package/dist/commonjs/components/Inspector/SettingsPanel.js +431 -3431
- package/dist/commonjs/components/Inspector/SkeletonPlaceholder.js +11 -180
- package/dist/commonjs/components/Inspector/StorageTab.js +93 -826
- package/dist/commonjs/components/Inspector/TabBar.js +47 -183
- package/dist/commonjs/components/Inspector/UpdateAvailableModal.js +34 -408
- package/dist/commonjs/components/JsonViewer.js +168 -380
- package/dist/commonjs/components/LogCard.js +57 -567
- package/dist/commonjs/components/LogSyntaxHighlighter.js +11 -130
- package/dist/commonjs/components/MetaAccordion.js +69 -238
- package/dist/commonjs/components/MiniBarChart.js +3 -56
- package/dist/commonjs/components/MiniLineChart.js +3 -58
- package/dist/commonjs/components/NetworkIcons.d.ts +7 -0
- package/dist/commonjs/components/NetworkIcons.js +479 -997
- package/dist/commonjs/components/QRCodeView.js +5 -79
- package/dist/commonjs/components/SectionHeader.js +15 -37
- package/dist/commonjs/components/SegmentedTabs.js +7 -61
- package/dist/commonjs/components/SkeletonPlaceholder.js +11 -180
- package/dist/commonjs/components/Slider.js +15 -243
- package/dist/commonjs/components/SourcePageCard.js +30 -89
- package/dist/commonjs/components/Toast.js +5 -147
- package/dist/commonjs/components/TouchableScale.js +3 -24
- package/dist/commonjs/components/TreeNode.js +55 -130
- package/dist/commonjs/console.js +1 -16
- package/dist/commonjs/constants/index.js +1 -32
- package/dist/commonjs/constants/telemetryConfig.js +1 -6
- package/dist/commonjs/constants/version.d.ts +1 -1
- package/dist/commonjs/constants/version.js +1 -4
- package/dist/commonjs/crash.js +1 -23
- package/dist/commonjs/customHooks/analyticsLogger.js +1 -250
- package/dist/commonjs/customHooks/bundleAnalyzer.js +1 -957
- package/dist/commonjs/customHooks/consoleLogger.js +6 -445
- package/dist/commonjs/customHooks/crashHandler.js +7 -656
- package/dist/commonjs/customHooks/logFilters.js +1 -23
- package/dist/commonjs/customHooks/networkLogger.js +2 -536
- package/dist/commonjs/customHooks/performanceTracker.js +63 -750
- package/dist/commonjs/customHooks/reduxLogger.js +2 -313
- package/dist/commonjs/customHooks/storageInspector.js +1 -435
- package/dist/commonjs/customHooks/useAccordion.js +1 -18
- package/dist/commonjs/decorators/index.js +1 -100
- package/dist/commonjs/helpers/gaAnalyticsRegistry.js +1 -148
- package/dist/commonjs/helpers/index.js +8 -921
- package/dist/commonjs/helpers/memoryManager.js +1 -99
- package/dist/commonjs/helpers/qrGenerator.js +1 -367
- package/dist/commonjs/helpers/remoteConfig.js +1 -165
- package/dist/commonjs/helpers/searchQueryParser.js +1 -62
- package/dist/commonjs/helpers/settingsStore.js +1 -144
- package/dist/commonjs/helpers/telemetry.js +1 -501
- package/dist/commonjs/helpers/toast.js +1 -20
- package/dist/commonjs/i18n/index.js +1 -90
- package/dist/commonjs/i18n/locales/en.json +1 -1122
- package/dist/commonjs/index.js +5 -2153
- package/dist/commonjs/metro.js +6 -468
- package/dist/commonjs/native/NativeInspector.d.ts +3 -0
- package/dist/commonjs/native/NativeInspector.js +1 -402
- package/dist/commonjs/native/NativeNetworkInspector.d.ts +1 -0
- package/dist/commonjs/native/NativeNetworkInspector.js +1 -4
- package/dist/commonjs/network.js +1 -13
- package/dist/commonjs/performance.js +1 -29
- package/dist/commonjs/redux.js +1 -20
- package/dist/commonjs/storage.js +1 -14
- package/dist/commonjs/styles/AppColors.js +1 -423
- package/dist/commonjs/styles/AppFonts.js +1 -17
- package/dist/commonjs/styles/common.js +1 -190
- package/dist/commonjs/styles/index.d.ts +6 -0
- package/dist/commonjs/styles/index.js +1 -1589
- package/dist/commonjs/types/enums.d.ts +2 -1
- package/dist/commonjs/types/enums.js +1 -150
- package/dist/commonjs/types/index.js +1 -18
- package/dist/commonjs/types/interfaces.d.ts +7 -0
- package/dist/commonjs/types/interfaces.js +1 -2
- package/dist/esm/analytics.js +1 -2
- package/dist/esm/bundle.js +1 -2
- package/dist/esm/capture.d.ts +2 -0
- package/dist/esm/capture.js +1 -29
- package/dist/esm/components/AnalyticsDetail.js +171 -664
- package/dist/esm/components/AnalyticsEventCard.js +77 -335
- package/dist/esm/components/AnalyticsGraph.js +95 -357
- package/dist/esm/components/AnimatedEntrance.js +1 -6
- package/dist/esm/components/AppHeaderLogo.js +7 -94
- package/dist/esm/components/BrandCircleIcon.js +114 -119
- package/dist/esm/components/BrandSquareIcon.js +73 -78
- package/dist/esm/components/CodeSnippet.js +58 -595
- package/dist/esm/components/ConsoleLogCard.js +91 -526
- package/dist/esm/components/CopyButton.js +3 -51
- package/dist/esm/components/DiffViewer.js +22 -48
- package/dist/esm/components/DomainHeader.js +43 -138
- package/dist/esm/components/EmptyState.d.ts +1 -0
- package/dist/esm/components/EmptyState.js +17 -56
- package/dist/esm/components/EndOfListFooter.js +15 -83
- package/dist/esm/components/ErrorBoundary.js +125 -582
- package/dist/esm/components/HeadersSection.js +52 -93
- package/dist/esm/components/HighlightText.js +17 -53
- package/dist/esm/components/Inspector/AboutModal.d.ts +6 -0
- package/dist/esm/components/Inspector/AboutModal.js +351 -0
- package/dist/esm/components/Inspector/AnalyticsFilterModal.js +225 -886
- package/dist/esm/components/Inspector/AnalyticsTab.js +296 -904
- package/dist/esm/components/Inspector/BundleTab.js +1175 -3502
- package/dist/esm/components/Inspector/ConsoleTab.js +113 -488
- package/dist/esm/components/Inspector/CrashDetail.js +236 -747
- package/dist/esm/components/Inspector/CrashFilterModal.js +149 -541
- package/dist/esm/components/Inspector/CrashTab.js +177 -711
- package/dist/esm/components/Inspector/DebuggingTab.js +156 -923
- package/dist/esm/components/Inspector/DeviceInfoTab.js +199 -924
- package/dist/esm/components/Inspector/FabLauncher.js +85 -49
- package/dist/esm/components/Inspector/FeatureUnderDevNotice.js +14 -70
- package/dist/esm/components/Inspector/FeedbackModal.d.ts +9 -0
- package/dist/esm/components/Inspector/FeedbackModal.js +182 -499
- package/dist/esm/components/Inspector/InspectorContext.js +1 -12
- package/dist/esm/components/Inspector/InspectorHeader.js +309 -1145
- package/dist/esm/components/Inspector/LogDetail.js +235 -1023
- package/dist/esm/components/Inspector/MainScreen.js +86 -320
- package/dist/esm/components/Inspector/MediaGalleryTab.js +157 -259
- package/dist/esm/components/Inspector/MediaPreviewModal.js +153 -340
- package/dist/esm/components/Inspector/NavigationTracker.js +1 -10
- package/dist/esm/components/Inspector/NetworkDetail.js +141 -472
- package/dist/esm/components/Inspector/NetworkFilterModal.js +122 -597
- package/dist/esm/components/Inspector/NetworkTab.js +125 -517
- package/dist/esm/components/Inspector/NpmStarPrompt.js +58 -434
- package/dist/esm/components/Inspector/NpmUpdateToast.js +45 -281
- package/dist/esm/components/Inspector/PerformanceTab.js +393 -1570
- package/dist/esm/components/Inspector/ReduxDetail.js +307 -1170
- package/dist/esm/components/Inspector/ReduxTab.js +144 -722
- package/dist/esm/components/Inspector/SettingsPanel.js +647 -3609
- package/dist/esm/components/Inspector/SkeletonPlaceholder.js +30 -163
- package/dist/esm/components/Inspector/StorageTab.js +172 -866
- package/dist/esm/components/Inspector/TabBar.js +52 -183
- package/dist/esm/components/Inspector/UpdateAvailableModal.js +79 -416
- package/dist/esm/components/JsonViewer.js +179 -353
- package/dist/esm/components/LogCard.js +93 -565
- package/dist/esm/components/LogSyntaxHighlighter.js +11 -123
- package/dist/esm/components/MetaAccordion.js +136 -267
- package/dist/esm/components/MiniBarChart.js +3 -18
- package/dist/esm/components/MiniLineChart.js +3 -20
- package/dist/esm/components/NetworkIcons.d.ts +7 -0
- package/dist/esm/components/NetworkIcons.js +481 -817
- package/dist/esm/components/QRCodeView.js +8 -45
- package/dist/esm/components/SectionHeader.js +22 -39
- package/dist/esm/components/SegmentedTabs.js +8 -57
- package/dist/esm/components/SkeletonPlaceholder.js +30 -163
- package/dist/esm/components/Slider.js +24 -213
- package/dist/esm/components/SourcePageCard.js +65 -86
- package/dist/esm/components/Toast.js +10 -117
- package/dist/esm/components/TouchableScale.js +3 -19
- package/dist/esm/components/TreeNode.js +58 -95
- package/dist/esm/console.js +1 -2
- package/dist/esm/constants/index.js +1 -28
- package/dist/esm/constants/telemetryConfig.js +1 -3
- package/dist/esm/constants/version.d.ts +1 -1
- package/dist/esm/constants/version.js +1 -1
- package/dist/esm/crash.js +1 -2
- package/dist/esm/customHooks/analyticsLogger.js +1 -230
- package/dist/esm/customHooks/bundleAnalyzer.js +1 -944
- package/dist/esm/customHooks/consoleLogger.js +6 -432
- package/dist/esm/customHooks/crashHandler.js +7 -630
- package/dist/esm/customHooks/logFilters.js +1 -20
- package/dist/esm/customHooks/networkLogger.js +2 -519
- package/dist/esm/customHooks/performanceTracker.js +63 -723
- package/dist/esm/customHooks/reduxLogger.js +2 -293
- package/dist/esm/customHooks/storageInspector.js +1 -418
- package/dist/esm/customHooks/useAccordion.js +1 -16
- package/dist/esm/decorators/index.js +1 -95
- package/dist/esm/helpers/gaAnalyticsRegistry.js +1 -143
- package/dist/esm/helpers/index.js +8 -861
- package/dist/esm/helpers/memoryManager.js +1 -91
- package/dist/esm/helpers/qrGenerator.js +1 -364
- package/dist/esm/helpers/remoteConfig.js +1 -160
- package/dist/esm/helpers/searchQueryParser.js +1 -59
- package/dist/esm/helpers/settingsStore.js +1 -134
- package/dist/esm/helpers/telemetry.js +1 -489
- package/dist/esm/helpers/toast.js +1 -15
- package/dist/esm/i18n/index.js +1 -78
- package/dist/esm/i18n/locales/en.json +1 -1122
- package/dist/esm/index.js +7 -1967
- package/dist/esm/metro.js +6 -459
- package/dist/esm/native/NativeInspector.d.ts +3 -0
- package/dist/esm/native/NativeInspector.js +1 -370
- package/dist/esm/native/NativeNetworkInspector.d.ts +1 -0
- package/dist/esm/native/NativeNetworkInspector.js +1 -2
- package/dist/esm/network.js +1 -1
- package/dist/esm/performance.js +1 -2
- package/dist/esm/redux.js +1 -1
- package/dist/esm/storage.js +1 -1
- package/dist/esm/styles/AppColors.js +1 -417
- package/dist/esm/styles/AppFonts.js +1 -13
- package/dist/esm/styles/common.js +1 -186
- package/dist/esm/styles/index.d.ts +6 -0
- package/dist/esm/styles/index.js +1 -1551
- package/dist/esm/types/enums.d.ts +2 -1
- package/dist/esm/types/enums.js +1 -147
- package/dist/esm/types/index.js +1 -2
- package/dist/esm/types/interfaces.d.ts +7 -0
- package/dist/esm/types/interfaces.js +1 -1
- package/ios/NetworkInspectorModule.mm +253 -136
- package/package.json +5 -3
- package/react-native-inapp-inspector.podspec +1 -1
- package/src/native/NativeInspector.ts +17 -0
- package/src/native/NativeNetworkInspector.ts +1 -0
- package/src/analytics.ts +0 -35
- package/src/bundle.ts +0 -25
- package/src/capture.ts +0 -101
- package/src/components/AnalyticsDetail.tsx +0 -870
- package/src/components/AnalyticsEventCard.tsx +0 -444
- package/src/components/AnalyticsGraph.tsx +0 -583
- package/src/components/AnimatedEntrance.tsx +0 -20
- package/src/components/AppHeaderLogo.tsx +0 -143
- package/src/components/BrandCircleIcon.tsx +0 -144
- package/src/components/BrandSquareIcon.tsx +0 -184
- package/src/components/CodeSnippet.tsx +0 -725
- package/src/components/ConsoleLogCard.tsx +0 -679
- package/src/components/CopyButton.tsx +0 -87
- package/src/components/DiffViewer.tsx +0 -82
- package/src/components/DomainHeader.tsx +0 -224
- package/src/components/EmptyState.tsx +0 -95
- package/src/components/EndOfListFooter.tsx +0 -100
- package/src/components/ErrorBoundary.tsx +0 -688
- package/src/components/HeadersSection.tsx +0 -172
- package/src/components/HighlightText.tsx +0 -100
- package/src/components/Inspector/AnalyticsFilterModal.tsx +0 -1250
- package/src/components/Inspector/AnalyticsTab.tsx +0 -1362
- package/src/components/Inspector/BundleTab.tsx +0 -4768
- package/src/components/Inspector/ConsoleTab.tsx +0 -726
- package/src/components/Inspector/CrashDetail.tsx +0 -997
- package/src/components/Inspector/CrashFilterModal.tsx +0 -721
- package/src/components/Inspector/CrashTab.tsx +0 -933
- package/src/components/Inspector/DebuggingTab.tsx +0 -1103
- package/src/components/Inspector/DeviceInfoTab.tsx +0 -1397
- package/src/components/Inspector/FabLauncher.tsx +0 -80
- package/src/components/Inspector/FeatureUnderDevNotice.tsx +0 -94
- package/src/components/Inspector/FeedbackModal.tsx +0 -626
- package/src/components/Inspector/InspectorContext.tsx +0 -28
- package/src/components/Inspector/InspectorHeader.tsx +0 -1545
- package/src/components/Inspector/LogDetail.tsx +0 -1431
- package/src/components/Inspector/MainScreen.tsx +0 -459
- package/src/components/Inspector/MediaGalleryTab.tsx +0 -355
- package/src/components/Inspector/MediaPreviewModal.tsx +0 -435
- package/src/components/Inspector/NavigationTracker.tsx +0 -13
- package/src/components/Inspector/NetworkDetail.tsx +0 -795
- package/src/components/Inspector/NetworkFilterModal.tsx +0 -730
- package/src/components/Inspector/NetworkTab.tsx +0 -820
- package/src/components/Inspector/NpmStarPrompt.tsx +0 -532
- package/src/components/Inspector/NpmUpdateToast.tsx +0 -387
- package/src/components/Inspector/PerformanceTab.tsx +0 -1967
- package/src/components/Inspector/ReduxDetail.tsx +0 -1651
- package/src/components/Inspector/ReduxTab.tsx +0 -987
- package/src/components/Inspector/SettingsPanel.tsx +0 -4580
- package/src/components/Inspector/SkeletonPlaceholder.tsx +0 -206
- package/src/components/Inspector/StorageTab.tsx +0 -1159
- package/src/components/Inspector/TabBar.tsx +0 -263
- package/src/components/Inspector/UpdateAvailableModal.tsx +0 -555
- package/src/components/JsonViewer.tsx +0 -547
- package/src/components/LogCard.tsx +0 -694
- package/src/components/LogSyntaxHighlighter.tsx +0 -178
- package/src/components/MetaAccordion.tsx +0 -355
- package/src/components/MiniBarChart.tsx +0 -42
- package/src/components/MiniLineChart.tsx +0 -33
- package/src/components/NetworkIcons.tsx +0 -2599
- package/src/components/QRCodeView.tsx +0 -75
- package/src/components/SectionHeader.tsx +0 -101
- package/src/components/SegmentedTabs.tsx +0 -83
- package/src/components/SkeletonPlaceholder.tsx +0 -206
- package/src/components/Slider.tsx +0 -300
- package/src/components/SourcePageCard.tsx +0 -150
- package/src/components/Toast.tsx +0 -131
- package/src/components/TouchableScale.tsx +0 -61
- package/src/components/TreeNode.tsx +0 -171
- package/src/console.ts +0 -24
- package/src/constants/index.ts +0 -41
- package/src/constants/telemetryConfig.ts +0 -4
- package/src/constants/version.ts +0 -3
- package/src/crash.ts +0 -32
- package/src/customHooks/analyticsLogger.ts +0 -336
- package/src/customHooks/bundleAnalyzer.ts +0 -1256
- package/src/customHooks/consoleLogger.ts +0 -530
- package/src/customHooks/crashHandler.ts +0 -944
- package/src/customHooks/logFilters.ts +0 -32
- package/src/customHooks/networkLogger.ts +0 -624
- package/src/customHooks/performanceTracker.ts +0 -1014
- package/src/customHooks/reduxLogger.ts +0 -406
- package/src/customHooks/storageInspector.ts +0 -513
- package/src/customHooks/useAccordion.tsx +0 -27
- package/src/decorators/index.ts +0 -184
- package/src/helpers/gaAnalyticsRegistry.ts +0 -204
- package/src/helpers/index.ts +0 -1092
- package/src/helpers/memoryManager.ts +0 -138
- package/src/helpers/qrGenerator.ts +0 -430
- package/src/helpers/remoteConfig.ts +0 -212
- package/src/helpers/searchQueryParser.ts +0 -84
- package/src/helpers/settingsStore.ts +0 -171
- package/src/helpers/telemetry.ts +0 -568
- package/src/helpers/toast.ts +0 -17
- package/src/i18n/index.ts +0 -104
- package/src/i18n/locales/en.json +0 -1125
- package/src/index.tsx +0 -2635
- package/src/metro.ts +0 -598
- package/src/network.ts +0 -22
- package/src/performance.ts +0 -38
- package/src/redux.ts +0 -23
- package/src/storage.ts +0 -18
- package/src/styles/AppColors.ts +0 -455
- package/src/styles/AppFonts.ts +0 -26
- package/src/styles/common.ts +0 -209
- package/src/styles/index.ts +0 -1606
- package/src/types/enums.ts +0 -208
- package/src/types/index.ts +0 -34
- package/src/types/interfaces.ts +0 -530
|
@@ -1,750 +1,63 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
keyName: 'DebouncedInput',
|
|
64
|
-
title: (0, i18n_1.t)('performance.fixDebouncedInputTitle'),
|
|
65
|
-
explanation: (0, i18n_1.t)('performance.fixDebouncedInputDesc'),
|
|
66
|
-
codeSnippet: `${(0, i18n_1.t)('performance.debounceInput', { comp })}\nconst [localText, setLocalText] = useState('');\nconst debouncedSearch = useMemo(\n () => debounce((query: string) => onSearch(query), 250),\n [onSearch]\n);`,
|
|
67
|
-
impact: (0, i18n_1.t)('performance.highImpact'),
|
|
68
|
-
impactColor: AppColors_1.AppColors.pink500,
|
|
69
|
-
};
|
|
70
|
-
case 'ComponentSplitting':
|
|
71
|
-
return {
|
|
72
|
-
keyName: 'ComponentSplitting',
|
|
73
|
-
title: (0, i18n_1.t)('performance.fixComponentSplittingTitle'),
|
|
74
|
-
explanation: (0, i18n_1.t)('performance.fixComponentSplittingDesc'),
|
|
75
|
-
codeSnippet: `${(0, i18n_1.t)('performance.isolateState', { comp })}\nexport const StickyKeyboard = React.memo(KeyboardStickyView);`,
|
|
76
|
-
impact: (0, i18n_1.t)('performance.mediumImpact'),
|
|
77
|
-
impactColor: AppColors_1.AppColors.purple500,
|
|
78
|
-
};
|
|
79
|
-
case 'InteractionManager':
|
|
80
|
-
return {
|
|
81
|
-
keyName: 'InteractionManager',
|
|
82
|
-
title: (0, i18n_1.t)('performance.fixInteractionManagerTitle'),
|
|
83
|
-
explanation: (0, i18n_1.t)('performance.fixInteractionManagerDesc'),
|
|
84
|
-
codeSnippet: `${(0, i18n_1.t)('performance.beforeInteractionManager', { comp })}\n\n${(0, i18n_1.t)('performance.afterInteractionManager')}`,
|
|
85
|
-
impact: (0, i18n_1.t)('performance.highImpact'),
|
|
86
|
-
impactColor: AppColors_1.AppColors.pink500,
|
|
87
|
-
};
|
|
88
|
-
case 'FlatListWindowing':
|
|
89
|
-
return {
|
|
90
|
-
keyName: 'FlatListWindowing',
|
|
91
|
-
title: (0, i18n_1.t)('performance.fixFlatListWindowingTitle'),
|
|
92
|
-
explanation: (0, i18n_1.t)('performance.fixFlatListWindowingDesc'),
|
|
93
|
-
codeSnippet: `${(0, i18n_1.t)('performance.beforeFlatListWindowing', { comp })}`,
|
|
94
|
-
impact: (0, i18n_1.t)('performance.mediumImpact'),
|
|
95
|
-
impactColor: AppColors_1.AppColors.purple500,
|
|
96
|
-
};
|
|
97
|
-
case 'ImageCaching':
|
|
98
|
-
return {
|
|
99
|
-
keyName: 'ImageCaching',
|
|
100
|
-
title: (0, i18n_1.t)('performance.fixImageCachingTitle'),
|
|
101
|
-
explanation: (0, i18n_1.t)('performance.fixImageCachingDesc'),
|
|
102
|
-
codeSnippet: `${(0, i18n_1.t)('performance.beforeImageCaching', { comp })}`,
|
|
103
|
-
impact: (0, i18n_1.t)('performance.mediumImpact'),
|
|
104
|
-
impactColor: AppColors_1.AppColors.purple500,
|
|
105
|
-
};
|
|
106
|
-
case 'ContextSplitting':
|
|
107
|
-
return {
|
|
108
|
-
keyName: 'ContextSplitting',
|
|
109
|
-
title: (0, i18n_1.t)('performance.fixContextSplittingTitle'),
|
|
110
|
-
explanation: (0, i18n_1.t)('performance.fixContextSplittingDesc'),
|
|
111
|
-
codeSnippet: `${(0, i18n_1.t)('performance.beforeContextSplitting', { comp })}\n\n${(0, i18n_1.t)('performance.afterContextSplitting')}`,
|
|
112
|
-
impact: (0, i18n_1.t)('performance.highImpact'),
|
|
113
|
-
impactColor: AppColors_1.AppColors.pink500,
|
|
114
|
-
};
|
|
115
|
-
case 'InlineStylesHoist':
|
|
116
|
-
return {
|
|
117
|
-
keyName: 'InlineStylesHoist',
|
|
118
|
-
title: (0, i18n_1.t)('performance.fixInlineStylesHoistTitle'),
|
|
119
|
-
explanation: (0, i18n_1.t)('performance.fixInlineStylesHoistDesc'),
|
|
120
|
-
codeSnippet: `${(0, i18n_1.t)('performance.beforeInlineStyles', { comp })}\n\n${(0, i18n_1.t)('performance.afterInlineStyles')}`,
|
|
121
|
-
impact: (0, i18n_1.t)('performance.bestPractice'),
|
|
122
|
-
impactColor: AppColors_1.AppColors.pink500,
|
|
123
|
-
};
|
|
124
|
-
case 'useRef':
|
|
125
|
-
case 'useRefForTracking':
|
|
126
|
-
default:
|
|
127
|
-
return {
|
|
128
|
-
keyName: 'useRefForTracking',
|
|
129
|
-
title: (0, i18n_1.t)('performance.fixUseRefForTrackingTitle'),
|
|
130
|
-
explanation: (0, i18n_1.t)('performance.fixUseRefForTrackingDesc'),
|
|
131
|
-
codeSnippet: `${(0, i18n_1.t)('performance.beforeUseRef', { comp })}\nconst [eventCount, setEventCount] = useState(0);\n\n${(0, i18n_1.t)('performance.afterUseRef')}\nconst eventCountRef = useRef(0);`,
|
|
132
|
-
impact: (0, i18n_1.t)('performance.bestPractice'),
|
|
133
|
-
impactColor: AppColors_1.AppColors.pink500,
|
|
134
|
-
};
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
exports.generateFixSnippet = generateFixSnippet;
|
|
138
|
-
function getCallerSourceFile(fallbackName) {
|
|
139
|
-
try {
|
|
140
|
-
const stack = new Error().stack;
|
|
141
|
-
if (!stack)
|
|
142
|
-
return fallbackName || 'React Native Runtime';
|
|
143
|
-
const lines = stack.split('\n');
|
|
144
|
-
for (let i = 0; i < lines.length; i++) {
|
|
145
|
-
const line = lines[i];
|
|
146
|
-
if (line.includes('performanceTracker') ||
|
|
147
|
-
line.includes('node_modules') ||
|
|
148
|
-
line.includes('Error') ||
|
|
149
|
-
line.includes('regeneratorRuntime')) {
|
|
150
|
-
continue;
|
|
151
|
-
}
|
|
152
|
-
const match = line.match(/(?:at\s+)?(?:.*?\((.*?)(?::\d+)?(?::\d+)?\)|(\S+:\d+:\d+))/);
|
|
153
|
-
if (match) {
|
|
154
|
-
const file = (match[1] || match[2] || '').trim().replace(/^at\s+/, '');
|
|
155
|
-
if (file && !file.includes('performanceTracker'))
|
|
156
|
-
return file;
|
|
157
|
-
}
|
|
158
|
-
const cleaned = line.trim().replace(/^at\s+/, '');
|
|
159
|
-
if (cleaned && !cleaned.includes('performanceTracker'))
|
|
160
|
-
return cleaned;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
catch (e) { }
|
|
164
|
-
return fallbackName || 'React Native Runtime';
|
|
165
|
-
}
|
|
166
|
-
const getInitialRenderProfiles = () => [];
|
|
167
|
-
exports.getInitialRenderProfiles = getInitialRenderProfiles;
|
|
168
|
-
const getInitialPerformanceEvents = () => [];
|
|
169
|
-
exports.getInitialPerformanceEvents = getInitialPerformanceEvents;
|
|
170
|
-
exports.INITIAL_EVENTS = [];
|
|
171
|
-
let isPerformanceModuleEnabled = false;
|
|
172
|
-
const setPerformanceModuleEnabled = (enabled) => {
|
|
173
|
-
isPerformanceModuleEnabled = enabled;
|
|
174
|
-
};
|
|
175
|
-
exports.setPerformanceModuleEnabled = setPerformanceModuleEnabled;
|
|
176
|
-
const getPerformanceModuleEnabled = () => isPerformanceModuleEnabled;
|
|
177
|
-
exports.getPerformanceModuleEnabled = getPerformanceModuleEnabled;
|
|
178
|
-
const globalRenderRegistry = new Map();
|
|
179
|
-
const renderListeners = new Set();
|
|
180
|
-
const notifyRenderListeners = () => {
|
|
181
|
-
const list = Array.from(globalRenderRegistry.values());
|
|
182
|
-
renderListeners.forEach(listener => {
|
|
183
|
-
try {
|
|
184
|
-
listener(list);
|
|
185
|
-
}
|
|
186
|
-
catch { }
|
|
187
|
-
});
|
|
188
|
-
};
|
|
189
|
-
const subscribeRenderProfiles = (listener) => {
|
|
190
|
-
renderListeners.add(listener);
|
|
191
|
-
listener(Array.from(globalRenderRegistry.values()));
|
|
192
|
-
return () => {
|
|
193
|
-
renderListeners.delete(listener);
|
|
194
|
-
};
|
|
195
|
-
};
|
|
196
|
-
exports.subscribeRenderProfiles = subscribeRenderProfiles;
|
|
197
|
-
const getRenderProfiles = () => Array.from(globalRenderRegistry.values());
|
|
198
|
-
exports.getRenderProfiles = getRenderProfiles;
|
|
199
|
-
const registerComponentProfile = (profile) => {
|
|
200
|
-
if (!isPerformanceModuleEnabled)
|
|
201
|
-
return;
|
|
202
|
-
globalRenderRegistry.set(profile.name, profile);
|
|
203
|
-
notifyRenderListeners();
|
|
204
|
-
};
|
|
205
|
-
exports.registerComponentProfile = registerComponentProfile;
|
|
206
|
-
const trackComponentRender = (params) => {
|
|
207
|
-
if (!isPerformanceModuleEnabled)
|
|
208
|
-
return;
|
|
209
|
-
const existing = globalRenderRegistry.get(params.name);
|
|
210
|
-
const now = Date.now();
|
|
211
|
-
const renderTimeMs = params.renderTimeMs ?? 1.5;
|
|
212
|
-
const isWasteful = params.isWasteful ?? false;
|
|
213
|
-
if (existing) {
|
|
214
|
-
const nextCount = existing.renderCount + 1;
|
|
215
|
-
const nextWasteful = existing.wastefulCount + (isWasteful ? 1 : 0);
|
|
216
|
-
const nextPct = Number(((nextWasteful / nextCount) * 100).toFixed(1));
|
|
217
|
-
const nextTotalTime = Number((existing.totalRenderTimeMs + renderTimeMs).toFixed(1));
|
|
218
|
-
const nextAvgTime = Number((nextTotalTime / nextCount).toFixed(1));
|
|
219
|
-
const reasons = params.reason
|
|
220
|
-
? Array.from(new Set([...existing.reasons, params.reason]))
|
|
221
|
-
: existing.reasons;
|
|
222
|
-
const updated = {
|
|
223
|
-
...existing,
|
|
224
|
-
renderCount: nextCount,
|
|
225
|
-
wastefulCount: nextWasteful,
|
|
226
|
-
wastefulPercentage: nextPct,
|
|
227
|
-
avgRenderTimeMs: nextAvgTime,
|
|
228
|
-
totalRenderTimeMs: nextTotalTime,
|
|
229
|
-
lastRenderedAt: now,
|
|
230
|
-
reasons,
|
|
231
|
-
severity: nextPct > 70 && nextCount > 20
|
|
232
|
-
? 'critical'
|
|
233
|
-
: nextPct > 40 && nextCount > 10
|
|
234
|
-
? 'warning'
|
|
235
|
-
: 'optimal',
|
|
236
|
-
};
|
|
237
|
-
globalRenderRegistry.set(params.name, updated);
|
|
238
|
-
}
|
|
239
|
-
else {
|
|
240
|
-
const profile = {
|
|
241
|
-
id: `render-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
|
|
242
|
-
name: params.name,
|
|
243
|
-
type: params.type || 'component',
|
|
244
|
-
sourceFile: params.sourceFile || getCallerSourceFile(params.name),
|
|
245
|
-
renderCount: 1,
|
|
246
|
-
wastefulCount: isWasteful ? 1 : 0,
|
|
247
|
-
wastefulPercentage: isWasteful ? 100 : 0,
|
|
248
|
-
avgRenderTimeMs: renderTimeMs,
|
|
249
|
-
totalRenderTimeMs: renderTimeMs,
|
|
250
|
-
lastRenderedAt: now,
|
|
251
|
-
reasons: params.reason ? [params.reason] : [],
|
|
252
|
-
fixKeys: params.fixKeys || [
|
|
253
|
-
(0, exports.generateFixSnippet)('useCallback', params.name),
|
|
254
|
-
(0, exports.generateFixSnippet)('memo', params.name),
|
|
255
|
-
],
|
|
256
|
-
severity: 'optimal',
|
|
257
|
-
};
|
|
258
|
-
globalRenderRegistry.set(params.name, profile);
|
|
259
|
-
}
|
|
260
|
-
notifyRenderListeners();
|
|
261
|
-
};
|
|
262
|
-
exports.trackComponentRender = trackComponentRender;
|
|
263
|
-
const getHermesMemoryStats = () => {
|
|
264
|
-
try {
|
|
265
|
-
const hermes = globalThis.HermesInternal;
|
|
266
|
-
if (hermes && typeof hermes.getInstrumentedStats === 'function') {
|
|
267
|
-
const stats = hermes.getInstrumentedStats();
|
|
268
|
-
const heapUsedMb = Number(((stats.js_heap_size || stats.heap_size || 34800000) / 1048576).toFixed(1));
|
|
269
|
-
const heapTotalMb = Number(((stats.js_heap_capacity || stats.allocated_bytes || 64000000) /
|
|
270
|
-
1048576).toFixed(1));
|
|
271
|
-
const gcCount = Number(stats.num_gcs || 0);
|
|
272
|
-
const gcPauseMs = Number(((stats.gc_time_ms || 0) / Math.max(1, gcCount)).toFixed(1));
|
|
273
|
-
return {
|
|
274
|
-
heapUsedMb,
|
|
275
|
-
heapTotalMb,
|
|
276
|
-
gcCount,
|
|
277
|
-
gcPauseMs,
|
|
278
|
-
allocationRateMbPerSec: 1.8,
|
|
279
|
-
};
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
catch { }
|
|
283
|
-
return {
|
|
284
|
-
heapUsedMb: 32.5,
|
|
285
|
-
heapTotalMb: 64.0,
|
|
286
|
-
gcCount: 0,
|
|
287
|
-
gcPauseMs: 1.5,
|
|
288
|
-
allocationRateMbPerSec: 1.2,
|
|
289
|
-
};
|
|
290
|
-
};
|
|
291
|
-
exports.getHermesMemoryStats = getHermesMemoryStats;
|
|
292
|
-
const trackNavigationTransition = (screenName, durationMs, options) => {
|
|
293
|
-
const duration = Math.max(1, Number(durationMs.toFixed(1)));
|
|
294
|
-
const tti = options?.ttiMs ? Number(options.ttiMs.toFixed(1)) : duration;
|
|
295
|
-
const droppedFrames = options?.droppedFrames ??
|
|
296
|
-
(duration > 32 ? Math.round((duration - 16.67) / 16.67) : 0);
|
|
297
|
-
const fps = Math.min(60, Math.max(15, Math.round(1000 / Math.max(16.67, duration))));
|
|
298
|
-
return (0, exports.logPerformanceEvent)({
|
|
299
|
-
type: 'transition',
|
|
300
|
-
category: 'navigation',
|
|
301
|
-
fps,
|
|
302
|
-
durationMs: duration,
|
|
303
|
-
droppedFrames,
|
|
304
|
-
frameTimeMs: duration,
|
|
305
|
-
frameBudgetPct: Number(((duration / 16.67) * 100).toFixed(0)),
|
|
306
|
-
bottleneckThread: duration > 32 ? 'JS Thread' : 'Balanced',
|
|
307
|
-
screenName,
|
|
308
|
-
label: (0, i18n_1.t)('performance.transitionEventLabel', { screen: screenName }),
|
|
309
|
-
detail: (0, i18n_1.t)('performance.transitionEventDetail', { duration, tti }),
|
|
310
|
-
source: options?.source || getCallerSourceFile(screenName),
|
|
311
|
-
advice: (0, i18n_1.t)('performance.transitionEventAdvice'),
|
|
312
|
-
severity: duration > 50 ? 'critical' : duration > 25 ? 'warning' : 'optimal',
|
|
313
|
-
});
|
|
314
|
-
};
|
|
315
|
-
exports.trackNavigationTransition = trackNavigationTransition;
|
|
316
|
-
const useNavigationProfiler = (screenName, options) => {
|
|
317
|
-
const mountTimeRef = (0, react_1.useRef)(Date.now());
|
|
318
|
-
(0, react_1.useEffect)(() => {
|
|
319
|
-
const elapsed = Date.now() - mountTimeRef.current;
|
|
320
|
-
(0, exports.trackNavigationTransition)(screenName, elapsed);
|
|
321
|
-
if (options?.onTransitionEnd) {
|
|
322
|
-
options.onTransitionEnd(elapsed);
|
|
323
|
-
}
|
|
324
|
-
}, [screenName]);
|
|
325
|
-
};
|
|
326
|
-
exports.useNavigationProfiler = useNavigationProfiler;
|
|
327
|
-
const trackHeavyTask = (taskName, syncFn, options) => {
|
|
328
|
-
const start = Date.now();
|
|
329
|
-
try {
|
|
330
|
-
return syncFn();
|
|
331
|
-
}
|
|
332
|
-
finally {
|
|
333
|
-
const duration = Date.now() - start;
|
|
334
|
-
const threshold = options?.thresholdMs ?? 16;
|
|
335
|
-
if (duration >= threshold) {
|
|
336
|
-
(0, exports.logPerformanceEvent)({
|
|
337
|
-
type: 'slow_render',
|
|
338
|
-
category: 'render',
|
|
339
|
-
fps: Math.min(60, Math.max(10, Math.round(1000 / duration))),
|
|
340
|
-
durationMs: duration,
|
|
341
|
-
frameTimeMs: duration,
|
|
342
|
-
frameBudgetPct: Number(((duration / 16.67) * 100).toFixed(0)),
|
|
343
|
-
bottleneckThread: 'JS Thread',
|
|
344
|
-
screenName: taskName,
|
|
345
|
-
label: (0, i18n_1.t)('performance.heavyTaskEventLabel', { taskName }),
|
|
346
|
-
detail: (0, i18n_1.t)('performance.heavyTaskEventDetail', { duration }),
|
|
347
|
-
source: options?.source || getCallerSourceFile(taskName),
|
|
348
|
-
advice: (0, i18n_1.t)('performance.heavyTaskEventAdvice'),
|
|
349
|
-
severity: duration > 50 ? 'critical' : 'warning',
|
|
350
|
-
});
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
};
|
|
354
|
-
exports.trackHeavyTask = trackHeavyTask;
|
|
355
|
-
const measureAsync = async (taskName, asyncFn, options) => {
|
|
356
|
-
const start = Date.now();
|
|
357
|
-
try {
|
|
358
|
-
return await asyncFn();
|
|
359
|
-
}
|
|
360
|
-
finally {
|
|
361
|
-
const duration = Date.now() - start;
|
|
362
|
-
const threshold = options?.thresholdMs ?? 100;
|
|
363
|
-
if (duration >= threshold) {
|
|
364
|
-
(0, exports.logPerformanceEvent)({
|
|
365
|
-
type: 'network',
|
|
366
|
-
category: 'io',
|
|
367
|
-
fps: 60,
|
|
368
|
-
durationMs: duration,
|
|
369
|
-
bottleneckThread: 'Balanced',
|
|
370
|
-
screenName: taskName,
|
|
371
|
-
label: (0, i18n_1.t)('performance.asyncOpEventLabel', { opName: taskName }),
|
|
372
|
-
detail: (0, i18n_1.t)('performance.asyncOpEventDetail', { duration }),
|
|
373
|
-
source: options?.source || getCallerSourceFile(taskName),
|
|
374
|
-
severity: duration > 1000 ? 'critical' : duration > 300 ? 'warning' : 'optimal',
|
|
375
|
-
});
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
};
|
|
379
|
-
exports.measureAsync = measureAsync;
|
|
380
|
-
const useComponentProfiler = (componentName, options) => {
|
|
381
|
-
const renderCountRef = (0, react_1.useRef)(0);
|
|
382
|
-
const prevPropsRef = (0, react_1.useRef)(options?.propsToCompare);
|
|
383
|
-
const startTimeRef = (0, react_1.useRef)(Date.now());
|
|
384
|
-
const renderTimestampsRef = (0, react_1.useRef)([]);
|
|
385
|
-
startTimeRef.current = Date.now();
|
|
386
|
-
(0, react_1.useEffect)(() => {
|
|
387
|
-
const duration = Date.now() - startTimeRef.current;
|
|
388
|
-
const now = Date.now();
|
|
389
|
-
renderCountRef.current += 1;
|
|
390
|
-
renderTimestampsRef.current = [
|
|
391
|
-
...renderTimestampsRef.current.filter(ts => now - ts <= 500),
|
|
392
|
-
now,
|
|
393
|
-
];
|
|
394
|
-
if (renderTimestampsRef.current.length >= 10) {
|
|
395
|
-
(0, exports.logPerformanceEvent)({
|
|
396
|
-
type: 'slow_render',
|
|
397
|
-
category: 'render',
|
|
398
|
-
fps: 20,
|
|
399
|
-
durationMs: duration,
|
|
400
|
-
bottleneckThread: 'JS Thread',
|
|
401
|
-
screenName: componentName,
|
|
402
|
-
label: (0, i18n_1.t)('performance.renderLoopWarningLabel', { comp: componentName }),
|
|
403
|
-
detail: (0, i18n_1.t)('performance.renderLoopWarningDetail', {
|
|
404
|
-
comp: componentName,
|
|
405
|
-
count: renderTimestampsRef.current.length,
|
|
406
|
-
}),
|
|
407
|
-
source: options?.sourceFile || getCallerSourceFile(componentName),
|
|
408
|
-
advice: (0, i18n_1.t)('performance.renderLoopWarningAdvice'),
|
|
409
|
-
severity: 'critical',
|
|
410
|
-
});
|
|
411
|
-
}
|
|
412
|
-
let isWasteful = false;
|
|
413
|
-
let wastefulReason = undefined;
|
|
414
|
-
if (renderCountRef.current > 1 && options?.propsToCompare) {
|
|
415
|
-
const prev = prevPropsRef.current;
|
|
416
|
-
const next = options.propsToCompare;
|
|
417
|
-
const keys = Object.keys(next);
|
|
418
|
-
const changedKeys = keys.filter(k => prev[k] !== next[k]);
|
|
419
|
-
if (changedKeys.length === 0) {
|
|
420
|
-
isWasteful = true;
|
|
421
|
-
wastefulReason =
|
|
422
|
-
'Re-rendered with identical props (memoization candidate)';
|
|
423
|
-
}
|
|
424
|
-
prevPropsRef.current = next;
|
|
425
|
-
}
|
|
426
|
-
(0, exports.trackComponentRender)({
|
|
427
|
-
name: componentName,
|
|
428
|
-
type: options?.type || 'component',
|
|
429
|
-
sourceFile: options?.sourceFile || getCallerSourceFile(componentName),
|
|
430
|
-
renderTimeMs: Math.max(0.5, duration),
|
|
431
|
-
isWasteful,
|
|
432
|
-
reason: wastefulReason,
|
|
433
|
-
});
|
|
434
|
-
});
|
|
435
|
-
};
|
|
436
|
-
exports.useComponentProfiler = useComponentProfiler;
|
|
437
|
-
const usePerformanceTracker = (enabled = true) => {
|
|
438
|
-
const isTrackerActive = enabled && isPerformanceModuleEnabled;
|
|
439
|
-
const [isRecording, setIsRecording] = (0, react_1.useState)(true);
|
|
440
|
-
const [currentFps, setCurrentFps] = (0, react_1.useState)(60);
|
|
441
|
-
const [minFps, setMinFps] = (0, react_1.useState)(60);
|
|
442
|
-
const [maxFps, setMaxFps] = (0, react_1.useState)(60);
|
|
443
|
-
const [avgFps, setAvgFps] = (0, react_1.useState)(60);
|
|
444
|
-
const [totalFrames, setTotalFrames] = (0, react_1.useState)(0);
|
|
445
|
-
const [jankyFrameCount, setJankyFrameCount] = (0, react_1.useState)(0);
|
|
446
|
-
const [jsLagMs, setJsLagMs] = (0, react_1.useState)(0);
|
|
447
|
-
const [fpsHistory, setFpsHistory] = (0, react_1.useState)(() => Array(30).fill(60));
|
|
448
|
-
const [memoryStats, setMemoryStats] = (0, react_1.useState)(() => (0, exports.getHermesMemoryStats)());
|
|
449
|
-
const [renderProfiles, setRenderProfiles] = (0, react_1.useState)(() => (0, exports.getRenderProfiles)());
|
|
450
|
-
const [events, setEvents] = (0, react_1.useState)(() => (0, exports.getPerformanceEvents)());
|
|
451
|
-
(0, react_1.useEffect)(() => {
|
|
452
|
-
if (!isTrackerActive)
|
|
453
|
-
return;
|
|
454
|
-
const unsubRender = (0, exports.subscribeRenderProfiles)(profiles => {
|
|
455
|
-
setRenderProfiles(profiles);
|
|
456
|
-
});
|
|
457
|
-
const unsubEvents = (0, exports.subscribePerformanceEvents)(liveEvents => {
|
|
458
|
-
setEvents(liveEvents);
|
|
459
|
-
});
|
|
460
|
-
return () => {
|
|
461
|
-
unsubRender();
|
|
462
|
-
unsubEvents();
|
|
463
|
-
};
|
|
464
|
-
}, [isTrackerActive]);
|
|
465
|
-
const lastFrameTimeRef = (0, react_1.useRef)(Date.now());
|
|
466
|
-
const rafIdRef = (0, react_1.useRef)(null);
|
|
467
|
-
const appStartTimestampRef = (0, react_1.useRef)(Date.now());
|
|
468
|
-
(0, react_1.useEffect)(() => {
|
|
469
|
-
if (!isTrackerActive || !isRecording)
|
|
470
|
-
return;
|
|
471
|
-
let isMounted = true;
|
|
472
|
-
let frameCount = 0;
|
|
473
|
-
let maxLagInSecond = 0;
|
|
474
|
-
let lastSecond = Date.now();
|
|
475
|
-
const measureFrame = () => {
|
|
476
|
-
if (!isMounted)
|
|
477
|
-
return;
|
|
478
|
-
const now = Date.now();
|
|
479
|
-
const delta = now - lastFrameTimeRef.current;
|
|
480
|
-
lastFrameTimeRef.current = now;
|
|
481
|
-
const lag = Math.max(0, delta - 16.67);
|
|
482
|
-
if (lag > maxLagInSecond) {
|
|
483
|
-
maxLagInSecond = lag;
|
|
484
|
-
}
|
|
485
|
-
frameCount++;
|
|
486
|
-
if (now - lastSecond >= 1000) {
|
|
487
|
-
const elapsed = now - lastSecond;
|
|
488
|
-
const measuredFps = Math.min(60, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
|
|
489
|
-
setCurrentFps(measuredFps);
|
|
490
|
-
setMinFps(prev => Math.min(prev, measuredFps));
|
|
491
|
-
setMaxFps(prev => Math.max(prev, measuredFps));
|
|
492
|
-
setTotalFrames(prev => prev + frameCount);
|
|
493
|
-
setJsLagMs(Number(maxLagInSecond.toFixed(1)));
|
|
494
|
-
if (measuredFps < 55) {
|
|
495
|
-
setJankyFrameCount(prev => prev + 1);
|
|
496
|
-
}
|
|
497
|
-
setFpsHistory(prev => {
|
|
498
|
-
const next = [...prev.slice(-29), measuredFps];
|
|
499
|
-
const sum = next.reduce((a, b) => a + b, 0);
|
|
500
|
-
setAvgFps(Math.round(sum / next.length));
|
|
501
|
-
return next;
|
|
502
|
-
});
|
|
503
|
-
const liveMem = (0, exports.getHermesMemoryStats)();
|
|
504
|
-
setMemoryStats(prev => ({
|
|
505
|
-
...prev,
|
|
506
|
-
heapUsedMb: liveMem.heapUsedMb,
|
|
507
|
-
heapTotalMb: liveMem.heapTotalMb,
|
|
508
|
-
gcCount: liveMem.gcCount,
|
|
509
|
-
gcPauseMs: liveMem.gcPauseMs,
|
|
510
|
-
allocationRateMbPerSec: liveMem.allocationRateMbPerSec,
|
|
511
|
-
}));
|
|
512
|
-
if (measuredFps < 50) {
|
|
513
|
-
const frameTime = Number((1000 / measuredFps).toFixed(1));
|
|
514
|
-
(0, exports.logPerformanceEvent)({
|
|
515
|
-
type: 'fps_drop',
|
|
516
|
-
category: 'render',
|
|
517
|
-
fps: measuredFps,
|
|
518
|
-
durationMs: frameTime,
|
|
519
|
-
droppedFrames: Math.max(0, 60 - measuredFps),
|
|
520
|
-
frameTimeMs: frameTime,
|
|
521
|
-
frameBudgetPct: Number(((frameTime / 16.67) * 100).toFixed(0)),
|
|
522
|
-
bottleneckThread: maxLagInSecond > 8 ? 'JS Thread' : 'UI Thread',
|
|
523
|
-
screenName: 'Live Application Render',
|
|
524
|
-
label: (0, i18n_1.t)('performance.liveFpsDropLabel', { fps: measuredFps }),
|
|
525
|
-
detail: (0, i18n_1.t)('performance.liveFpsDropDetail', { duration: frameTime }),
|
|
526
|
-
source: 'React Native UI Thread',
|
|
527
|
-
breakdown: {
|
|
528
|
-
jsTimeMs: Number((frameTime * 0.65).toFixed(1)),
|
|
529
|
-
uiTimeMs: Number((frameTime * 0.35).toFixed(1)),
|
|
530
|
-
},
|
|
531
|
-
advice: (0, i18n_1.t)('performance.liveFpsDropAdvice'),
|
|
532
|
-
severity: measuredFps < 30 ? 'critical' : 'warning',
|
|
533
|
-
});
|
|
534
|
-
}
|
|
535
|
-
frameCount = 0;
|
|
536
|
-
maxLagInSecond = 0;
|
|
537
|
-
lastSecond = now;
|
|
538
|
-
}
|
|
539
|
-
rafIdRef.current = requestAnimationFrame(measureFrame);
|
|
540
|
-
};
|
|
541
|
-
lastFrameTimeRef.current = Date.now();
|
|
542
|
-
rafIdRef.current = requestAnimationFrame(measureFrame);
|
|
543
|
-
return () => {
|
|
544
|
-
isMounted = false;
|
|
545
|
-
if (rafIdRef.current)
|
|
546
|
-
cancelAnimationFrame(rafIdRef.current);
|
|
547
|
-
};
|
|
548
|
-
}, [isRecording]);
|
|
549
|
-
const mobileVitals = (0, react_1.useMemo)(() => {
|
|
550
|
-
const measuredJankPct = totalFrames > 0
|
|
551
|
-
? Number(((jankyFrameCount / Math.max(1, totalFrames / 60)) * 100).toFixed(1))
|
|
552
|
-
: 0;
|
|
553
|
-
const slowRenderCount = events.filter(e => e.type === 'slow_render').length;
|
|
554
|
-
const dynamicInp = Math.min(100, Math.max(8.0, Number((jsLagMs + 12.5).toFixed(1))));
|
|
555
|
-
const dynamicFcp = Math.max(120, Math.min(500, Math.round(150 + slowRenderCount * 25)));
|
|
556
|
-
const dynamicTti = Math.max(280, Math.min(1200, Math.round(dynamicFcp + 180 + slowRenderCount * 40)));
|
|
557
|
-
return {
|
|
558
|
-
ttiMs: dynamicTti,
|
|
559
|
-
fcpMs: dynamicFcp,
|
|
560
|
-
inpMs: dynamicInp,
|
|
561
|
-
jankPercentage: measuredJankPct,
|
|
562
|
-
grade: measuredJankPct <= 2.0
|
|
563
|
-
? 'Optimal'
|
|
564
|
-
: measuredJankPct <= 5.0
|
|
565
|
-
? 'Fair'
|
|
566
|
-
: 'Poor',
|
|
567
|
-
};
|
|
568
|
-
}, [totalFrames, jankyFrameCount, jsLagMs, events]);
|
|
569
|
-
const reRenderSummary = (0, react_1.useMemo)(() => {
|
|
570
|
-
const totalRenders = renderProfiles.reduce((sum, p) => sum + p.renderCount, 0);
|
|
571
|
-
const totalWasteful = renderProfiles.reduce((sum, p) => sum + p.wastefulCount, 0);
|
|
572
|
-
const overallWastefulPct = totalRenders > 0
|
|
573
|
-
? Number(((totalWasteful / totalRenders) * 100).toFixed(1))
|
|
574
|
-
: 0;
|
|
575
|
-
const topOffender = [...renderProfiles].sort((a, b) => b.renderCount - a.renderCount)[0];
|
|
576
|
-
return {
|
|
577
|
-
totalRenders,
|
|
578
|
-
totalWasteful,
|
|
579
|
-
overallWastefulPct,
|
|
580
|
-
topOffender,
|
|
581
|
-
totalComponentsTracked: renderProfiles.length,
|
|
582
|
-
};
|
|
583
|
-
}, [renderProfiles]);
|
|
584
|
-
const clearEvents = () => {
|
|
585
|
-
(0, exports.clearPerformanceEvents)();
|
|
586
|
-
};
|
|
587
|
-
const resetRenderCounters = (0, react_1.useCallback)(() => {
|
|
588
|
-
globalRenderRegistry.forEach((p, key) => {
|
|
589
|
-
globalRenderRegistry.set(key, {
|
|
590
|
-
...p,
|
|
591
|
-
renderCount: 1,
|
|
592
|
-
wastefulCount: 0,
|
|
593
|
-
wastefulPercentage: 0,
|
|
594
|
-
totalRenderTimeMs: p.avgRenderTimeMs,
|
|
595
|
-
lastRenderedAt: Date.now(),
|
|
596
|
-
severity: 'optimal',
|
|
597
|
-
});
|
|
598
|
-
});
|
|
599
|
-
notifyRenderListeners();
|
|
600
|
-
}, []);
|
|
601
|
-
const simulateComponentRender = (0, react_1.useCallback)((componentId) => {
|
|
602
|
-
globalRenderRegistry.forEach((p, key) => {
|
|
603
|
-
if (p.id === componentId || p.name === componentId) {
|
|
604
|
-
const nextCount = p.renderCount + 1;
|
|
605
|
-
const nextWasteful = p.wastefulCount + 1;
|
|
606
|
-
const nextPct = Number(((nextWasteful / nextCount) * 100).toFixed(1));
|
|
607
|
-
globalRenderRegistry.set(key, {
|
|
608
|
-
...p,
|
|
609
|
-
renderCount: nextCount,
|
|
610
|
-
wastefulCount: nextWasteful,
|
|
611
|
-
wastefulPercentage: nextPct,
|
|
612
|
-
totalRenderTimeMs: Number((p.totalRenderTimeMs + p.avgRenderTimeMs).toFixed(1)),
|
|
613
|
-
lastRenderedAt: Date.now(),
|
|
614
|
-
severity: nextCount > 30
|
|
615
|
-
? 'critical'
|
|
616
|
-
: nextCount > 15
|
|
617
|
-
? 'warning'
|
|
618
|
-
: 'optimal',
|
|
619
|
-
});
|
|
620
|
-
}
|
|
621
|
-
});
|
|
622
|
-
notifyRenderListeners();
|
|
623
|
-
}, []);
|
|
624
|
-
const triggerGc = () => {
|
|
625
|
-
try {
|
|
626
|
-
if (typeof globalThis.gc === 'function') {
|
|
627
|
-
globalThis.gc();
|
|
628
|
-
}
|
|
629
|
-
}
|
|
630
|
-
catch { }
|
|
631
|
-
const reclaimedMb = Number((4.5 + Math.random() * 3.5).toFixed(1));
|
|
632
|
-
const reclaimedKb = Math.round(reclaimedMb * 1024);
|
|
633
|
-
setMemoryStats(prev => ({
|
|
634
|
-
...prev,
|
|
635
|
-
heapUsedMb: Math.max(18.0, Number((prev.heapUsedMb - reclaimedMb).toFixed(1))),
|
|
636
|
-
gcCount: prev.gcCount + 1,
|
|
637
|
-
gcPauseMs: Number((1.2 + Math.random() * 0.9).toFixed(1)),
|
|
638
|
-
}));
|
|
639
|
-
(0, exports.logPerformanceEvent)({
|
|
640
|
-
type: 'memory',
|
|
641
|
-
category: 'memory',
|
|
642
|
-
fps: 60,
|
|
643
|
-
durationMs: Number((1.6 + Math.random() * 0.8).toFixed(1)),
|
|
644
|
-
label: (0, i18n_1.t)('performance.gcCycleLabel'),
|
|
645
|
-
detail: (0, i18n_1.t)('performance.gcCycleDetail', { amount: reclaimedMb }),
|
|
646
|
-
source: 'Hermes JavaScript VM Scavenger',
|
|
647
|
-
breakdown: { jsTimeMs: 1.8, uiTimeMs: 0.3 },
|
|
648
|
-
heapDeltaKb: -reclaimedKb,
|
|
649
|
-
advice: (0, i18n_1.t)('performance.gcCycleAdvice'),
|
|
650
|
-
severity: 'optimal',
|
|
651
|
-
});
|
|
652
|
-
};
|
|
653
|
-
return {
|
|
654
|
-
isRecording,
|
|
655
|
-
setIsRecording,
|
|
656
|
-
currentFps,
|
|
657
|
-
minFps,
|
|
658
|
-
maxFps,
|
|
659
|
-
avgFps,
|
|
660
|
-
totalFrames,
|
|
661
|
-
jankyFrameCount,
|
|
662
|
-
jsLagMs,
|
|
663
|
-
fpsHistory,
|
|
664
|
-
memoryStats,
|
|
665
|
-
mobileVitals,
|
|
666
|
-
renderProfiles,
|
|
667
|
-
reRenderSummary,
|
|
668
|
-
resetRenderCounters,
|
|
669
|
-
simulateComponentRender,
|
|
670
|
-
events,
|
|
671
|
-
setEvents,
|
|
672
|
-
clearEvents,
|
|
673
|
-
triggerGc,
|
|
674
|
-
};
|
|
675
|
-
};
|
|
676
|
-
exports.usePerformanceTracker = usePerformanceTracker;
|
|
677
|
-
const globalPerformanceEvents = [...exports.INITIAL_EVENTS];
|
|
678
|
-
const performanceListeners = new Set();
|
|
679
|
-
let maxPerformanceEventsLimit = 100;
|
|
680
|
-
const setMaxPerformanceEventsLimit = (limit) => {
|
|
681
|
-
maxPerformanceEventsLimit = Math.max(10, limit);
|
|
682
|
-
if (globalPerformanceEvents.length > maxPerformanceEventsLimit) {
|
|
683
|
-
globalPerformanceEvents.length = maxPerformanceEventsLimit;
|
|
684
|
-
performanceListeners.forEach(listener => {
|
|
685
|
-
try {
|
|
686
|
-
listener([...globalPerformanceEvents]);
|
|
687
|
-
}
|
|
688
|
-
catch { }
|
|
689
|
-
});
|
|
690
|
-
}
|
|
691
|
-
};
|
|
692
|
-
exports.setMaxPerformanceEventsLimit = setMaxPerformanceEventsLimit;
|
|
693
|
-
const getMaxPerformanceEventsLimit = () => maxPerformanceEventsLimit;
|
|
694
|
-
exports.getMaxPerformanceEventsLimit = getMaxPerformanceEventsLimit;
|
|
695
|
-
const prunePerformanceEvents = (targetCount) => {
|
|
696
|
-
const countToKeep = targetCount !== undefined ? Math.max(0, targetCount) : Math.floor(globalPerformanceEvents.length / 2);
|
|
697
|
-
const pruned = globalPerformanceEvents.length - countToKeep;
|
|
698
|
-
if (pruned > 0) {
|
|
699
|
-
globalPerformanceEvents.length = countToKeep;
|
|
700
|
-
performanceListeners.forEach(listener => {
|
|
701
|
-
try {
|
|
702
|
-
listener([...globalPerformanceEvents]);
|
|
703
|
-
}
|
|
704
|
-
catch { }
|
|
705
|
-
});
|
|
706
|
-
}
|
|
707
|
-
return Math.max(0, pruned);
|
|
708
|
-
};
|
|
709
|
-
exports.prunePerformanceEvents = prunePerformanceEvents;
|
|
710
|
-
const logPerformanceEvent = (event) => {
|
|
711
|
-
const fullEvent = {
|
|
712
|
-
id: event.id ||
|
|
713
|
-
`perf-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
|
|
714
|
-
timestamp: event.timestamp || Date.now(),
|
|
715
|
-
source: event.source || getCallerSourceFile(),
|
|
716
|
-
...event,
|
|
717
|
-
};
|
|
718
|
-
globalPerformanceEvents.unshift(fullEvent);
|
|
719
|
-
if (globalPerformanceEvents.length > maxPerformanceEventsLimit) {
|
|
720
|
-
globalPerformanceEvents.length = maxPerformanceEventsLimit;
|
|
721
|
-
}
|
|
722
|
-
performanceListeners.forEach(listener => {
|
|
723
|
-
try {
|
|
724
|
-
listener([...globalPerformanceEvents]);
|
|
725
|
-
}
|
|
726
|
-
catch { }
|
|
727
|
-
});
|
|
728
|
-
return fullEvent;
|
|
729
|
-
};
|
|
730
|
-
exports.logPerformanceEvent = logPerformanceEvent;
|
|
731
|
-
const clearPerformanceEvents = () => {
|
|
732
|
-
globalPerformanceEvents.length = 0;
|
|
733
|
-
performanceListeners.forEach(listener => {
|
|
734
|
-
try {
|
|
735
|
-
listener([]);
|
|
736
|
-
}
|
|
737
|
-
catch { }
|
|
738
|
-
});
|
|
739
|
-
};
|
|
740
|
-
exports.clearPerformanceEvents = clearPerformanceEvents;
|
|
741
|
-
const subscribePerformanceEvents = (listener) => {
|
|
742
|
-
performanceListeners.add(listener);
|
|
743
|
-
listener([...globalPerformanceEvents]);
|
|
744
|
-
return () => {
|
|
745
|
-
performanceListeners.delete(listener);
|
|
746
|
-
};
|
|
747
|
-
};
|
|
748
|
-
exports.subscribePerformanceEvents = subscribePerformanceEvents;
|
|
749
|
-
const getPerformanceEvents = () => [...globalPerformanceEvents];
|
|
750
|
-
exports.getPerformanceEvents = getPerformanceEvents;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getPerformanceEvents=exports.subscribePerformanceEvents=exports.clearPerformanceEvents=exports.logPerformanceEvent=exports.prunePerformanceEvents=exports.getMaxPerformanceEventsLimit=exports.setMaxPerformanceEventsLimit=exports.usePerformanceTracker=exports.useComponentProfiler=exports.measureAsync=exports.trackHeavyTask=exports.useNavigationProfiler=exports.trackNavigationTransition=exports.getHermesMemoryStats=exports.trackComponentRender=exports.registerComponentProfile=exports.getRenderProfiles=exports.subscribeRenderProfiles=exports.getPerformanceModuleEnabled=exports.setPerformanceModuleEnabled=exports.INITIAL_EVENTS=exports.getInitialPerformanceEvents=exports.getInitialRenderProfiles=exports.generateFixSnippet=void 0,exports.getCallerSourceFile=getCallerSourceFile;const AppColors_1=require("../styles/AppColors"),i18n_1=require("../i18n"),react_1=require("react"),generateFixSnippet=(e,r="Component",o)=>{const t=r||"Component",n=o?.propName||"onPress",a=o?.actionName||"handlePress",p=o?.itemHeight||72;switch(e){case"useCallback":return{keyName:"useCallback",title:(0,i18n_1.t)("performance.fixUseCallbackTitle"),explanation:(0,i18n_1.t)("performance.fixUseCallbackDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeUseCallback",{comp:t})}
|
|
2
|
+
<Button ${n}={() => ${a}(item.id)} />
|
|
3
|
+
|
|
4
|
+
${(0,i18n_1.t)("performance.afterUseCallback")}
|
|
5
|
+
const ${a}Memo = useCallback(() => {
|
|
6
|
+
${a}(item.id);
|
|
7
|
+
}, [item.id]);
|
|
8
|
+
<Button ${n}={${a}Memo} />`,impact:(0,i18n_1.t)("performance.highImpact"),impactColor:AppColors_1.AppColors.pink500};case"createSelector":case"useMemo":return{keyName:"createSelector",title:(0,i18n_1.t)("performance.fixCreateSelectorTitle"),explanation:(0,i18n_1.t)("performance.fixCreateSelectorDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeCreateSelector",{comp:t})}
|
|
9
|
+
const { items, total } = useSelector(state => ({
|
|
10
|
+
items: state.cart.items,
|
|
11
|
+
total: state.cart.total,
|
|
12
|
+
}));
|
|
13
|
+
|
|
14
|
+
${(0,i18n_1.t)("performance.afterCreateSelector")}
|
|
15
|
+
import { shallowEqual } from 'react-redux';
|
|
16
|
+
const { items, total } = useSelector(
|
|
17
|
+
state => ({ items: state.cart.items, total: state.cart.total }),
|
|
18
|
+
shallowEqual
|
|
19
|
+
);`,impact:(0,i18n_1.t)("performance.highImpact"),impactColor:AppColors_1.AppColors.pink500};case"memo":case"React.memo":return{keyName:"memo",title:(0,i18n_1.t)("performance.fixReactMemoTitle"),explanation:(0,i18n_1.t)("performance.fixReactMemoDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeMemo",{comp:t})}
|
|
20
|
+
export const ${t} = (props: ${t}Props) => {
|
|
21
|
+
return <View>...</View>;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
${(0,i18n_1.t)("performance.afterMemo")}
|
|
25
|
+
export const ${t} = React.memo((props: ${t}Props) => {
|
|
26
|
+
return <View>...</View>;
|
|
27
|
+
}, (prev, next) => prev.id === next.id && prev.updatedAt === next.updatedAt);`,impact:(0,i18n_1.t)("performance.highImpact"),impactColor:AppColors_1.AppColors.pink500};case"getItemLayout":return{keyName:"getItemLayout",title:(0,i18n_1.t)("performance.fixGetItemLayoutTitle"),explanation:(0,i18n_1.t)("performance.fixGetItemLayoutDesc"),codeSnippet:`${(0,i18n_1.t)("performance.flatListOptimization",{comp:t})}
|
|
28
|
+
const ITEM_HEIGHT = ${p};
|
|
29
|
+
const getItemLayout = useCallback((_data: any, index: number) => ({
|
|
30
|
+
length: ITEM_HEIGHT,
|
|
31
|
+
offset: ITEM_HEIGHT * index,
|
|
32
|
+
index,
|
|
33
|
+
}), []);
|
|
34
|
+
|
|
35
|
+
<FlatList
|
|
36
|
+
data={items}
|
|
37
|
+
getItemLayout={getItemLayout}
|
|
38
|
+
renderItem={({item}) => <${t} item={item} />}
|
|
39
|
+
keyExtractor={item => String(item.id)}
|
|
40
|
+
/>`,impact:(0,i18n_1.t)("performance.highImpact"),impactColor:AppColors_1.AppColors.pink500};case"customComparator":return{keyName:"customComparator",title:(0,i18n_1.t)("performance.fixCustomComparatorTitle"),explanation:(0,i18n_1.t)("performance.fixCustomComparatorDesc"),codeSnippet:`${(0,i18n_1.t)("performance.customComparator",{comp:t})}
|
|
41
|
+
export const ${t} = React.memo(
|
|
42
|
+
${t}Component,
|
|
43
|
+
(prevProps, nextProps) => {
|
|
44
|
+
return prevProps.id === nextProps.id && prevProps.status === nextProps.status;
|
|
45
|
+
}
|
|
46
|
+
);`,impact:(0,i18n_1.t)("performance.mediumImpact"),impactColor:AppColors_1.AppColors.amber500};case"DebouncedInput":return{keyName:"DebouncedInput",title:(0,i18n_1.t)("performance.fixDebouncedInputTitle"),explanation:(0,i18n_1.t)("performance.fixDebouncedInputDesc"),codeSnippet:`${(0,i18n_1.t)("performance.debounceInput",{comp:t})}
|
|
47
|
+
const [localText, setLocalText] = useState('');
|
|
48
|
+
const debouncedSearch = useMemo(
|
|
49
|
+
() => debounce((query: string) => onSearch(query), 250),
|
|
50
|
+
[onSearch]
|
|
51
|
+
);`,impact:(0,i18n_1.t)("performance.highImpact"),impactColor:AppColors_1.AppColors.pink500};case"ComponentSplitting":return{keyName:"ComponentSplitting",title:(0,i18n_1.t)("performance.fixComponentSplittingTitle"),explanation:(0,i18n_1.t)("performance.fixComponentSplittingDesc"),codeSnippet:`${(0,i18n_1.t)("performance.isolateState",{comp:t})}
|
|
52
|
+
export const StickyKeyboard = React.memo(KeyboardStickyView);`,impact:(0,i18n_1.t)("performance.mediumImpact"),impactColor:AppColors_1.AppColors.purple500};case"InteractionManager":return{keyName:"InteractionManager",title:(0,i18n_1.t)("performance.fixInteractionManagerTitle"),explanation:(0,i18n_1.t)("performance.fixInteractionManagerDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeInteractionManager",{comp:t})}
|
|
53
|
+
|
|
54
|
+
${(0,i18n_1.t)("performance.afterInteractionManager")}`,impact:(0,i18n_1.t)("performance.highImpact"),impactColor:AppColors_1.AppColors.pink500};case"FlatListWindowing":return{keyName:"FlatListWindowing",title:(0,i18n_1.t)("performance.fixFlatListWindowingTitle"),explanation:(0,i18n_1.t)("performance.fixFlatListWindowingDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeFlatListWindowing",{comp:t})}`,impact:(0,i18n_1.t)("performance.mediumImpact"),impactColor:AppColors_1.AppColors.purple500};case"ImageCaching":return{keyName:"ImageCaching",title:(0,i18n_1.t)("performance.fixImageCachingTitle"),explanation:(0,i18n_1.t)("performance.fixImageCachingDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeImageCaching",{comp:t})}`,impact:(0,i18n_1.t)("performance.mediumImpact"),impactColor:AppColors_1.AppColors.purple500};case"ContextSplitting":return{keyName:"ContextSplitting",title:(0,i18n_1.t)("performance.fixContextSplittingTitle"),explanation:(0,i18n_1.t)("performance.fixContextSplittingDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeContextSplitting",{comp:t})}
|
|
55
|
+
|
|
56
|
+
${(0,i18n_1.t)("performance.afterContextSplitting")}`,impact:(0,i18n_1.t)("performance.highImpact"),impactColor:AppColors_1.AppColors.pink500};case"InlineStylesHoist":return{keyName:"InlineStylesHoist",title:(0,i18n_1.t)("performance.fixInlineStylesHoistTitle"),explanation:(0,i18n_1.t)("performance.fixInlineStylesHoistDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeInlineStyles",{comp:t})}
|
|
57
|
+
|
|
58
|
+
${(0,i18n_1.t)("performance.afterInlineStyles")}`,impact:(0,i18n_1.t)("performance.bestPractice"),impactColor:AppColors_1.AppColors.pink500};default:return{keyName:"useRefForTracking",title:(0,i18n_1.t)("performance.fixUseRefForTrackingTitle"),explanation:(0,i18n_1.t)("performance.fixUseRefForTrackingDesc"),codeSnippet:`${(0,i18n_1.t)("performance.beforeUseRef",{comp:t})}
|
|
59
|
+
const [eventCount, setEventCount] = useState(0);
|
|
60
|
+
|
|
61
|
+
${(0,i18n_1.t)("performance.afterUseRef")}
|
|
62
|
+
const eventCountRef = useRef(0);`,impact:(0,i18n_1.t)("performance.bestPractice"),impactColor:AppColors_1.AppColors.pink500}}};exports.generateFixSnippet=generateFixSnippet;function getCallerSourceFile(e){try{const r=new Error().stack;if(!r)return e||"React Native Runtime";const o=r.split(`
|
|
63
|
+
`);for(let t=0;t<o.length;t++){const n=o[t];if(n.includes("performanceTracker")||n.includes("node_modules")||n.includes("Error")||n.includes("regeneratorRuntime"))continue;const a=n.match(/(?:at\s+)?(?:.*?\((.*?)(?::\d+)?(?::\d+)?\)|(\S+:\d+:\d+))/);if(a){const f=(a[1]||a[2]||"").trim().replace(/^at\s+/,"");if(f&&!f.includes("performanceTracker"))return f}const p=n.trim().replace(/^at\s+/,"");if(p&&!p.includes("performanceTracker"))return p}}catch{}return e||"React Native Runtime"}const getInitialRenderProfiles=()=>[];exports.getInitialRenderProfiles=getInitialRenderProfiles;const getInitialPerformanceEvents=()=>[];exports.getInitialPerformanceEvents=getInitialPerformanceEvents,exports.INITIAL_EVENTS=[];let isPerformanceModuleEnabled=!1;const setPerformanceModuleEnabled=e=>{isPerformanceModuleEnabled=e};exports.setPerformanceModuleEnabled=setPerformanceModuleEnabled;const getPerformanceModuleEnabled=()=>isPerformanceModuleEnabled;exports.getPerformanceModuleEnabled=getPerformanceModuleEnabled;const globalRenderRegistry=new Map,renderListeners=new Set,notifyRenderListeners=()=>{const e=Array.from(globalRenderRegistry.values());renderListeners.forEach(r=>{try{r(e)}catch{}})},subscribeRenderProfiles=e=>(renderListeners.add(e),e(Array.from(globalRenderRegistry.values())),()=>{renderListeners.delete(e)});exports.subscribeRenderProfiles=subscribeRenderProfiles;const getRenderProfiles=()=>Array.from(globalRenderRegistry.values());exports.getRenderProfiles=getRenderProfiles;const registerComponentProfile=e=>{isPerformanceModuleEnabled&&(globalRenderRegistry.set(e.name,e),notifyRenderListeners())};exports.registerComponentProfile=registerComponentProfile;const trackComponentRender=e=>{if(!isPerformanceModuleEnabled)return;const r=globalRenderRegistry.get(e.name),o=Date.now(),t=e.renderTimeMs??1.5,n=e.isWasteful??!1;if(r){const a=r.renderCount+1,p=r.wastefulCount+(n?1:0),f=Number((p/a*100).toFixed(1)),g=Number((r.totalRenderTimeMs+t).toFixed(1)),b=Number((g/a).toFixed(1)),h=e.reason?Array.from(new Set([...r.reasons,e.reason])):r.reasons,M={...r,renderCount:a,wastefulCount:p,wastefulPercentage:f,avgRenderTimeMs:b,totalRenderTimeMs:g,lastRenderedAt:o,reasons:h,severity:f>70&&a>20?"critical":f>40&&a>10?"warning":"optimal"};globalRenderRegistry.set(e.name,M)}else{const a={id:`render-${Date.now()}-${Math.random().toString(36).substring(2,6)}`,name:e.name,type:e.type||"component",sourceFile:e.sourceFile||getCallerSourceFile(e.name),renderCount:1,wastefulCount:n?1:0,wastefulPercentage:n?100:0,avgRenderTimeMs:t,totalRenderTimeMs:t,lastRenderedAt:o,reasons:e.reason?[e.reason]:[],fixKeys:e.fixKeys||[(0,exports.generateFixSnippet)("useCallback",e.name),(0,exports.generateFixSnippet)("memo",e.name)],severity:"optimal"};globalRenderRegistry.set(e.name,a)}notifyRenderListeners()};exports.trackComponentRender=trackComponentRender;const getHermesMemoryStats=()=>{try{const e=globalThis.HermesInternal;if(e&&typeof e.getInstrumentedStats=="function"){const r=e.getInstrumentedStats(),o=Number(((r.js_heap_size||r.heap_size||348e5)/1048576).toFixed(1)),t=Number(((r.js_heap_capacity||r.allocated_bytes||64e6)/1048576).toFixed(1)),n=Number(r.num_gcs||0),a=Number(((r.gc_time_ms||0)/Math.max(1,n)).toFixed(1));return{heapUsedMb:o,heapTotalMb:t,gcCount:n,gcPauseMs:a,allocationRateMbPerSec:1.8}}}catch{}return{heapUsedMb:32.5,heapTotalMb:64,gcCount:0,gcPauseMs:1.5,allocationRateMbPerSec:1.2}};exports.getHermesMemoryStats=getHermesMemoryStats;const trackNavigationTransition=(e,r,o)=>{const t=Math.max(1,Number(r.toFixed(1))),n=o?.ttiMs?Number(o.ttiMs.toFixed(1)):t,a=o?.droppedFrames??(t>32?Math.round((t-16.67)/16.67):0),p=Math.min(60,Math.max(15,Math.round(1e3/Math.max(16.67,t))));return(0,exports.logPerformanceEvent)({type:"transition",category:"navigation",fps:p,durationMs:t,droppedFrames:a,frameTimeMs:t,frameBudgetPct:Number((t/16.67*100).toFixed(0)),bottleneckThread:t>32?"JS Thread":"Balanced",screenName:e,label:(0,i18n_1.t)("performance.transitionEventLabel",{screen:e}),detail:(0,i18n_1.t)("performance.transitionEventDetail",{duration:t,tti:n}),source:o?.source||getCallerSourceFile(e),advice:(0,i18n_1.t)("performance.transitionEventAdvice"),severity:t>50?"critical":t>25?"warning":"optimal"})};exports.trackNavigationTransition=trackNavigationTransition;const useNavigationProfiler=(e,r)=>{const o=(0,react_1.useRef)(Date.now());(0,react_1.useEffect)(()=>{const t=Date.now()-o.current;(0,exports.trackNavigationTransition)(e,t),r?.onTransitionEnd&&r.onTransitionEnd(t)},[e])};exports.useNavigationProfiler=useNavigationProfiler;const trackHeavyTask=(e,r,o)=>{const t=Date.now();try{return r()}finally{const n=Date.now()-t,a=o?.thresholdMs??16;n>=a&&(0,exports.logPerformanceEvent)({type:"slow_render",category:"render",fps:Math.min(60,Math.max(10,Math.round(1e3/n))),durationMs:n,frameTimeMs:n,frameBudgetPct:Number((n/16.67*100).toFixed(0)),bottleneckThread:"JS Thread",screenName:e,label:(0,i18n_1.t)("performance.heavyTaskEventLabel",{taskName:e}),detail:(0,i18n_1.t)("performance.heavyTaskEventDetail",{duration:n}),source:o?.source||getCallerSourceFile(e),advice:(0,i18n_1.t)("performance.heavyTaskEventAdvice"),severity:n>50?"critical":"warning"})}};exports.trackHeavyTask=trackHeavyTask;const measureAsync=async(e,r,o)=>{const t=Date.now();try{return await r()}finally{const n=Date.now()-t,a=o?.thresholdMs??100;n>=a&&(0,exports.logPerformanceEvent)({type:"network",category:"io",fps:60,durationMs:n,bottleneckThread:"Balanced",screenName:e,label:(0,i18n_1.t)("performance.asyncOpEventLabel",{opName:e}),detail:(0,i18n_1.t)("performance.asyncOpEventDetail",{duration:n}),source:o?.source||getCallerSourceFile(e),severity:n>1e3?"critical":n>300?"warning":"optimal"})}};exports.measureAsync=measureAsync;const useComponentProfiler=(e,r)=>{const o=(0,react_1.useRef)(0),t=(0,react_1.useRef)(r?.propsToCompare),n=(0,react_1.useRef)(Date.now()),a=(0,react_1.useRef)([]);n.current=Date.now(),(0,react_1.useEffect)(()=>{const p=Date.now()-n.current,f=Date.now();o.current+=1,a.current=[...a.current.filter(h=>f-h<=500),f],a.current.length>=10&&(0,exports.logPerformanceEvent)({type:"slow_render",category:"render",fps:20,durationMs:p,bottleneckThread:"JS Thread",screenName:e,label:(0,i18n_1.t)("performance.renderLoopWarningLabel",{comp:e}),detail:(0,i18n_1.t)("performance.renderLoopWarningDetail",{comp:e,count:a.current.length}),source:r?.sourceFile||getCallerSourceFile(e),advice:(0,i18n_1.t)("performance.renderLoopWarningAdvice"),severity:"critical"});let g=!1,b;if(o.current>1&&r?.propsToCompare){const h=t.current,M=r.propsToCompare;Object.keys(M).filter(y=>h[y]!==M[y]).length===0&&(g=!0,b="Re-rendered with identical props (memoization candidate)"),t.current=M}(0,exports.trackComponentRender)({name:e,type:r?.type||"component",sourceFile:r?.sourceFile||getCallerSourceFile(e),renderTimeMs:Math.max(.5,p),isWasteful:g,reason:b})})};exports.useComponentProfiler=useComponentProfiler;const usePerformanceTracker=(e=!0)=>{const r=e&&isPerformanceModuleEnabled,[o,t]=(0,react_1.useState)(!0),[n,a]=(0,react_1.useState)(60),[p,f]=(0,react_1.useState)(60),[g,b]=(0,react_1.useState)(60),[h,M]=(0,react_1.useState)(60),[v,F]=(0,react_1.useState)(0),[y,N]=(0,react_1.useState)(0),[S,A]=(0,react_1.useState)(0),[L,$]=(0,react_1.useState)(()=>Array(30).fill(60)),[_,I]=(0,react_1.useState)(()=>(0,exports.getHermesMemoryStats)()),[C,H]=(0,react_1.useState)(()=>(0,exports.getRenderProfiles)()),[E,w]=(0,react_1.useState)(()=>(0,exports.getPerformanceEvents)());(0,react_1.useEffect)(()=>{if(!r)return;const c=(0,exports.subscribeRenderProfiles)(i=>{H(i)}),s=(0,exports.subscribePerformanceEvents)(i=>{w(i)});return()=>{c(),s()}},[r]);const R=(0,react_1.useRef)(Date.now()),P=(0,react_1.useRef)(null),z=(0,react_1.useRef)(Date.now());(0,react_1.useEffect)(()=>{if(!r||!o)return;let c=!0,s=0,i=0,u=Date.now();const d=()=>{if(!c)return;const l=Date.now(),K=l-R.current;R.current=l;const D=Math.max(0,K-16.67);if(D>i&&(i=D),s++,l-u>=1e3){const J=l-u,x=Math.min(60,Math.max(0,Math.round(s*1e3/J)));a(x),f(m=>Math.min(m,x)),b(m=>Math.max(m,x)),F(m=>m+s),A(Number(i.toFixed(1))),x<55&&N(m=>m+1),$(m=>{const k=[...m.slice(-29),x],B=k.reduce((G,O)=>G+O,0);return M(Math.round(B/k.length)),k});const T=(0,exports.getHermesMemoryStats)();if(I(m=>({...m,heapUsedMb:T.heapUsedMb,heapTotalMb:T.heapTotalMb,gcCount:T.gcCount,gcPauseMs:T.gcPauseMs,allocationRateMbPerSec:T.allocationRateMbPerSec})),x<50){const m=Number((1e3/x).toFixed(1));(0,exports.logPerformanceEvent)({type:"fps_drop",category:"render",fps:x,durationMs:m,droppedFrames:Math.max(0,60-x),frameTimeMs:m,frameBudgetPct:Number((m/16.67*100).toFixed(0)),bottleneckThread:i>8?"JS Thread":"UI Thread",screenName:"Live Application Render",label:(0,i18n_1.t)("performance.liveFpsDropLabel",{fps:x}),detail:(0,i18n_1.t)("performance.liveFpsDropDetail",{duration:m}),source:"React Native UI Thread",breakdown:{jsTimeMs:Number((m*.65).toFixed(1)),uiTimeMs:Number((m*.35).toFixed(1))},advice:(0,i18n_1.t)("performance.liveFpsDropAdvice"),severity:x<30?"critical":"warning"})}s=0,i=0,u=l}P.current=requestAnimationFrame(d)};return R.current=Date.now(),P.current=requestAnimationFrame(d),()=>{c=!1,P.current&&cancelAnimationFrame(P.current)}},[o]);const U=(0,react_1.useMemo)(()=>{const c=v>0?Number((y/Math.max(1,v/60)*100).toFixed(1)):0,s=E.filter(l=>l.type==="slow_render").length,i=Math.min(100,Math.max(8,Number((S+12.5).toFixed(1)))),u=Math.max(120,Math.min(500,Math.round(150+s*25)));return{ttiMs:Math.max(280,Math.min(1200,Math.round(u+180+s*40))),fcpMs:u,inpMs:i,jankPercentage:c,grade:c<=2?"Optimal":c<=5?"Fair":"Poor"}},[v,y,S,E]),W=(0,react_1.useMemo)(()=>{const c=C.reduce((d,l)=>d+l.renderCount,0),s=C.reduce((d,l)=>d+l.wastefulCount,0),i=c>0?Number((s/c*100).toFixed(1)):0,u=[...C].sort((d,l)=>l.renderCount-d.renderCount)[0];return{totalRenders:c,totalWasteful:s,overallWastefulPct:i,topOffender:u,totalComponentsTracked:C.length}},[C]),V=()=>{(0,exports.clearPerformanceEvents)()},j=(0,react_1.useCallback)(()=>{globalRenderRegistry.forEach((c,s)=>{globalRenderRegistry.set(s,{...c,renderCount:1,wastefulCount:0,wastefulPercentage:0,totalRenderTimeMs:c.avgRenderTimeMs,lastRenderedAt:Date.now(),severity:"optimal"})}),notifyRenderListeners()},[]),q=(0,react_1.useCallback)(c=>{globalRenderRegistry.forEach((s,i)=>{if(s.id===c||s.name===c){const u=s.renderCount+1,d=s.wastefulCount+1,l=Number((d/u*100).toFixed(1));globalRenderRegistry.set(i,{...s,renderCount:u,wastefulCount:d,wastefulPercentage:l,totalRenderTimeMs:Number((s.totalRenderTimeMs+s.avgRenderTimeMs).toFixed(1)),lastRenderedAt:Date.now(),severity:u>30?"critical":u>15?"warning":"optimal"})}}),notifyRenderListeners()},[]);return{isRecording:o,setIsRecording:t,currentFps:n,minFps:p,maxFps:g,avgFps:h,totalFrames:v,jankyFrameCount:y,jsLagMs:S,fpsHistory:L,memoryStats:_,mobileVitals:U,renderProfiles:C,reRenderSummary:W,resetRenderCounters:j,simulateComponentRender:q,events:E,setEvents:w,clearEvents:V,triggerGc:()=>{try{typeof globalThis.gc=="function"&&globalThis.gc()}catch{}const c=Number((4.5+Math.random()*3.5).toFixed(1)),s=Math.round(c*1024);I(i=>({...i,heapUsedMb:Math.max(18,Number((i.heapUsedMb-c).toFixed(1))),gcCount:i.gcCount+1,gcPauseMs:Number((1.2+Math.random()*.9).toFixed(1))})),(0,exports.logPerformanceEvent)({type:"memory",category:"memory",fps:60,durationMs:Number((1.6+Math.random()*.8).toFixed(1)),label:(0,i18n_1.t)("performance.gcCycleLabel"),detail:(0,i18n_1.t)("performance.gcCycleDetail",{amount:c}),source:"Hermes JavaScript VM Scavenger",breakdown:{jsTimeMs:1.8,uiTimeMs:.3},heapDeltaKb:-s,advice:(0,i18n_1.t)("performance.gcCycleAdvice"),severity:"optimal"})}}};exports.usePerformanceTracker=usePerformanceTracker;const globalPerformanceEvents=[...exports.INITIAL_EVENTS],performanceListeners=new Set;let maxPerformanceEventsLimit=100;const setMaxPerformanceEventsLimit=e=>{maxPerformanceEventsLimit=Math.max(10,e),globalPerformanceEvents.length>maxPerformanceEventsLimit&&(globalPerformanceEvents.length=maxPerformanceEventsLimit,performanceListeners.forEach(r=>{try{r([...globalPerformanceEvents])}catch{}}))};exports.setMaxPerformanceEventsLimit=setMaxPerformanceEventsLimit;const getMaxPerformanceEventsLimit=()=>maxPerformanceEventsLimit;exports.getMaxPerformanceEventsLimit=getMaxPerformanceEventsLimit;const prunePerformanceEvents=e=>{const r=e!==void 0?Math.max(0,e):Math.floor(globalPerformanceEvents.length/2),o=globalPerformanceEvents.length-r;return o>0&&(globalPerformanceEvents.length=r,performanceListeners.forEach(t=>{try{t([...globalPerformanceEvents])}catch{}})),Math.max(0,o)};exports.prunePerformanceEvents=prunePerformanceEvents;const logPerformanceEvent=e=>{const r={id:e.id||`perf-${Date.now()}-${Math.random().toString(36).substring(2,6)}`,timestamp:e.timestamp||Date.now(),source:e.source||getCallerSourceFile(),...e};return globalPerformanceEvents.unshift(r),globalPerformanceEvents.length>maxPerformanceEventsLimit&&(globalPerformanceEvents.length=maxPerformanceEventsLimit),performanceListeners.forEach(o=>{try{o([...globalPerformanceEvents])}catch{}}),r};exports.logPerformanceEvent=logPerformanceEvent;const clearPerformanceEvents=()=>{globalPerformanceEvents.length=0,performanceListeners.forEach(e=>{try{e([])}catch{}})};exports.clearPerformanceEvents=clearPerformanceEvents;const subscribePerformanceEvents=e=>(performanceListeners.add(e),e([...globalPerformanceEvents]),()=>{performanceListeners.delete(e)});exports.subscribePerformanceEvents=subscribePerformanceEvents;const getPerformanceEvents=()=>[...globalPerformanceEvents];exports.getPerformanceEvents=getPerformanceEvents;
|