feat(profiling): add profiling analytics instrumentation (#43895)

## Summary
Adds profiling analytics instrumentation to the new hovercard and
slowest transactions components.

Closes https://github.com/getsentry/team-profiling/issues/176

static/app/components/profiling/functionsMiniGrid.tsx

@@ -1,4 +1,4 @@
-import {CSSProperties, Fragment} from 'react';
+import {CSSProperties, Fragment, SyntheticEvent} from 'react';
 import {Link} from 'react-router';
 import styled from '@emotion/styled';
 
@@ -13,12 +13,13 @@ import {generateProfileFlamechartRouteWithHighlightFrame} from 'sentry/utils/pro
 
 interface FunctionsMiniGridProps {
   functions: SuspectFunction[] | null;
+  onLinkClick: (e: SyntheticEvent) => void;
   organization: Organization;
   project: Project;
 }
 
 export function FunctionsMiniGrid(props: FunctionsMiniGridProps) {
-  const {organization, project, functions} = props;
+  const {organization, project, functions, onLinkClick} = props;
 
   const linkToFlamechartRoute = (
     profileId: string,
@@ -47,7 +48,10 @@ export function FunctionsMiniGrid(props: FunctionsMiniGridProps) {
             <Fragment key={idx}>
               <FunctionsMiniGridCell title={f.name}>
                 <FunctionNameTextTruncate>
-                  <Link to={linkToFlamechartRoute(exampleProfileId, f.name, f.package)}>
+                  <Link
+                    to={linkToFlamechartRoute(exampleProfileId, f.name, f.package)}
+                    onClick={onLinkClick}
+                  >
                     {f.name}
                   </Link>
                 </FunctionNameTextTruncate>

static/app/components/profiling/profilingTransactionHovercard.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useEffect} from 'react';
 import styled from '@emotion/styled';
 
 import {Hovercard} from 'sentry/components/hovercard';
@@ -12,6 +12,7 @@ import {TextTruncateOverflow} from 'sentry/components/profiling/textTruncateOver
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {getShortEventId} from 'sentry/utils/events';
 import {useProfilingTransactionQuickSummary} from 'sentry/utils/profiling/hooks/useProfilingTransactionQuickSummary';
 import {
@@ -42,7 +43,19 @@ export function ProfilingTransactionHovercard(props: ProfilingTransactionHoverca
     transaction,
   });
 
-  const triggerLink = <Link to={linkToSummary}>{transaction}</Link>;
+  const triggerLink = (
+    <Link
+      to={linkToSummary}
+      onClick={() =>
+        trackAdvancedAnalyticsEvent('profiling_views.go_to_transaction', {
+          organization,
+          source: 'transaction_hovercard.trigger',
+        })
+      }
+    >
+      {transaction}
+    </Link>
+  );
 
   if (!organization.features.includes('profiling-dashboard-redesign')) {
     return triggerLink;
@@ -104,6 +117,12 @@ export function ProfilingTransactionHovercardBody({
     });
   };
 
+  useEffect(() => {
+    trackAdvancedAnalyticsEvent('profiling_ui_events.transaction_hovercard_view', {
+      organization,
+    });
+  }, [organization]);
+
   return (
     <Flex gap={space(3)} column>
       <Flex justify="space-between">
@@ -112,7 +131,15 @@ export function ProfilingTransactionHovercardBody({
           isLoading={latestProfileQuery.isLoading}
         >
           {latestProfile ? (
-            <Link to={linkToFlamechartRoute(String(latestProfile.id))}>
+            <Link
+              to={linkToFlamechartRoute(String(latestProfile.id))}
+              onClick={() =>
+                trackAdvancedAnalyticsEvent('profiling_views.go_to_flamegraph', {
+                  organization,
+                  source: 'transaction_hovercard.latest_profile',
+                })
+              }
+            >
               {getShortEventId(String(latestProfile!.id))}
             </Link>
           ) : (
@@ -133,7 +160,15 @@ export function ProfilingTransactionHovercardBody({
                 }
                 abbreviation
               />
-              <Link to={linkToFlamechartRoute(String(slowestProfile.id))}>
+              <Link
+                to={linkToFlamechartRoute(String(slowestProfile.id))}
+                onClick={() =>
+                  trackAdvancedAnalyticsEvent('profiling_views.go_to_flamegraph', {
+                    organization,
+                    source: 'transaction_hovercard.slowest_profile',
+                  })
+                }
+              >
                 ({getShortEventId(String(slowestProfile?.id))})
               </Link>
             </Flex>
@@ -148,6 +183,12 @@ export function ProfilingTransactionHovercardBody({
           functions={functions}
           organization={organization}
           project={project}
+          onLinkClick={() =>
+            trackAdvancedAnalyticsEvent('profiling_views.go_to_flamegraph', {
+              organization,
+              source: 'transaction_hovercard.suspect_function',
+            })
+          }
         />
         {functionsQuery.type === 'loading' && <FunctionsMiniGridLoading />}
 

static/app/utils/analytics/profilingAnalyticsEvents.tsx

@@ -1,26 +1,35 @@
 import {PlatformKey} from 'sentry/data/platformCategories';
 
+type ProfilingEventSource =
+  | 'slowest_transaction_panel'
+  | 'transaction_details'
+  | 'transaction_hovercard.trigger'
+  | 'transaction_hovercard.latest_profile'
+  | 'transaction_hovercard.slowest_profile'
+  | 'transaction_hovercard.suspect_function';
+
+interface EventPayloadWithProjectDetails {
+  project_id: string | number | undefined;
+  project_platform: PlatformKey | undefined;
+}
+
 export type ProfilingEventParameters = {
+  // ui interactions
+  'profiling_ui_events.transaction_hovercard_view': {};
+  // views & nav
   'profiling_views.give_feedback_action': {};
-  'profiling_views.go_to_flamegraph': {source: string};
-  'profiling_views.go_to_transaction': {source: string};
+  'profiling_views.go_to_flamegraph': {source: ProfilingEventSource};
+  'profiling_views.go_to_transaction': {
+    source: ProfilingEventSource;
+  };
   'profiling_views.landing': {};
   'profiling_views.onboarding': {};
   'profiling_views.onboarding_action': {
     action: 'done' | 'dismissed';
   };
-  'profiling_views.profile_details': {
-    project_id: string | number | undefined;
-    project_platform: PlatformKey | undefined;
-  };
-  'profiling_views.profile_flamegraph': {
-    project_id: string | number | undefined;
-    project_platform: PlatformKey | undefined;
-  };
-  'profiling_views.profile_summary': {
-    project_id: string | number | undefined;
-    project_platform: PlatformKey | undefined;
-  };
+  'profiling_views.profile_details': EventPayloadWithProjectDetails;
+  'profiling_views.profile_flamegraph': EventPayloadWithProjectDetails;
+  'profiling_views.profile_summary': EventPayloadWithProjectDetails;
   'profiling_views.visit_discord_channel': {};
 };
 
@@ -37,4 +46,6 @@ export const profilingEventMap: Record<EventKey, string> = {
   'profiling_views.onboarding_action': 'Profiling Actions: Onboarding Action',
   'profiling_views.give_feedback_action': 'Profiling Actions: Feedback Action',
   'profiling_views.visit_discord_channel': 'Profiling Actions: Visit Discord Channel',
+  'profiling_ui_events.transaction_hovercard_view':
+    'Profiling Actions: Viewed Transaction Hovercard',
 };

static/app/views/profiling/content.tsx

@@ -121,8 +121,6 @@ function ProfilingContent({location}: ProfilingContentProps) {
     'profiling-dashboard-redesign'
   );
 
-  // isNewProfilingDashboardEnabled = false;
-
   return (
     <SentryDocumentTitle title={t('Profiling')} orgSlug={organization.slug}>
       <PageFiltersContainer>

static/app/views/profiling/landing/profilingSlowestTransactionsPanel.tsx

@@ -19,6 +19,7 @@ import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {
   EventsResultsDataRow,
   useProfileEvents,
@@ -122,7 +123,6 @@ function SlowestTransactionPanelItem({
 }: SlowestTransactionPanelItemProps) {
   const organization = useOrganization();
   const projects = useProjects();
-
   const transactionProject = useMemo(
     () => projects.projects.find(p => p.id === String(transaction['project.id'])),
     [projects.projects, transaction]
@@ -143,6 +143,12 @@ function SlowestTransactionPanelItem({
               projectSlug: transactionProject?.slug!,
               transaction: transaction.transaction as string,
             })}
+            onClick={() => {
+              trackAdvancedAnalyticsEvent('profiling_views.go_to_transaction', {
+                source: 'slowest_transaction_panel',
+                organization,
+              });
+            }}
           >
             <TextTruncateOverflow>
               {transaction.transaction as string}
@@ -202,6 +208,12 @@ function PanelItemFunctionsMiniGrid(props: PanelItemFunctionsMiniGridProps) {
         functions={functions}
         organization={organization}
         project={project}
+        onLinkClick={() =>
+          trackAdvancedAnalyticsEvent('profiling_views.go_to_flamegraph', {
+            organization,
+            source: 'slowest_transaction_panel',
+          })
+        }
       />
     </PanelItemBodyInner>
   );