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

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,