fix(replay): fix replay missing banner analytic (#83332)

prevent the replay missing banner analytic from being sent multiple
times

Author: michellewzhang

static/app/components/events/eventReplay/replayClipPreviewPlayer.tsx

@@ -1,3 +1,4 @@
+import {useEffect} from 'react';
 import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/alert';
@@ -79,6 +80,15 @@ function ReplayClipPreviewPlayer({
   });
   const organization = useOrganization();
 
+  useEffect(() => {
+    if (replayReaderResult.fetchError) {
+      trackAnalytics('replay.render-missing-replay-alert', {
+        organization,
+        surface: 'issue details - clip preview',
+      });
+    }
+  }, [organization, replayReaderResult.fetchError]);
+
   if (replayReaderResult.replayRecord?.is_archived) {
     return (
       <Alert type="warning" data-test-id="replay-error">
@@ -91,10 +101,6 @@ function ReplayClipPreviewPlayer({
   }
 
   if (replayReaderResult.fetchError) {
-    trackAnalytics('replay.render-missing-replay-alert', {
-      organization,
-      surface: 'issue details - clip preview',
-    });
     return <MissingReplayAlert orgSlug={orgSlug} />;
   }
 

static/app/components/events/eventReplay/replayPreview.tsx

@@ -1,5 +1,5 @@
 import type {ComponentProps} from 'react';
-import {useMemo} from 'react';
+import {useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/alert';
@@ -79,6 +79,15 @@ function ReplayPreview({
     event_replay_status: getReplayAnalyticsStatus({fetchError, replayRecord}),
   });
 
+  useEffect(() => {
+    if (fetchError) {
+      trackAnalytics('replay.render-missing-replay-alert', {
+        organization,
+        surface: 'issue details - old preview',
+      });
+    }
+  }, [organization, fetchError]);
+
   if (replayRecord?.is_archived) {
     return (
       <Alert type="warning" data-test-id="replay-error">
@@ -91,10 +100,6 @@ function ReplayPreview({
   }
 
   if (fetchError) {
-    trackAnalytics('replay.render-missing-replay-alert', {
-      organization,
-      surface: 'issue details - old preview',
-    });
     return <MissingReplayAlert orgSlug={orgSlug} />;
   }