-
-
Notifications
You must be signed in to change notification settings - Fork 354
Closed
Description
Description
The current components tree sent with UI Action Touch Breadcrumbs only lists components with defined displayName, which are mostly RN Core Components like View and Text. Comparing that with RN Dev Tools there are much more components in the tree. I'm sharing a code snippet of how this could be improved and a comparison to the current state and dev tools.
Current code:
sentry-react-native/src/js/touchevents.tsx
Line 209 in ed50cf4
| } else if (currentInst.elementType) { |
A snippet of an enhanced tree reader:
if (typeof elementType === 'string') {
// tree.push(elementType); //native components like RTCView elementType
} else if (elementType.displayName) {
tree.push(elementType.displayName);
} else if (typeof elementType.name === 'string') {
//tree.push(elementType.toString().match(/([a-zA-Z_{1}][a-zA-Z0-9_]+)(?=\()/g)?.[0]); //unnecessary
tree.push(elementType.name)
} else if ((elementType as any)._context && (elementType as any)._context.displayName) {
tree.push((elementType as any)._context.displayName); //context provides and consumers
}Todo:
- Test with different RN version
- Obfuscation - by default in release there is none
- Performance impact -
elementType.toString().match(/([a-zA-Z_{1}][a-zA-Z0-9_]+)(?=\()/g)?.[0])
Current components tree:
[
View
SafeAreaInsetsContext,
SafeAreaInsetsContext,
HeaderShownContext,
View,
View,
View,
PanGestureHandler,
View,
View,
View,
View,
ScrollView,
View,
TouchableNativeFeedback,
View,
Text,
]With the snippet:
[
View,
TextAncestorContext,
ReactNativeProfiler,
App,
GestureHandlerRootView,
View,
TextAncestorContext,
Provider,
ReactRedux,
LinkingContext,
ThemeProvider,
ThemeContext,
EnsureSingleNavigator,
StackNavigator,
NavigationContent,
PreventRemoveProvider,
StackView,
GestureHandlerRootView,
View,
TextAncestorContext,
SafeAreaProviderCompat,
SafeAreaInsetsContext,
SafeAreaProvider,
SafeAreaFrameContext,
SafeAreaInsetsContext,
SafeAreaInsetsContext,
HeaderShownContext,
CardStack,
Background,
View,
TextAncestorContext,
MaybeScreenContainer,
ScreenContainer,
MaybeScreen,
Screen,
InnerScreen,
DelayedFreeze,
Freeze,
Suspender,
AnimatedComponent,
Card,
View,
TextAncestorContext,
AnimatedComponent,
View,
TextAncestorContext,
PanGestureHandler,
PanGestureHandler,
AnimatedComponent,
View,
TextAncestorContext,
View,
TextAncestorContext,
View,
TextAncestorContext,
View,
TextAncestorContext,
HeaderBackContext,
HeaderShownContext,
HeaderHeightContext,
SceneView,
EnsureSingleNavigator,
StaticContainer,
HomeScreen,
ScrollView,
ScrollView,
ScrollViewContext,
Button,
Button,
TouchableOpacity,
TouchableOpacity,
AnimatedComponent,
View,
TextAncestorContext,
View,
TextAncestorContext,
Text,
TextAncestorContext
]Metadata
Metadata
Assignees
Labels
No labels
Projects
Status
Done
