Skip to content

perf(replays): prefetch ai summary data in ReplayDetailsProviders #95761

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

perf(replays): prefetch ai summary data in ReplayDetailsProviders #95761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
920f3b5
perf(replays): prefetch ai summary data in ReplayDetailsProviders
aliu39 Jul 17, 2025
f9119e6
Renaming from reviews
aliu39 Jul 17, 2025
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
11 changes: 11 additions & 0 deletions static/app/components/replays/replayContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import useReplayHighlighting from 'sentry/components/replays/useReplayHighlighti
import {VideoReplayerWithInteractions} from 'sentry/components/replays/videoReplayerWithInteractions';
import {trackAnalytics} from 'sentry/utils/analytics';
import clamp from 'sentry/utils/number/clamp';
import type {useApiQuery} from 'sentry/utils/queryClient';
import type useInitialOffsetMs from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
import useTouchEventsCheck from 'sentry/utils/replays/playback/hooks/useTouchEventsCheck';
import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
Expand All @@ -18,6 +19,7 @@ import usePrevious from 'sentry/utils/usePrevious';
import useProjectFromId from 'sentry/utils/useProjectFromId';
import useRAF from 'sentry/utils/useRAF';
import {useUser} from 'sentry/utils/useUser';
import type {SummaryResponse} from 'sentry/views/replays/detail/ai/useFetchReplaySummary';

import {CanvasReplayerPlugin} from './canvasReplayerPlugin';

