Sentry-react-native: Touch Events displayName not working

[jbolotin]

OS:

• [ ] Windows
• [X] MacOS
• [ ] Linux

Platform:

• [ ] iOS
• [X] Android

SDK:

• [x] @sentry/react-native (>= 1.0.0)
• [ ] react-native-sentry (<= 0.43.2)

SDK version: 0.0.0
1.5.0
react-native version: 0.0.0
0.62.2
Are you using Expo?

• [ ] Yes
• [X] No

Are you using sentry.io or on-premise?

• [X] sentry.io (SaaS)
• [ ] on-premise

If you are using sentry.io, please post a link to your issue so we can take a look:

link

Configuration:

(@sentry/react-native)

Sentry.init({
  dsn,
  integrations: [new ExtraErrorData()],
  attachStacktrace: true,
});

or

(react-native-sentry)

Sentry.config(
  'https://[email protected]/...'
  // other options
 ).install();

---

I have following issue:

I'm following the new docs for Touch Events, and I think that this is a fantastic new feature. Unfortunately, when I set displayName as a property on a component that contains a TouchableOpacity, it only works on some of the components. Most of the components it just shows Image or Svg even if I set a displayName on the component that has the TouchableOpacity in it

Steps to reproduce:

• Set displayName on functional component
• Click it to trigger touch event
• Trigger error elsewhere

Actual result:

Some touch events have the correct name, but most do not

Expected result:

All touch events have name set correctly for components where it is set

[jennmueng]

@jbolotin So the way react native handles touch events is that it gradually works up the component tree. Our SDK follows that and if it sees a component with a displayName it will log that. What I think is happening in your case is that Image and Svg are also using the displayName and there's no way for it to tell whether that's a displayName you've set or it's something else. You can avoid this by including it in ignoredDisplayNames in the options for the TouchEventBoundary here: https://docs.sentry.io/platforms/react-native/touchevents/#ignoreddisplaynames. Let me know if this works for you.

We're considering just also attaching the whole component tree to touch events that detect a displayName like we do with ones that do not detect a displayName because any library or any default component could have a displayName like in your case.

[jbolotin]

Hey @jennmueng, really appreciate all the work you do on this library and for you addressing this so quickly.

I've tested out 1.6.1 to see if with the new changes it captures the displayName, and unfortunately, I'm having the same problems as before. I can confirm that a component tree is displayed, but it seems to not show all of the component. One of the touch events is displaying the tree properly, but most of them display trees like [..., "AnimatedComponent","TouchableOpacity", ...] and don't display the displayName of the component that the TouchableOpacity is in or even parents of the component with the TouchableOpacity.

I'm not sure what the expected behavior is here, but I'm assuming the displayName is supposed to be displayed based on the docs and your comment above. Please let me know if I can provide other details that may be helpful to you, and thanks again for looking into this. Really excited about this feature!

[jennmueng]

Hey @jennmueng, really appreciate all the work you do on this library and for you addressing this so quickly.

I've tested out 1.6.1 to see if with the new changes it captures the displayName, and unfortunately, I'm having the same problems as before. I can confirm that a component tree is displayed, but it seems to not show all of the component. One of the touch events is displaying the tree properly, but most of them display trees like [..., "AnimatedComponent","TouchableOpacity", ...] and don't display the displayName of the component that the TouchableOpacity is in or even parents of the component with the TouchableOpacity.

I'm not sure what the expected behavior is here, but I'm assuming the displayName is supposed to be displayed based on the docs and your comment above. Please let me know if I can provide other details that may be helpful to you, and thanks again for looking into this. Really excited about this feature!

Hmm so the correct component with the displayName is not listed in the componentTree array at all? If that is the case then something's wrong.

Otherwise, for reference, here is what it should look like:

and this is the code for that exact button:

const SetScopePropertiesButton = (props) => {
  return (
    <TouchableOpacity onPress={props.setScopeProps}>
      <Text style={styles.sectionTitle}>Set Scope Properties</Text>
    </TouchableOpacity>
  );
};

SetScopePropertiesButton.displayName = 'SetScopeProperties';

Is this what you have?

I wish it could be easier than this but with the way React Native handles Touch events we have to do it like this. For example, in the example above if you tap the Text it shows that the touch occurred in the Text and not the TouchableOpacity, so there is no way for us to efficiently determine that it occurred in the TouchableOpacity. So we just log the tree branch that it occurred in.

[jbolotin]

Hi @jennmueng, I created a small example issue here

For these breadcrumbs, we're primarily concerned with the last three touch events. These correspond to the following user interactions (code below is simplified version of actual code, but it should be sufficient I think):

1. Click on settings:

Component hierarchy:
    Header
        SettingsButton
            TouchableOpacity
                SettingsSvg

where Header is of form:

const Header = () => (
  <View>
      ...
      <SettingsButton />
      ...
  </View>
);

MainHeader.displayName = 'MainHeader';

and SettingsButton is of from:

const SettingsButton = () => (
    <TouchableOpacity onPress={x}>
        ...
        <SettingsSvg />
        ...
    </TouchableOpacity>
)

SettingsButton.displayName = 'SettingsButton';

1. Close settings page (also set displayNames in this and they're not showing up)
2. Click on component with image in it that throws an error in its onPress callback (also set displayNames in this and parents of this and they're not showing up

As you should be able to see in the error, none of these display names are showing up properly. Please let me know how I can be of more help. I'm could provide a bit more code via email or something, but unfortunately, I can't provide a complete example here

[jennmueng]

@jbolotin I've given a look at the issue and I see it now, it does seem weird that it doesn't log the displayNames I will spend some time experimenting to see if I can reproduce and find the source of this issue. I will get back to you if I find a solution or have more questions. Thanks!

[jennmueng]

@jbolotin Can you update to the latest version, 1.7.0 and see if everything works now? We actually made the fix in 1.6.3 and I've tried it for a week or so and everything works on my end so far. Thanks!

[jbolotin]

Hey @jennmueng, thanks for taking another stab at it!

I just tried on 1.7, and I'm seeing the same behavior unfortunately. I tried in development mode and release mode, made sure I reuploaded sourcemaps and everything else I could think of, but it looks like there are still the same issues.

Here is a sample event so you can see what I'm seeing Link . Every component touched should have had displayName set. You'll see that one component it did work on, but oddly, I didn't even touch that component during this session, so I'm really not sure what's going on with this

Please let me know if there's anything else I can try that might be helpful for you. I really appreciate you continuing to look into this!