Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(sdk): Custom touch tracking property instead of accessibilityLabel #2712

Merged
merged 5 commits into from
Jan 4, 2023
Merged

feat(sdk): Custom touch tracking property instead of accessibilityLabel #2712

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
68ccf2b
Add option to set custom labelName for automatic UI touch event track…
Dec 21, 2022
cc3965b
Update tests
Dec 21, 2022
68b1c86
Fix labelName prop description
Dec 21, 2022
34ae2d7
Update test name
Jan 4, 2023
bc6bc1f
Add changelog
Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion sample/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,8 @@ const App = () => {
};

// Wrap your app to get more features out of the box such as auto performance monitoring.
export default Sentry.wrap(App);
export default Sentry.wrap(App, {
touchEventBoundaryProps: {
labelName: 'custom-sentry-label-name',
},
});
2 changes: 1 addition & 1 deletion sample/src/screens/HomeScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ const HomeScreen = (props: Props) => {
onPress={() => {
Sentry.captureException(new Error('Test Error'));
}}
accessibilityLabel="captureException">
custom-sentry-label-name="captureException via custom Sentry label">
<Text style={styles.buttonText}>Capture Exception</Text>
</TouchableOpacity>
<View style={styles.spacer} />
Expand Down
22 changes: 16 additions & 6 deletions src/js/touchevents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ export type TouchEventBoundaryProps = {
* React Node wrapped by TouchEventBoundary.
*/
children?: React.ReactNode;
/**
* Label Name used to identify the touched element.
*/
labelName?: string;
};

const touchEventStyles = StyleSheet.create({
Expand Down Expand Up @@ -96,8 +100,8 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
message: activeLabel
? `Touch event within element: ${activeLabel}`
: 'Touch event within component tree',
type: this.props.breadcrumbType
}
type: this.props.breadcrumbType,
};
addBreadcrumb(crumb);

logger.log(`[TouchEvents] ${crumb.message}`);
Expand Down Expand Up @@ -159,20 +163,26 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
? `${props[PROP_KEY]}`
: undefined;

// For some reason type narrowing doesn't work as expected with indexing when checking it all in one go in
// the "check-label" if sentence, so we have to assign it to a variable here first
let labelValue;
if (typeof this.props.labelName === 'string')
labelValue = props?.[this.props.labelName];

// Check the label first
if (label && !this._isNameIgnored(label)) {
if (!activeLabel) {
activeLabel = label;
}
componentTreeNames.push(label);
} else if (
typeof props?.accessibilityLabel === 'string' &&
!this._isNameIgnored(props.accessibilityLabel)
typeof labelValue === 'string' &&
!this._isNameIgnored(labelValue)
) {
if (!activeLabel) {
activeLabel = props.accessibilityLabel;
activeLabel = labelValue;
}
componentTreeNames.push(props.accessibilityLabel);
componentTreeNames.push(labelValue);
} else if (currentInst.elementType) {
const { elementType } = currentInst;

Expand Down
15 changes: 10 additions & 5 deletions test/touchevents.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,12 @@ describe('TouchEventBoundary._onTouchStart', () => {
expect(addBreadcrumb).not.toBeCalled();
});

it('label is preferred over accessibilityLabel and displayName', () => {
it('label is preferred over labelName and displayName', () => {
const { defaultProps } = TouchEventBoundary;
const boundary = new TouchEventBoundary(defaultProps);
const boundary = new TouchEventBoundary({
...defaultProps,
labelName: 'custom-sentry-label-name',
});

const event = {
_targetInst: {
Expand All @@ -66,7 +69,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
return: {
memoizedProps: {
'sentry-label': 'LABEL!',
accessibilityLabel: 'access!',
'custom-sentry-label-name': 'access!',
},
},
},
Expand All @@ -92,6 +95,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
const { defaultProps } = TouchEventBoundary;
const boundary = new TouchEventBoundary({
...defaultProps,
labelName: 'custom-sentry-label-name',
ignoreNames: ['View', 'Ignore', /^Connect\(/, new RegExp('^Happy\\(')],
});

Expand All @@ -111,7 +115,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
return: {
memoizedProps: {
'sentry-label': 'Ignore',
accessibilityLabel: 'Ignore',
'custom-sentry-label-name': 'Ignore',
},
elementType: {
displayName: 'Styled(View2)',
Expand Down Expand Up @@ -151,6 +155,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
const boundary = new TouchEventBoundary({
...defaultProps,
maxComponentTreeSize: 2,
labelName: 'custom-sentry-label-name',
});

const event = {
Expand All @@ -164,7 +169,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
},
return: {
memoizedProps: {
accessibilityLabel: 'Connect(View)',
'custom-sentry-label-name': 'Connect(View)',
},
return: {
elementType: {
Expand Down