diff --git a/static/app/bootstrap/initializeSdk.tsx b/static/app/bootstrap/initializeSdk.tsx index a86864d7c1635f..d36b84e4a7c696 100644 --- a/static/app/bootstrap/initializeSdk.tsx +++ b/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. diff --git a/static/app/utils/performanceForSentry.tsx b/static/app/utils/performanceForSentry.tsx index 50ac0a3ba36391..082795f2039b32 100644 --- a/static/app/utils/performanceForSentry.tsx +++ b/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; +};