feat(replay): add feedback message to breadcrumb (#95513)

closes
https://linear.app/getsentry/issue/REPLAY-508/show-feedback-message-in-feedback-breadcrumb

<img width="677" height="341" alt="SCR-20250714-pqtd"
src="https://github.com/user-attachments/assets/81e36a38-b8de-414e-b325-d34419d76a77"
/>

with multiple feedbacks in 1 replay:
<img width="591" height="486" alt="SCR-20250715-jmwj"
src="https://github.com/user-attachments/assets/c2f52596-4c1e-4980-9936-6460801ba67c"
/>

Author: michellewzhang

static/app/utils/replays/getFrameDetails.tsx

@@ -97,7 +97,7 @@ const MAPPER_FOR_FRAME: Record<string, (frame: any) => Details> = {
   }),
   feedback: (frame: FeedbackFrame) => ({
     colorGraphicsToken: 'promotion',
-    description: frame.data.projectSlug,
+    description: frame.message,
     tabKey: TabKey.BREADCRUMBS,
     title: defaultTitle(frame),
     icon: <IconMegaphone size="xs" />,
@@ -473,7 +473,7 @@ export function defaultTitle(frame: ReplayFrame | RawBreadcrumbFrame) {
   if (
     'message' in frame &&
     typeof frame.message === 'string' &&
-    frame.message.includes('User Feedback')
+    frame.category === 'feedback'
   ) {
     return t('User Feedback');
   }

static/app/utils/replays/hooks/useFeedbackEvents.tsx

@@ -0,0 +1,35 @@
+import type {FeedbackEvent} from 'sentry/utils/feedback/types';
+import {useApiQueries} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export default function useFeedbackEvents({
+  feedbackEventIds,
+  projectId,
+}: {
+  feedbackEventIds: string[];
+  projectId: string | undefined | null;
+}) {
+  const organization = useOrganization();
+
+  const feedbackEventQuery = useApiQueries<FeedbackEvent>(
+    feedbackEventIds.map((feedbackEventId: string) => [
+      `/projects/${organization.slug}/${projectId}/events/${feedbackEventId}/`,
+    ]),
+    {
+      staleTime: Infinity,
+      enabled: Boolean(feedbackEventIds.length > 0 && projectId),
+    }
+  );
+
+  const feedbackEvents = feedbackEventQuery
+    .map(query => query.data)
+    .filter(e => e !== undefined);
+  const isPending = feedbackEventQuery.some(query => query.isPending);
+  const isError = feedbackEventQuery.some(query => query.isError);
+
+  return {
+    feedbackEvents,
+    isPending,
+    isError,
+  };
+}

static/app/utils/replays/hooks/useLoadReplayReader.tsx

@@ -29,11 +29,19 @@ export default function useLoadReplayReader({
 }: Props): ReplayReaderResult {
   const replayId = parseReplayId(replaySlug);
 
-  const {attachments, errors, replayRecord, status, isError, isPending, ...replayData} =
-    useReplayData({
-      orgSlug,
-      replayId,
-    });
+  const {
+    attachments,
+    errors,
+    feedbackEvents,
+    replayRecord,
+    status,
+    isError,
+    isPending,
+    ...replayData
+  } = useReplayData({
+    orgSlug,
+    replayId,
+  });
 
   // get first error matching our group
   const firstMatchingError = useMemo(
@@ -63,6 +71,7 @@ export default function useLoadReplayReader({
           attachments,
           clipWindow: memoizedClipWindow,
           errors,
+          feedbackEvents,
           fetching: isPending,
           replayRecord,
           eventTimestampMs,
@@ -71,6 +80,7 @@ export default function useLoadReplayReader({
     attachments,
     memoizedClipWindow,
     errors,
+    feedbackEvents,
     isPending,
     replayRecord,
     eventTimestampMs,
@@ -80,6 +90,7 @@ export default function useLoadReplayReader({
     ...replayData,
     attachments,
     errors,
+    feedbackEvents,
     isError,
     isPending,
     replay,

static/app/utils/replays/hooks/useReplayData.spec.tsx

@@ -16,6 +16,7 @@ import ProjectsStore from 'sentry/stores/projectsStore';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {QueryClientProvider} from 'sentry/utils/queryClient';
 import useReplayData from 'sentry/utils/replays/hooks/useReplayData';
+import {OrganizationContext} from 'sentry/views/organizationContext';
 import type {HydratedReplayRecord} from 'sentry/views/replays/types';
 
 const {organization, project} = initializeOrg();
@@ -29,7 +30,11 @@ function wrapper({children}: {children?: ReactNode}) {
 
   queryClient.invalidateQueries = mockInvalidateQueries;
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <OrganizationContext value={organization}>{children}</OrganizationContext>
+    </QueryClientProvider>
+  );
 }
 
 function getMockReplayRecord(replayRecord?: Partial<HydratedReplayRecord>) {
@@ -96,6 +101,7 @@ describe('useReplayData', () => {
       expect(result.current).toEqual({
         attachments: expect.any(Array),
         errors: expect.any(Array),
+        feedbackEvents: expect.any(Array),
         fetchError: undefined,
         isError: false,
         isPending: false,
@@ -455,6 +461,7 @@ describe('useReplayData', () => {
     const expectedReplayData = {
       attachments: [],
       errors: [],
+      feedbackEvents: [],
       fetchError: undefined,
       isError: true,
       isPending: true,

static/app/utils/replays/hooks/useReplayData.tsx

@@ -4,9 +4,11 @@ import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import useFetchParallelPages from 'sentry/utils/api/useFetchParallelPages';
 import useFetchSequentialPages from 'sentry/utils/api/useFetchSequentialPages';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import type {FeedbackEvent} from 'sentry/utils/feedback/types';
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import useFeedbackEvents from 'sentry/utils/replays/hooks/useFeedbackEvents';
 import {useReplayProjectSlug} from 'sentry/utils/replays/hooks/useReplayProjectSlug';
 import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
 import type RequestError from 'sentry/utils/requestError/requestError';
@@ -47,6 +49,7 @@ interface Result {
   projectSlug: string | null;
   replayRecord: ReplayRecord | undefined;
   status: 'pending' | 'error' | 'success';
+  feedbackEvents?: FeedbackEvent[];
 }
 
 /**
@@ -241,6 +244,28 @@ function useReplayData({
     });
   }, [orgSlug, replayId, projectSlug, queryClient]);
 
+  const {allErrors, feedbackEventIds} = useMemo(() => {
+    const errors = errorPages
+      .concat(extraErrorPages)
+      .concat(platformErrorPages)
+      .flatMap(page => page.data);
+
+    const feedbackIds = errors
+      ?.filter(error => error?.title.includes('User Feedback'))
+      .map(error => error.id);
+
+    return {allErrors: errors, feedbackEventIds: feedbackIds};
+  }, [errorPages, extraErrorPages, platformErrorPages]);
+
+  const {
+    feedbackEvents,
+    isPending: feedbackEventsPending,
+    isError: feedbackEventsError,
+  } = useFeedbackEvents({
+    feedbackEventIds: feedbackEventIds ?? [],
+    projectId: replayRecord?.project_id,
+  });
+
   const allStatuses = [
     enableReplayRecord ? fetchReplayStatus : undefined,
     enableAttachments ? fetchAttachmentsStatus : undefined,
@@ -249,20 +274,17 @@ function useReplayData({
     fetchPlatformErrorsStatus,
   ];
 
-  const isError = allStatuses.includes('error');
-  const isPending = allStatuses.includes('pending');
+  const isError = allStatuses.includes('error') || feedbackEventsError;
+  const isPending = allStatuses.includes('pending') || feedbackEventsPending;
   const status = isError ? 'error' : isPending ? 'pending' : 'success';
 
   return useMemo(() => {
-    const allErrors = errorPages
-      .concat(extraErrorPages)
-      .concat(platformErrorPages)
-      .flatMap(page => page.data);
     return {
       attachments: attachmentPages.flat(2),
       errors: allErrors,
       fetchError: fetchReplayError ?? undefined,
       attachmentError: fetchAttachmentsError ?? undefined,
+      feedbackEvents,
       isError,
       isPending,
       status,
@@ -271,18 +293,17 @@ function useReplayData({
       replayRecord,
     };
   }, [
-    errorPages,
-    extraErrorPages,
-    platformErrorPages,
     attachmentPages,
     fetchReplayError,
     fetchAttachmentsError,
+    feedbackEvents,
     isError,
     isPending,
     status,
     clearQueryCache,
     projectSlug,
     replayRecord,
+    allErrors,
   ]);
 }
 

static/app/utils/replays/hydrateErrors.tsx

@@ -4,6 +4,7 @@ import invariant from 'invariant';
 import {defined} from 'sentry/utils';
 import toArray from 'sentry/utils/array/toArray';
 import isValidDate from 'sentry/utils/date/isValidDate';
+import type {FeedbackEvent} from 'sentry/utils/feedback/types';
 import type {
   BreadcrumbFrame,
   ErrorFrame,
@@ -13,7 +14,8 @@ import type {HydratedReplayRecord} from 'sentry/views/replays/types';
 
 export default function hydrateErrors(
   replayRecord: HydratedReplayRecord,
-  errors: RawReplayError[]
+  errors: RawReplayError[],
+  feedbackEvents?: FeedbackEvent[]
 ): {errorFrames: ErrorFrame[]; feedbackFrames: BreadcrumbFrame[]} {
   const startTimestampMs = replayRecord.started_at.getTime();
 
@@ -39,7 +41,9 @@ export default function hydrateErrors(
             labels: toArray(e['error.type']).filter(Boolean),
             projectSlug: e['project.name'],
           },
-          message: e.title,
+          message:
+            feedbackEvents?.find(event => event.id === e.id)?.contexts.feedback
+              ?.message ?? e.title,
           offsetMs: Math.abs(time.getTime() - startTimestampMs),
           timestamp: time,
           timestampMs: time.getTime(),

static/app/utils/replays/replayReader.tsx

@@ -5,6 +5,7 @@ import {type Duration, duration} from 'moment-timezone';
 
 import {defined} from 'sentry/utils';
 import {domId} from 'sentry/utils/domId';
+import type {FeedbackEvent} from 'sentry/utils/feedback/types';
 import localStorageWrapper from 'sentry/utils/localStorage';
 import clamp from 'sentry/utils/number/clamp';
 import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
@@ -86,11 +87,16 @@ interface ReplayReaderParams {
    * If provided, the replay will be clipped to this window.
    */
   clipWindow?: ClipWindow;
+
   /**
    * Relates to the setting of the clip window. If the event timestamp is before the replay started,
    * the clip window will be set to the start of the replay.
    */
   eventTimestampMs?: number;
+  /**
+   * Feedbacks in this replay
+   */
+  feedbackEvents?: FeedbackEvent[];
 }
 
 type RequiredNotNull<T> = {
@@ -159,6 +165,7 @@ export default class ReplayReader {
   static factory({
     attachments,
     errors,
+    feedbackEvents,
     replayRecord,
     clipWindow,
     fetching,
@@ -172,6 +179,7 @@ export default class ReplayReader {
       return new ReplayReader({
         attachments,
         errors,
+        feedbackEvents,
         replayRecord,
         fetching,
         clipWindow,
@@ -187,6 +195,7 @@ export default class ReplayReader {
       return new ReplayReader({
         attachments: [],
         errors: [],
+        feedbackEvents,
         fetching,
         replayRecord,
         clipWindow,
@@ -198,6 +207,7 @@ export default class ReplayReader {
   private constructor({
     attachments,
     errors,
+    feedbackEvents,
     fetching,
     replayRecord,
     clipWindow,
@@ -248,7 +258,11 @@ export default class ReplayReader {
     this._replayRecord = replayRecord;
     // Errors don't need to be sorted here, they will be merged with breadcrumbs
     // and spans in the getter and then sorted together.
-    const {errorFrames, feedbackFrames} = hydrateErrors(replayRecord, errors);
+    const {errorFrames, feedbackFrames} = hydrateErrors(
+      replayRecord,
+      errors,
+      feedbackEvents
+    );
     this._errors = errorFrames.sort(sortFrames);
     // RRWeb Events are not sorted here, they are fetched in sorted order.
     this._sortedRRWebEvents = rrwebFrames;