fix(issues/replay): if fetchError, don't render replayId in highlights (

#76619)

redo of #76316: 

instead of completely removing the replay ID from the event highlights,
we now do an extra check to see if there was a `fetchError` with this
replay ID (e.g. whether this ID is actually valid or not). if it's not
valid, then don't render the replay ID to avoid linking to an invalid
replay. the link will take you to a page like this:

<img width="1126" alt="SCR-20240827-kqxv"
src="https://github.com/user-attachments/assets/d5dc991f-e649-4ada-8a64-64db8fc94a50">

before: issue details replay processing error (blue banner shows up) but
the event highlights still contains the replay ID
<img width="880" alt="SCR-20240827-krda"
src="https://github.com/user-attachments/assets/c4a0cbd6-9143-4043-b3f2-0516704999dd">
<img width="897" alt="SCR-20240827-kqac"
src="https://github.com/user-attachments/assets/cb802d18-9dbf-47ee-99ab-dcd4baf5e2e0">


after: replayId is shown as `--` and no link
<img width="795" alt="SCR-20240827-kpwz"
src="https://github.com/user-attachments/assets/709d0c64-9779-4e4b-8641-49d1cc3359cb">

static/app/components/events/highlights/highlightsDataSection.spec.tsx

@@ -43,6 +43,11 @@ describe('HighlightsDataSection', function () {
       url: `/projects/${organization.slug}/${project.slug}/`,
       body: {...project, highlightTags: [], highlightContext: {}},
     });
+    const replayId = undefined;
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/replays/${replayId}/`,
+      body: {},
+    });
     render(
       <HighlightsDataSection
         event={event}
@@ -76,6 +81,12 @@ describe('HighlightsDataSection', function () {
       body: {...project, highlightTags, highlightContext},
     });
 
+    const replayId = undefined;
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/replays/${replayId}/`,
+      body: {},
+    });
+
     render(<HighlightsDataSection event={event} project={project} />, {
       organization,
     });

static/app/components/events/highlights/highlightsDataSection.tsx

@@ -30,6 +30,7 @@ import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import useReplayData from 'sentry/utils/replays/hooks/useReplayData';
 import theme from 'sentry/utils/theme';
 import {useDetailedProject} from 'sentry/utils/useDetailedProject';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
@@ -147,6 +148,39 @@ function HighlightsData({
     highlightContext,
     location,
   });
+  const highlightTagItems = getHighlightTagData({event, highlightTags});
+
+  // find the replayId from either context or tags, if it exists
+  const contextReplayItem = highlightContextDataItems.find(
+    e => e.data[0].key === 'replay_id'
+  );
+  const contextReplayId = contextReplayItem?.value ?? EMPTY_HIGHLIGHT_DEFAULT;
+
+  const tagReplayItem = highlightTagItems.find(e => e.originalTag.key === 'replayId');
+  const tagReplayId = tagReplayItem?.value ?? EMPTY_HIGHLIGHT_DEFAULT;
+
+  // if the id doesn't exist for either tag or context, it's rendered as '--'
+  const replayId =
+    contextReplayId !== EMPTY_HIGHLIGHT_DEFAULT
+      ? contextReplayId
+      : tagReplayId !== EMPTY_HIGHLIGHT_DEFAULT
+        ? tagReplayId
+        : undefined;
+
+  const {fetchError: replayFetchError} = useReplayData({
+    orgSlug: organization.slug,
+    replayId,
+  });
+
+  // if fetchError, replace the replayId so we don't link to an invalid replay
+  if (contextReplayItem && replayFetchError) {
+    contextReplayItem.value = EMPTY_HIGHLIGHT_DEFAULT;
+  }
+  if (tagReplayItem && replayFetchError) {
+    tagReplayItem.value = EMPTY_HIGHLIGHT_DEFAULT;
+    tagReplayItem.originalTag.value = EMPTY_HIGHLIGHT_DEFAULT;
+  }
+
   const highlightContextRows = highlightContextDataItems.reduce<React.ReactNode[]>(
     (rowList, {alias, data}, i) => {
       const meta = getContextMeta(event, alias);
@@ -165,7 +199,6 @@ function HighlightsData({
     []
   );
 
-  const highlightTagItems = getHighlightTagData({event, highlightTags});
   const highlightTagRows = highlightTagItems.map((content, i) => (
     <EventTagsTreeRow
       key={`highlight-tag-${i}`}

static/app/views/issueDetails/groupEventDetails/groupEventDetails.spec.tsx

@@ -198,13 +198,19 @@ const mockGroupApis = (
   project: Project,
   group: Group,
   event: Event,
+  replayId?: string,
   trace?: QuickTraceEvent
 ) => {
   MockApiClient.addMockResponse({
     url: `/organizations/${organization.slug}/issues/${group.id}/`,
     body: group,
   });
 
+  MockApiClient.addMockResponse({
+    url: `/organizations/${organization.slug}/replays/${replayId}/`,
+    body: {},
+  });
+
   MockApiClient.addMockResponse({
     url: `/projects/${organization.slug}/${project.slug}/issues/`,
     method: 'PUT',
@@ -642,6 +648,7 @@ describe('Platform Integrations', () => {
         props.project,
         props.group,
         props.event,
+        undefined,
         mockedTrace(props.project)
       );
 
@@ -660,10 +667,17 @@ describe('Platform Integrations', () => {
     it('does not render root issues section if related perf issues do not exist', async () => {
       const props = makeDefaultMockData();
       const trace = mockedTrace(props.project);
-      mockGroupApis(props.organization, props.project, props.group, props.event, {
-        ...trace,
-        performance_issues: [],
-      });
+      mockGroupApis(
+        props.organization,
+        props.project,
+        props.group,
+        props.event,
+        undefined,
+        {
+          ...trace,
+          performance_issues: [],
+        }
+      );
 
       render(<TestComponent group={props.group} event={props.event} />, {
         organization: props.organization,