feat(trace): bring back profiling visualization for missing instrumentation spans (#68697)

![CleanShot 2024-04-11 at 10 45
22@2x](https://github.com/getsentry/sentry/assets/9317857/45ae5a9c-d08a-4451-8b2e-8dc3313328f5)

Author: JonasBa

static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useLayoutEffect, useMemo} from 'react';
+import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 import * as qs from 'query-string';
@@ -99,19 +99,14 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
   const issues = useMemo(() => {
     return [...props.node.errors, ...props.node.performance_issues];
   }, [props.node.errors, props.node.performance_issues]);
+
   const {projects} = useProjects();
   const project = projects.find(p => p.id === props.event.projectID);
   const resolvedModule: ModuleName = resolveSpanModule(
     props.span.sentry_tags?.op,
     props.span.sentry_tags?.category
   );
 
-  useLayoutEffect(() => {
-    if (!('op' in props.span)) {
-      return;
-    }
-  }, [props.span]);
-
   function renderTraversalButton(): React.ReactNode {
     if (!props.childTransactions) {
       // TODO: Amend size to use theme when we eventually refactor LoadingIndicator

static/app/views/performance/newTraceDetails/traceDrawer/details/missingInstrumentation.tsx

@@ -1,12 +1,17 @@
 import {useTheme} from '@emotion/react';
 
 import {Button} from 'sentry/components/button';
+import {TransactionToProfileButton} from 'sentry/components/profiling/transactionToProfileButton';
 import {IconSpan} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {getDuration} from 'sentry/utils/formatters';
+import useProjects from 'sentry/utils/useProjects';
+import {ProfilePreview} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/profiling/profilePreview';
 import type {TraceTreeNodeDetailsProps} from 'sentry/views/performance/newTraceDetails/traceDrawer/tabs/traceTreeNodeDetails';
 import {getTraceTabTitle} from 'sentry/views/performance/newTraceDetails/traceState/traceTabs';
 import {Row} from 'sentry/views/performance/traceDetails/styles';
+import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';
+import {ProfileContext, ProfilesProvider} from 'sentry/views/profiling/profilesProvider';
 
 import {
   makeTraceNodeBarColor,
@@ -19,9 +24,15 @@ export function MissingInstrumentationNodeDetails({
   node,
   onParentClick,
   onTabScrollToNode,
+  organization,
 }: TraceTreeNodeDetailsProps<MissingInstrumentationNode>) {
   const theme = useTheme();
+  const {projects} = useProjects();
+
   const parentTransaction = node.parent_transaction;
+  const event = node.previous.value.event || node.next.value.event || null;
+  const project = projects.find(proj => proj.slug === event?.projectSlug);
+  const profileId = event?.contexts?.profile?.profile_id ?? null;
 
   return (
     <TraceDrawerComponents.DetailContainer>
@@ -42,6 +53,25 @@ export function MissingInstrumentationNodeDetails({
           </Button>
         </TraceDrawerComponents.Actions>
       </TraceDrawerComponents.HeaderContainer>
+      {event.projectSlug ? (
+        <ProfilesProvider
+          orgSlug={organization.slug}
+          projectSlug={event.projectSlug}
+          profileId={profileId || ''}
+        >
+          <ProfileContext.Consumer>
+            {profiles => (
+              <ProfileGroupProvider
+                type="flamechart"
+                input={profiles?.type === 'resolved' ? profiles.data : null}
+                traceID={profileId || ''}
+              >
+                <ProfilePreview event={event} node={node} />
+              </ProfileGroupProvider>
+            )}
+          </ProfileContext.Consumer>
+        </ProfilesProvider>
+      ) : null}
       <TraceDrawerComponents.Table className="table key-value">
         <tbody>
           {parentTransaction ? (
@@ -53,9 +83,25 @@ export function MissingInstrumentationNodeDetails({
               </td>
             </Row>
           ) : null}
-          <Row title={t('Gap Duration')}>
+          <Row title={t('Duration')}>
             {getDuration(node.value.timestamp - node.value.start_timestamp, 2, true)}
           </Row>
+          {profileId && project?.slug && (
+            <Row
+              title="Profile ID"
+              extra={
+                <TransactionToProfileButton
+                  size="xs"
+                  projectSlug={project.slug}
+                  event={event}
+                >
+                  {t('View Profile')}
+                </TransactionToProfileButton>
+              }
+            >
+              {profileId}
+            </Row>
+          )}
           <Row title={t('Previous Span')}>
             {node.previous.value.op} - {node.previous.value.description}
           </Row>