perf(sentry): Add experimental UI element tag for interaction transactions (#46340)

Author: 0Calories

static/app/bootstrap/initializeSdk.tsx

@@ -7,7 +7,7 @@ import {_browserPerformanceTimeOriginMode} from '@sentry/utils';
 
 import {SENTRY_RELEASE_VERSION, SPA_DSN} from 'sentry/constants';
 import {Config} from 'sentry/types';
-import {addExtraMeasurements} from 'sentry/utils/performanceForSentry';
+import {addExtraMeasurements, addUIElementTag} from 'sentry/utils/performanceForSentry';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 const SPA_MODE_ALLOW_URLS = [
@@ -98,6 +98,7 @@ export function initializeSdk(config: Config, {routes}: {routes?: Function} = {}
     },
     beforeSendTransaction(event) {
       addExtraMeasurements(event);
+      addUIElementTag(event);
 
       event.spans = event.spans?.filter(span => {
         // Filter analytic timeout spans.

static/app/utils/performanceForSentry.tsx

@@ -425,3 +425,24 @@ export const setGroupedEntityTag = (
   groups = [...groups, +Infinity];
   setTag(`${tagName}.grouped`, `<=${groups.find(g => n <= g)}`);
 };
+
+/**
+ * A temporary util function used for interaction transactions that will attach a tag to the transaction, indicating the element
+ * that was interacted with. This will allow for querying for transactions by a specific element. This is a high cardinality tag, but
+ * it is only temporary for an experiment
+ */
+export const addUIElementTag = (transaction: TransactionEvent) => {
+  if (!transaction || transaction.contexts?.trace?.op !== 'ui.action.click') {
+    return;
+  }
+
+  if (!transaction.tags) {
+    return;
+  }
+
+  const interactionSpan = transaction.spans?.find(
+    span => span.op === 'ui.interaction.click'
+  );
+
+  transaction.tags.interactionElement = interactionSpan?.description;
+};