Expand Down Expand Up @@ -93,6 +95,10 @@ interface ReplayPlayerContextProps extends HighlightCallbacks {
*/
replay: ReplayReader | null;

replaySummary: {
apiQueryResult?: ReturnType<typeof useApiQuery<SummaryResponse>>;
};

/**
* Restart the replay
*/
Expand Down Expand Up @@ -120,6 +126,7 @@ interface ReplayPlayerContextProps extends HighlightCallbacks {
}

const ReplayPlayerContext = createContext<ReplayPlayerContextProps>({
replaySummary: {},
analyticsContext: '',
clearAllHighlights: () => {},
currentTime: 0,
Expand Down Expand Up @@ -167,6 +174,8 @@ type Props = {
*/
initialTimeOffsetMs?: ReturnType<typeof useInitialOffsetMs>;

replaySummaryQueryResult?: ReturnType<typeof useApiQuery<SummaryResponse>>;

/**
* Override return fields for testing
*/
Expand All @@ -186,6 +195,7 @@ export function Provider({
isFetching,
replay,
autoStart,
replaySummaryQueryResult,
value = {},
}: Props) {
const user = useUser();
Expand Down Expand Up @@ -604,6 +614,7 @@ export function Provider({
<ReplayCurrentTimeContextProvider>
<ReplayPlayerContext
value={{
replaySummary: {apiQueryResult: replaySummaryQueryResult},
Copy link
Member

Choose a reason for hiding this comment

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

why wrap the result in apiQueryResult?

Copy link
Member Author

Choose a reason for hiding this comment

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

in case we want to extend this context with other fields later

analyticsContext,
clearAllHighlights,
currentTime,
Expand Down
92 changes: 46 additions & 46 deletions static/app/views/replays/detail/ai/ai.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import {ChapterList} from 'sentry/views/replays/detail/ai/chapterList';
import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
import TabItemContainer from 'sentry/views/replays/detail/tabItemContainer';

import {useFetchReplaySummary} from './useFetchReplaySummary';

export default function Ai() {
return (
<PaddedFluidHeight>
Expand All @@ -33,60 +31,20 @@ export default function Ai() {

function AiContent() {
const organization = useOrganization();
const {replay} = useReplayContext();
const {replay, replaySummary} = useReplayContext(); // Data is queried in ReplayDetailsProviders.
const replayRecord = replay?.getReplay();
const project = useProjectFromId({project_id: replayRecord?.project_id});
const {
data: summaryData,
isPending,
isError,
isRefetching,
refetch,
} = useFetchReplaySummary({
staleTime: 0,
enabled: Boolean(
replayRecord?.id &&
project?.slug &&
organization.features.includes('replay-ai-summaries') &&
organization.features.includes('gen-ai-features')
),
retry: false,
});

const openForm = useFeedbackForm();

const feedbackButton = ({type}: {type: 'positive' | 'negative'}) => {
return openForm ? (
<Button
aria-label={t('Give feedback on the AI summary section')}
icon={<IconThumb direction={type === 'positive' ? 'up' : 'down'} />}
title={type === 'positive' ? t('I like this') : t(`I don't like this`)}
size={'xs'}
onClick={() =>
openForm({
messagePlaceholder:
type === 'positive'
? t('What did you like about the AI summary and chapters?')
: t('How can we make the AI summary and chapters work better for you?'),
tags: {
['feedback.source']: 'replay_ai_summary',
['feedback.owner']: 'replay',
['feedback.type']: type,
},
})
}
/>
) : null;
};

if (
!organization.features.includes('replay-ai-summaries') ||
!organization.features.includes('gen-ai-features')
) {
return (
<SummaryContainer>
<Alert type="info">
{t('Replay AI summary is not available for this organization.')}
{t('Replay summary is not available for this organization.')}
</Alert>
</SummaryContainer>
);
Expand All @@ -95,11 +53,27 @@ function AiContent() {
if (replayRecord?.project_id && !project) {
return (
<SummaryContainer>
<Alert type="error">{t('Project not found. Unable to load AI summary.')}</Alert>
<Alert type="error">{t('Project not found. Unable to load summary.')}</Alert>
</SummaryContainer>
);
}

if (!replaySummary.apiQueryResult) {
return (
<SummaryContainer>
<Alert type="error">{t('Unable to load summary.')}</Alert>
</SummaryContainer>
);
}

const {
data: summaryData,
isPending,
isError,
isRefetching,
refetch,
} = replaySummary.apiQueryResult;

if (isPending || isRefetching) {
return (
<LoadingContainer>
Expand All @@ -111,7 +85,7 @@ function AiContent() {
if (isError) {
return (
<SummaryContainer>
<Alert type="error">{t('Failed to load AI summary')}</Alert>
<Alert type="error">{t('Failed to load summary')}</Alert>
</SummaryContainer>
);
}
Expand All @@ -124,6 +98,32 @@ function AiContent() {
);
}

const feedbackButton = ({type}: {type: 'positive' | 'negative'}) => {
return openForm ? (
<Button
aria-label={t('Give feedback on the summary section')}
icon={<IconThumb direction={type === 'positive' ? 'up' : 'down'} />}
title={type === 'positive' ? t('I like this') : t(`I don't like this`)}
size={'xs'}
onClick={() =>
openForm({
messagePlaceholder:
type === 'positive'
? t('What did you like about the replay summary and chapters?')
: t(
'How can we make the replay summary and chapters work better for you?'
),
tags: {
['feedback.source']: 'replay_ai_summary',
['feedback.owner']: 'replay',
['feedback.type']: type,
},
})
}
/>
) : null;
};

return (
<ErrorBoundary mini>
<SplitContainer>
Expand Down
13 changes: 13 additions & 0 deletions static/app/views/replays/detail/body/replayDetailsProviders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {ReplayPreferencesContextProvider} from 'sentry/utils/replays/playback/pr
import {ReplayReaderProvider} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
import type ReplayReader from 'sentry/utils/replays/replayReader';
import useOrganization from 'sentry/utils/useOrganization';
import {useFetchReplaySummary} from 'sentry/views/replays/detail/ai/useFetchReplaySummary';
import ReplayTransactionContext from 'sentry/views/replays/detail/trace/replayTransactionContext';

interface Props {
Expand Down Expand Up @@ -40,6 +41,17 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:

useLogReplayDataLoaded({projectId: replayRecord.project_id, replay});

const replaySummaryQueryResult = useFetchReplaySummary({
staleTime: 0,
enabled: Boolean(
replayRecord?.id &&
projectSlug &&
organization.features.includes('replay-ai-summaries') &&
organization.features.includes('gen-ai-features')
),
retry: false,
});

return (
<ReplayPreferencesContextProvider prefsStrategy={LocalStorageReplayPreferences}>
<ReplayPlayerPluginsContextProvider>
Expand All @@ -51,6 +63,7 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:
initialTimeOffsetMs={initialTimeOffsetMs}
isFetching={false}
replay={replay}
replaySummaryQueryResult={replaySummaryQueryResult}
>
<ReplayTransactionContext replayRecord={replayRecord}>
{children}
Expand Down
Loading