feat(replay): Add feedback breadcrumb to replay (#9495)

Add feedback breadcrumb to replay when a feedback is sent (and if
replays are enabled).

Author: billyvg

packages/replay/src/coreHandlers/handleGlobalEvent.ts

@@ -2,9 +2,10 @@ import type { Event, EventHint } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
-import { isErrorEvent, isReplayEvent, isTransactionEvent } from '../util/eventUtils';
+import { isErrorEvent, isFeedbackEvent, isReplayEvent, isTransactionEvent } from '../util/eventUtils';
 import { isRrwebError } from '../util/isRrwebError';
 import { handleAfterSendEvent } from './handleAfterSendEvent';
+import { addFeedbackBreadcrumb } from './util/addFeedbackBreadcrumb';
 import { shouldSampleForBufferEvent } from './util/shouldSampleForBufferEvent';
 
 /**
@@ -30,8 +31,8 @@ export function handleGlobalEventListener(
         return event;
       }
 
-      // We only want to handle errors & transactions, nothing else
-      if (!isErrorEvent(event) && !isTransactionEvent(event)) {
+      // We only want to handle errors, transactions, and feedbacks, nothing else
+      if (!isErrorEvent(event) && !isTransactionEvent(event) && !isFeedbackEvent(event)) {
         return event;
       }
 
@@ -41,6 +42,12 @@ export function handleGlobalEventListener(
         return event;
       }
 
+      if (isFeedbackEvent(event)) {
+        // Add a replay breadcrumb for this piece of feedback
+        addFeedbackBreadcrumb(replay, event);
+        return event;
+      }
+
       // Unless `captureExceptions` is enabled, we want to ignore errors coming from rrweb
       // As there can be a bunch of stuff going wrong in internals there, that we don't want to bubble up to users
       if (isRrwebError(event, hint) && !replay.getOptions()._experiments.captureExceptions) {

packages/replay/src/coreHandlers/util/addFeedbackBreadcrumb.ts

@@ -0,0 +1,35 @@
+import { EventType } from '@sentry-internal/rrweb';
+import type { FeedbackEvent } from '@sentry/types';
+
+import type { ReplayContainer } from '../../types';
+
+/**
+ * Add a feedback breadcrumb event to replay.
+ */
+export function addFeedbackBreadcrumb(replay: ReplayContainer, event: FeedbackEvent): void {
+  replay.triggerUserActivity();
+  replay.addUpdate(() => {
+    if (!event.timestamp) {
+      // Ignore events that don't have timestamps (this shouldn't happen, more of a typing issue)
+      // Return true here so that we don't flush
+      return true;
+    }
+
+    void replay.throttledAddEvent({
+      type: EventType.Custom,
+      timestamp: event.timestamp * 1000,
+      data: {
+        timestamp: event.timestamp,
+        tag: 'breadcrumb',
+        payload: {
+          category: 'sentry.feedback',
+          data: {
+            feedbackId: event.event_id,
+          },
+        },
+      },
+    });
+
+    return false;
+  });
+}

packages/replay/src/types/replayFrame.ts

@@ -126,6 +126,15 @@ interface ReplayOptionFrame {
   useCompressionOption: boolean;
 }
 
+interface ReplayFeedbackFrameData {
+  feedback_id: string;
+}
+
+interface ReplayFeedbackFrame extends ReplayBaseBreadcrumbFrame {
+  category: 'sentry.feedback';
+  data: ReplayFeedbackFrameData;
+}
+
 export type ReplayBreadcrumbFrame =
   | ReplayConsoleFrame
   | ReplayClickFrame
@@ -136,6 +145,7 @@ export type ReplayBreadcrumbFrame =
   | ReplaySlowClickFrame
   | ReplayMultiClickFrame
   | ReplayMutationFrame
+  | ReplayFeedbackFrame
   | ReplayBaseBreadcrumbFrame;
 
 interface ReplayBaseSpanFrame {

packages/replay/src/util/eventUtils.ts

@@ -1,4 +1,4 @@
-import type { ErrorEvent, Event, ReplayEvent, TransactionEvent } from '@sentry/types';
+import type { ErrorEvent, Event, FeedbackEvent, ReplayEvent, TransactionEvent } from '@sentry/types';
 
 /** If the event is an error event */
 export function isErrorEvent(event: Event): event is ErrorEvent {
@@ -14,3 +14,8 @@ export function isTransactionEvent(event: Event): event is TransactionEvent {
 export function isReplayEvent(event: Event): event is ReplayEvent {
   return event.type === 'replay_event';
 }
+
+/** If the event is a feedback event */
+export function isFeedbackEvent(event: Event): event is FeedbackEvent {
+  return event.type === 'feedback';
+}