feat(tracing): Send component name on interaction spans (#9948)

0Calories · web-flow · commit f433a554e1b0 · 2023-12-21T11:40:04.000-05:00
One of the PRs scoped from #9855 Sends component names on the databag of interaction spans
diff --git a/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/assets/script.js b/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/assets/script.js
@@ -14,3 +14,4 @@ const delay = e => {
 };
 
 document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);
+document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);
diff --git a/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/template.html b/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/template.html
@@ -6,6 +6,7 @@
   <body>
     <div>Rendered Before Long Task</div>
     <button data-test-id="interaction-button">Click Me</button>
+    <button data-test-id="annotated-button" data-sentry-component="AnnotatedButton">Click Me</button>
     <script src="https://example.com/path/to/script.js"></script>
   </body>
 </html>
diff --git a/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/test.ts b/packages/browser-integration-tests/suites/tracing/browsertracing/interactions/test.ts
@@ -80,3 +80,35 @@ sentryTest(
     }
   },
 );
+
+sentryTest(
+  'should use the component name for a clicked element when it is available',
+  async ({ browserName, getLocalTestPath, page }) => {
+    const supportedBrowsers = ['chromium', 'firefox'];
+
+    if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.goto(url);
+    await getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.locator('[data-test-id=annotated-button]').click();
+
+    const envelopes = await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+    expect(envelopes).toHaveLength(1);
+    const eventData = envelopes[0];
+
+    expect(eventData.spans).toHaveLength(1);
+
+    const interactionSpan = eventData.spans![0];
+    expect(interactionSpan.op).toBe('ui.interaction.click');
+    expect(interactionSpan.description).toBe('body > AnnotatedButton');
+  },
+);
diff --git a/packages/tracing-internal/src/browser/metrics/index.ts b/packages/tracing-internal/src/browser/metrics/index.ts
@@ -1,8 +1,8 @@
 /* eslint-disable max-lines */
 import type { IdleTransaction, Transaction } from '@sentry/core';
 import { getActiveTransaction } from '@sentry/core';
-import type { Measurements } from '@sentry/types';
-import { browserPerformanceTimeOrigin, htmlTreeAsString, logger } from '@sentry/utils';
+import type { Measurements, SpanContext } from '@sentry/types';
+import { browserPerformanceTimeOrigin, getComponentName, htmlTreeAsString, logger } from '@sentry/utils';
 
 import { DEBUG_BUILD } from '../../common/debug-build';
 import {
@@ -102,13 +102,20 @@ export function startTrackingInteractions(): void {
         const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
         const duration = msToSec(entry.duration);
 
-        transaction.startChild({
+        const span: SpanContext = {
           description: htmlTreeAsString(entry.target),
           op: `ui.interaction.${entry.name}`,
           origin: 'auto.ui.browser.metrics',
           startTimestamp: startTime,
           endTimestamp: startTime + duration,
-        });
+        };
+
+        const componentName = getComponentName(entry.target);
+        if (componentName) {
+          span.data = { 'ui.component_name': componentName };
+        }
+
+        transaction.startChild(span);
       }
     }
   });

Original file line number	Diff line number	Diff line change
`@@ -14,3 +14,4 @@ const delay = e => {`
`14`	`14`	`};`
`15`	`15`
`16`	`16`	`document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);`
	`17`	`+document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);`