Improve touch events breadcrumbs components tree

[krystofwoldrich]

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: https://github.com/getsentry/sentry-react-native/blob/ed50cf4a4b7ce6f8d985d6fce9d6d311846f74b9/src/js/touchevents.tsx#L209

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
]

React Native Dev Tools for reference:

[krystofwoldrich]

Due to the size limitation of the event, where breadcrumbs are stored, and the fact that breadcrumbs are not symbolicated we are not going to implement this.

[krystofwoldrich]

Reopening

• We only send first X components going from the touch target outwards so the size of events is not an issue.

• Hermes is a default engine in RN from version 0.70 (current 0.74). And Release build with Hermes are not minified by default, because of Hermes Bytecode.

• Related to https://github.com/getsentry/sentry-react-native/issues/3885, we might not need the Babel plugin.