Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions static/app/components/stream/group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
1 change: 1 addition & 0 deletions static/app/types/group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export enum IssueCategory {
PERFORMANCE = 'performance',
ERROR = 'error',
PROFILE = 'profile',
REPLAY = 'replay',
}

export enum IssueType {
Expand Down
2 changes: 2 additions & 0 deletions static/app/utils/issueTypeConfig/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -40,6 +41,7 @@ const issueTypeConfig: Config = {
[IssueCategory.ERROR]: errorConfig,
[IssueCategory.PERFORMANCE]: performanceConfig,
[IssueCategory.PROFILE]: profileConfig,
[IssueCategory.REPLAY]: replayConfig,
};

const eventOccurrenceTypeToIssueCategory = (eventOccurrenceType: number) => {
Expand Down
22 changes: 22 additions & 0 deletions static/app/utils/issueTypeConfig/replayConfig.tsx
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm leaving most of these enabled, even though they might not work yet, so we can see them and fix them.

Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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}
Expand Down
45 changes: 45 additions & 0 deletions static/app/views/issueDetails/replayIssue/replayIssueLoader.tsx
Original file line number Diff line number Diff line change
@@ -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;