Skip to content

Commit ff19756

Browse files
dariusz-bieladariusz-biela
committed
refactor: rename data-label to data-sentry-label
1 parent eaf25ec commit ff19756

6 files changed

Lines changed: 31 additions & 31 deletions

File tree

patches/sentry-core/@sentry+core+10.24.0+001+data-label-support.patch renamed to patches/sentry-core/@sentry+core+10.24.0+001+data-sentry-label-support.patch

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ index 3169c25..19acc49 100644
88
* Given a child DOM element, returns a query-selector statement describing that
99
- * and its ancestors
1010
- * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
11-
+ * and its ancestors, prefixed with data-label if found on ancestor
12-
+ * e.g. [HTMLElement] => [data-label="MyLabel"] div.css-146c3p1.r-1udh08x.r-1udbk01.r-1iln25a > svg
11+
+ * and its ancestors, prefixed with data-sentry-label if found on ancestor
12+
+ * e.g. [HTMLElement] => [data-sentry-label="MyLabel"] div.css-146c3p1.r-1udh08x.r-1udbk01.r-1iln25a > svg
1313
* @returns generated DOM path
1414
*/
1515
function htmlTreeAsString(
@@ -20,25 +20,25 @@ index 3169c25..19acc49 100644
2020
- return out.reverse().join(separator);
2121
+ const cssSelector = out.reverse().join(separator);
2222
+
23-
+ // If cssSelector already contains data-label, return as is
24-
+ if (cssSelector.includes('[data-label="')) {
23+
+ // If cssSelector already contains data-sentry-label, return as is
24+
+ if (cssSelector.includes('[data-sentry-label="')) {
2525
+ return cssSelector;
2626
+ }
2727
+
28-
+ // Search for data-label up to 15 levels (beyond the 5 levels of cssSelector)
28+
+ // Search for data-sentry-label up to 15 levels (beyond the 5 levels of cssSelector)
2929
+ let labelElem = elem;
3030
+ let dataLabel = null;
3131
+ for (let i = 0; i < 15 && labelElem; i++) {
3232
+ // @ts-expect-error WINDOW has HTMLElement
33-
+ if (WINDOW.HTMLElement && labelElem instanceof HTMLElement && labelElem.dataset && labelElem.dataset['label']) {
34-
+ dataLabel = labelElem.dataset['label'];
33+
+ if (WINDOW.HTMLElement && labelElem instanceof HTMLElement && labelElem.dataset && labelElem.dataset['sentryLabel']) {
34+
+ dataLabel = labelElem.dataset['sentryLabel'];
3535
+ break;
3636
+ }
3737
+ labelElem = labelElem.parentNode;
3838
+ }
3939
+
4040
+ if (dataLabel) {
41-
+ return `[data-label="${dataLabel}"] ${cssSelector}`;
41+
+ return `[data-sentry-label="${dataLabel}"] ${cssSelector}`;
4242
+ }
4343
+
4444
+ return cssSelector;
@@ -51,9 +51,9 @@ index 3169c25..19acc49 100644
5151
if (WINDOW.HTMLElement) {
5252
- // If using the component name annotation plugin, this value may be available on the DOM node
5353
if (elem instanceof HTMLElement && elem.dataset) {
54-
+ // Check for data-label first - return in attribute format [data-label="value"]
55-
+ if (elem.dataset['label']) {
56-
+ return `[data-label="${elem.dataset['label']}"]`;
54+
+ // Check for data-sentry-label first - return in attribute format [data-sentry-label="value"]
55+
+ if (elem.dataset['sentryLabel']) {
56+
+ return `[data-sentry-label="${elem.dataset['sentryLabel']}"]`;
5757
+ }
5858
+ // If using the component name annotation plugin, this value may be available on the DOM node
5959
if (elem.dataset['sentryComponent']) {
@@ -69,8 +69,8 @@ index 2ad52b0..fd184fb 100644
6969
* Given a child DOM element, returns a query-selector statement describing that
7070
- * and its ancestors
7171
- * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
72-
+ * and its ancestors, prefixed with data-label if found on ancestor
73-
+ * e.g. [HTMLElement] => [data-label="MyLabel"] div.css-146c3p1.r-1udh08x.r-1udbk01.r-1iln25a > svg
72+
+ * and its ancestors, prefixed with data-sentry-label if found on ancestor
73+
+ * e.g. [HTMLElement] => [data-sentry-label="MyLabel"] div.css-146c3p1.r-1udh08x.r-1udbk01.r-1iln25a > svg
7474
* @returns generated DOM path
7575
*/
7676
function htmlTreeAsString(
@@ -81,25 +81,25 @@ index 2ad52b0..fd184fb 100644
8181
- return out.reverse().join(separator);
8282
+ const cssSelector = out.reverse().join(separator);
8383
+
84-
+ // If cssSelector already contains data-label, return as is
85-
+ if (cssSelector.includes('[data-label="')) {
84+
+ // If cssSelector already contains data-sentry-label, return as is
85+
+ if (cssSelector.includes('[data-sentry-label="')) {
8686
+ return cssSelector;
8787
+ }
8888
+
89-
+ // Search for data-label up to 15 levels (beyond the 5 levels of cssSelector)
89+
+ // Search for data-sentry-label up to 15 levels (beyond the 5 levels of cssSelector)
9090
+ let labelElem = elem;
9191
+ let dataLabel = null;
9292
+ for (let i = 0; i < 15 && labelElem; i++) {
9393
+ // @ts-expect-error WINDOW has HTMLElement
94-
+ if (WINDOW.HTMLElement && labelElem instanceof HTMLElement && labelElem.dataset && labelElem.dataset['label']) {
95-
+ dataLabel = labelElem.dataset['label'];
94+
+ if (WINDOW.HTMLElement && labelElem instanceof HTMLElement && labelElem.dataset && labelElem.dataset['sentryLabel']) {
95+
+ dataLabel = labelElem.dataset['sentryLabel'];
9696
+ break;
9797
+ }
9898
+ labelElem = labelElem.parentNode;
9999
+ }
100100
+
101101
+ if (dataLabel) {
102-
+ return `[data-label="${dataLabel}"] ${cssSelector}`;
102+
+ return `[data-sentry-label="${dataLabel}"] ${cssSelector}`;
103103
+ }
104104
+
105105
+ return cssSelector;
@@ -112,9 +112,9 @@ index 2ad52b0..fd184fb 100644
112112
if (WINDOW.HTMLElement) {
113113
- // If using the component name annotation plugin, this value may be available on the DOM node
114114
if (elem instanceof HTMLElement && elem.dataset) {
115-
+ // Check for data-label first - return in attribute format [data-label="value"]
116-
+ if (elem.dataset['label']) {
117-
+ return `[data-label="${elem.dataset['label']}"]`;
115+
+ // Check for data-sentry-label first - return in attribute format [data-sentry-label="value"]
116+
+ if (elem.dataset['sentryLabel']) {
117+
+ return `[data-sentry-label="${elem.dataset['sentryLabel']}"]`;
118118
+ }
119119
+ // If using the component name annotation plugin, this value may be available on the DOM node
120120
if (elem.dataset['sentryComponent']) {

‎patches/sentry-core/details.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
# `@sentry/core` patches
22

3-
### [@sentry+core+10.24.0+001+data-label-support.patch](@sentry+core+10.24.0+001+data-label-support.patch)
3+
### [@sentry+core+10.24.0+001+data-sentry-label-support.patch](@sentry+core+10.24.0+001+data-sentry-label-support.patch)
44

5-
- Reason: Enhances the `htmlTreeAsString` function to support `data-label` attributes for better element identification in Sentry spans. The patch:
6-
- Always includes `data-label` in the list of checked attributes for each DOM element
7-
- Searches up to 15 levels up the DOM tree to find a `data-label` attribute
8-
- Prefixes the CSS selector with the found `data-label` value (e.g., `[data-label="MyLabel"] div.css-146c3p1.r-1udh08x.r-1udbk01.r-1iln25a > svg`)
5+
- Reason: Enhances the `htmlTreeAsString` function to support `data-sentry-label` attributes for better element identification in Sentry spans. The patch:
6+
- Always includes `data-sentry-label` in the list of checked attributes for each DOM element
7+
- Searches up to 15 levels up the DOM tree to find a `data-sentry-label` attribute
8+
- Prefixes the CSS selector with the found `data-sentry-label` value (e.g., `[data-sentry-label="MyLabel"] div.css-146c3p1.r-1udh08x.r-1udbk01.r-1iln25a > svg`)
99

1010
This allows us to identify UI elements by meaningful labels rather than just CSS selectors, making Sentry spans more actionable.
1111
- Upstream PR/issue: https://github.com/getsentry/sentry-javascript/pull/18398

‎src/components/Button/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ type ButtonProps = Partial<ChildrenProps> & {
177177
*/
178178
shouldStayNormalOnDisable?: boolean;
179179

180-
/** Label for Sentry tracking. On web, this will be added as data-label attribute. */
180+
/** Label for Sentry tracking. On web, this will be added as data-sentry-label attribute. */
181181
sentryLabel?: string;
182182
};
183183

‎src/components/Checkbox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ type CheckboxProps = Partial<ChildrenProps> & {
6464
/** Reference to the outer element */
6565
ref?: ForwardedRef<View>;
6666

67-
/** Label for Sentry tracking. On web, this will be added as data-label attribute. */
67+
/** Label for Sentry tracking. On web, this will be added as data-sentry-label attribute. */
6868
sentryLabel?: string;
6969
};
7070

‎src/components/Pressable/GenericPressable/implementation/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function WebGenericPressable({focusable = true, ref, sentryLabel, ...props}: Pre
2222
aria-valuemin={props.accessibilityValue?.min}
2323
aria-valuemax={props.accessibilityValue?.max}
2424
aria-valuetext={props.accessibilityValue?.text}
25-
dataSet={{tag: 'pressable', ...(props.noDragArea && {dragArea: false}), ...(sentryLabel && {label: sentryLabel}), ...props.dataSet}}
25+
dataSet={{tag: 'pressable', ...(props.noDragArea && {dragArea: false}), ...(sentryLabel && {sentryLabel}), ...props.dataSet}}
2626
/>
2727
);
2828
}

‎src/components/Pressable/GenericPressable/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ type PressableProps = RNPressableProps &
157157
isNested?: boolean;
158158

159159
/**
160-
* Label for Sentry tracking. On web, this will be added as data-label attribute.
160+
* Label for Sentry tracking. On web, this will be added as data-sentry-label attribute.
161161
*/
162162
sentryLabel?: string;
163163

0 commit comments

Comments
 (0)