feat(profiling): Check if transaction exists for profile (#41673)

For various reasons like rate limiting, quotas, and more, the
transaction id on the profile may not exist. Do not render the `Go to
Transaction` button if it cannot be found.

static/app/components/profiling/profileHeader.tsx

@@ -4,9 +4,9 @@ import Button from 'sentry/components/button';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {Breadcrumb} from 'sentry/components/profiling/breadcrumb';
 import {t} from 'sentry/locale';
+import {Event} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {getTransactionDetailsUrl} from 'sentry/utils/performance/urls';
-import {ProfileGroup} from 'sentry/utils/profiling/profile/importProfile';
 import {
   generateProfileDetailsRouteWithQuery,
   generateProfileFlamechartRouteWithQuery,
@@ -17,22 +17,21 @@ import {useParams} from 'sentry/utils/useParams';
 import {useProfileGroup} from 'sentry/views/profiling/profileGroupProvider';
 
 interface ProfileHeaderProps {
-  profiles: ProfileGroup | null;
+  transaction: Event | null;
 }
 
-function ProfileHeader({profiles}: ProfileHeaderProps) {
+function ProfileHeader({transaction}: ProfileHeaderProps) {
   const params = useParams();
   const location = useLocation();
   const organization = useOrganization();
   const [profileGroup] = useProfileGroup();
 
-  const transaction = profileGroup.type === 'resolved' ? profileGroup.data.name : '';
+  const transactionName = profileGroup.type === 'resolved' ? profileGroup.data.name : '';
   const profileId = params.eventId ?? '';
   const projectSlug = params.projectId ?? '';
 
-  const transactionId = profiles?.metadata?.transactionID;
-  const transactionTarget = transactionId
-    ? getTransactionDetailsUrl(organization.slug, `${projectSlug}:${transactionId}`)
+  const transactionTarget = transaction?.id
+    ? getTransactionDetailsUrl(organization.slug, `${projectSlug}:${transaction.id}`)
     : null;
 
   function handleGoToTransaction() {
@@ -53,14 +52,14 @@ function ProfileHeader({profiles}: ProfileHeaderProps) {
               type: 'profile summary',
               payload: {
                 projectSlug,
-                transaction,
+                transaction: transactionName,
                 query: location.query,
               },
             },
             {
               type: 'flamechart',
               payload: {
-                transaction,
+                transaction: transactionName,
                 profileId,
                 projectSlug,
                 query: location.query,

static/app/views/profiling/profileGroupProvider.tsx

@@ -6,6 +6,7 @@ import {ProfileHeader} from 'sentry/components/profiling/profileHeader';
 import {t} from 'sentry/locale';
 import {Organization, Project} from 'sentry/types';
 import {RequestState} from 'sentry/types/core';
+import {useSentryEvent} from 'sentry/utils/profiling/hooks/useSentryEvent';
 import {importProfile, ProfileGroup} from 'sentry/utils/profiling/profile/importProfile';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -79,10 +80,16 @@ function ProfileGroupProvider(props: FlamegraphViewProps): React.ReactElement {
     };
   }, [params.eventId, params.projectId, api, organization]);
 
+  const transactionEvent = useSentryEvent(
+    params.orgId,
+    params.projectId,
+    profileGroupState.type === 'resolved' ? profileGroupState.data.transactionID : null
+  );
+
   return (
     <ProfileGroupContext.Provider value={[profileGroupState, setProfileGroupState]}>
       <ProfileHeader
-        profiles={profileGroupState.type === 'resolved' ? profileGroupState.data : null}
+        transaction={transactionEvent.type === 'resolved' ? transactionEvent.data : null}
       />
       {props.children}
     </ProfileGroupContext.Provider>