feat(replays): Give users an informative message when loading Replay Preview fails (#44000)

If the replay fails to load for some reason we can show some reasons
why, in future we should expand on this by linking out the product docs.

| | Before | After |
| --- | --- | --- |
| Issue Details - error | <img width="882" alt="issues missing replay -
before"
src="https://user-images.githubusercontent.com/187460/226453106-5821e59e-2eb5-4939-be5f-21433cfb2214.png">
| <img width="881" alt="issues misisng replay - after"
src="https://user-images.githubusercontent.com/187460/226453103-616949c7-4c52-4ecb-81dc-1ea80f760676.png">
|
| Issue Details - preview | <img width="882" alt="preview - before"
src="https://user-images.githubusercontent.com/187460/226453108-041ae060-e616-4956-aa54-232393c1311c.png">
| <img width="880" alt="preview - after"
src="https://user-images.githubusercontent.com/187460/226453109-bcbeb66f-488d-4967-8bb8-c61f5623c620.png">
|


Fixes #43965
Fixes https://github.com/getsentry/sentry/issues/45841
Fixes https://github.com/getsentry/team-replay/issues/47

---------

Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>

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

@@ -3,12 +3,16 @@ import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/alert';
 import {Button} from 'sentry/components/button';
+import ExternalLink from 'sentry/components/links/externalLink';
+import List from 'sentry/components/list';
+import ListItem from 'sentry/components/list/listItem';
 import Placeholder from 'sentry/components/placeholder';
 import {Provider as ReplayContextProvider} from 'sentry/components/replays/replayContext';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
 import ReplaysFeatureBadge from 'sentry/components/replays/replaysFeatureBadge';
 import {relativeTimeInMs} from 'sentry/components/replays/utils';
-import {t} from 'sentry/locale';
+import {IconPlay} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Event} from 'sentry/types/event';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
@@ -45,9 +49,29 @@ function ReplayPreview({orgSlug, replaySlug, event}: Props) {
   }, [eventTimestamp, startTimestampMs]);
 
   if (fetchError) {
+    const reasons = [
+      t('The replay is still processing'),
+      t('The replay has been deleted by a member in your organization'),
+      t('There is an internal system error'),
+    ];
+
     return (
       <Alert type="info" showIcon data-test-id="replay-error">
-        {t('The replay associated with this event could not be found.')}
+        <p>
+          {tct(
+            'The replay for this event cannot be found. [link:Read the docs to understand why]. This could be due to these reasons:',
+            {
+              link: (
+                <ExternalLink href="https://docs.sentry.io/platforms/javascript/session-replay/#error-linking" />
+              ),
+            }
+          )}
+        </p>
+        <List symbol="bullet">
+          {reasons.map((reason, i) => (
+            <ListItem key={i}>{reason}</ListItem>
+          ))}
+        </List>
       </Alert>
     );
   }
@@ -82,7 +106,7 @@ function ReplayPreview({orgSlug, replaySlug, event}: Props) {
           <ReplayPlayer isPreview />
         </StaticPanel>
         <CTAOverlay>
-          <Button priority="primary" to={fullReplayUrl}>
+          <Button icon={<IconPlay />} priority="primary" to={fullReplayUrl}>
             {t('Open Replay')}
           </Button>
         </CTAOverlay>

static/app/views/replays/details.tsx

@@ -58,8 +58,9 @@ function ReplayDetails({
     }
 
     const reasons = [
-      t('The Replay is still processing and is on its way'),
-      t('There is an internal systems error or active issue'),
+      t('The replay is still processing'),
+      t('The replay has been deleted by a member in your organization'),
+      t('There is an internal systems error'),
     ];
     return (
       <Page orgSlug={orgSlug} replayRecord={replayRecord}>
@@ -70,7 +71,7 @@ function ReplayDetails({
             heading={t('There was an error while fetching this Replay')}
             message={
               <Fragment>
-                <p>{t('This could be due to a couple of reasons:')}</p>
+                <p>{t('This could be due to these reasons:')}</p>
                 <List symbol="bullet">
                   {reasons.map((reason, i) => (
                     <ListItem key={i}>{reason}</ListItem>