feat(replay): Render an unstyled Replay Preview for Replay Issues

static/app/components/stream/group.tsx

@@ -311,7 +311,15 @@ function BaseGroupRow({
     [IssueCategory.ERROR]: t('Error Events'),
     [IssueCategory.PERFORMANCE]: t('Transaction Events'),
     [IssueCategory.PROFILE]: t('Profile Events'),
+    [IssueCategory.REPLAY]: t('Replay Events'),
   };
+  const hasIssueDetailsReplayEvent = organization.features?.includes(
+    'issue-details-replay-event'
+  );
+  if (!hasIssueDetailsReplayEvent) {
+    // @ts-expect-error: It's expected that the IssueCategory.REPLAY key exists. Delete it anyway
+    delete groupCategoryCountTitles[IssueCategory.REPLAY];
+  }
 
   const groupCount = !defined(primaryCount) ? (
     <Placeholder height="18px" />

static/app/types/group.tsx

@@ -52,6 +52,7 @@ export enum IssueCategory {
   PERFORMANCE = 'performance',
   ERROR = 'error',
   PROFILE = 'profile',
+  REPLAY = 'replay',
 }
 
 export enum IssueType {

static/app/utils/issueTypeConfig/index.tsx

@@ -3,6 +3,7 @@ import {IssueCategory, IssueType} from 'sentry/types';
 import errorConfig from 'sentry/utils/issueTypeConfig/errorConfig';
 import performanceConfig from 'sentry/utils/issueTypeConfig/performanceConfig';
 import profileConfig from 'sentry/utils/issueTypeConfig/profileConfig';
+import replayConfig from 'sentry/utils/issueTypeConfig/replayConfig';
 import {
   IssueCategoryConfigMapping,
   IssueTypeConfig,
@@ -40,6 +41,7 @@ const issueTypeConfig: Config = {
   [IssueCategory.ERROR]: errorConfig,
   [IssueCategory.PERFORMANCE]: performanceConfig,
   [IssueCategory.PROFILE]: profileConfig,
+  [IssueCategory.REPLAY]: replayConfig,
 };
 
 const eventOccurrenceTypeToIssueCategory = (eventOccurrenceType: number) => {

static/app/utils/issueTypeConfig/replayConfig.tsx

@@ -0,0 +1,22 @@
+import {IssueCategoryConfigMapping} from 'sentry/utils/issueTypeConfig/types';
+
+const errorConfig: IssueCategoryConfigMapping = {
+  _categoryDefaults: {
+    actions: {
+      delete: {enabled: true},
+      deleteAndDiscard: {enabled: true},
+      ignore: {enabled: true},
+      merge: {enabled: true},
+      share: {enabled: false},
+    },
+    attachments: {enabled: false},
+    grouping: {enabled: true},
+    mergedIssues: {enabled: true},
+    replays: {enabled: true},
+    similarIssues: {enabled: true},
+    userFeedback: {enabled: true},
+    usesIssuePlatform: true,
+  },
+};
+
+export default errorConfig;

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

@@ -26,6 +26,7 @@ import {Event, Group, IssueCategory, Project} from 'sentry/types';
 import {EntryType, EventTransaction} from 'sentry/types/event';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import ReplayIssueLoader from 'sentry/views/issueDetails/replayIssue/replayIssueLoader';
 import {ResourcesAndMaybeSolutions} from 'sentry/views/issueDetails/resourcesAndMaybeSolutions';
 
 type GroupEventDetailsContentProps = {
@@ -113,6 +114,9 @@ function GroupEventDetailsContent({
       {hasAnrImprovementsFeature && isANR && (
         <AnrRootCause event={event} organization={organization} />
       )}
+      {group.issueCategory === IssueCategory.REPLAY ? (
+        <ReplayIssueLoader organization={organization} {...eventEntryProps} />
+      ) : null}
       {group.issueCategory === IssueCategory.PERFORMANCE && (
         <SpanEvidenceSection
           event={event as EventTransaction}

static/app/views/issueDetails/replayIssue/replayIssueLoader.tsx

@@ -0,0 +1,45 @@
+import {useCallback} from 'react';
+
+import ErrorBoundary from 'sentry/components/errorBoundary';
+import LazyLoad from 'sentry/components/lazyLoad';
+import type {Event, Group, Organization, Project} from 'sentry/types';
+
+interface Props {
+  event: Event;
+  group: Group;
+  organization: Organization;
+  project: Project;
+}
+
+function ReplayIssueLoader({event, organization}: Props) {
+  const replayPreview = useCallback(
+    () => import('sentry/components/events/eventReplay/replayPreview'),
+    []
+  );
+
+  const hasReplay = organization.features?.includes('session-replay');
+  const hasIssueDetailsReplayEvent = organization.features?.includes(
+    'issue-details-replay-event'
+  );
+  if (!hasReplay || !hasIssueDetailsReplayEvent) {
+    return null;
+  }
+
+  const replayId = event.tags.find(({key}) => key === 'replayId')?.value;
+  if (!replayId) {
+    return null;
+  }
+
+  return (
+    <ErrorBoundary mini>
+      <LazyLoad
+        component={replayPreview}
+        event={event}
+        orgSlug={organization.slug}
+        replaySlug={replayId}
+      />
+    </ErrorBoundary>
+  );
+}
+
+export default ReplayIssueLoader;