feat(feedback): Auto start buffering replays if enabled and flush on form open

* By default (can be disabled), if replay integration exists, start buffering
* Flush replay when the feedback form is first opened instead of at submit time

We are making this change because we have noticed a lot of feedback replays only consist of the user submitting the feedback and not what they did prior to submitting feedback. This may result in false positives if users open but do not submit feedback, but this should make replays from feedback more useful.

Author: billyvg

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/init.js renamed to dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/hasSampling/init.js

@@ -1,15 +1,16 @@
 import { expect } from '@playwright/test';
 
-import { sentryTest } from '../../../utils/fixtures';
-import { envelopeRequestParser, getEnvelopeType } from '../../../utils/helpers';
-import { getCustomRecordingEvents, getReplayEvent, waitForReplayRequest } from '../../../utils/replayHelpers';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, getEnvelopeType } from '../../../../utils/helpers';
+import { getCustomRecordingEvents, getReplayEvent, waitForReplayRequest } from '../../../../utils/replayHelpers';
 
 sentryTest('should capture feedback (@sentry-internal/feedback import)', async ({ getLocalTestPath, page }) => {
   if (process.env.PW_BUNDLE) {
     sentryTest.skip();
   }
 
   const reqPromise0 = waitForReplayRequest(page, 0);
+  const reqPromise1 = waitForReplayRequest(page, 1);
   const feedbackRequestPromise = page.waitForResponse(res => {
     const req = res.request();
 
@@ -35,18 +36,23 @@ sentryTest('should capture feedback (@sentry-internal/feedback import)', async (
 
   const url = await getLocalTestPath({ testDir: __dirname });
 
-  await page.goto(url);
-  await page.getByText('Report a Bug').click();
+  await Promise.all([
+    page.goto(url),
+    page.getByText('Report a Bug').click(),
+  ]);
+
   await page.locator('[name="name"]').fill('Jane Doe');
   await page.locator('[name="email"]').fill('[email protected]');
   await page.locator('[name="message"]').fill('my example feedback');
   await page.getByLabel('Send Bug Report').click();
 
-  const [feedbackResp, replayReq] = await Promise.all([feedbackRequestPromise, reqPromise0]);
+  const [feedbackResp, replayReq1, replayReq2] = await Promise.all([feedbackRequestPromise, reqPromise0, reqPromise1]);
 
   const feedbackEvent = envelopeRequestParser(feedbackResp.request());
-  const replayEvent = getReplayEvent(replayReq);
-  const { breadcrumbs } = getCustomRecordingEvents(replayReq);
+  const replayEvent = getReplayEvent(replayReq1);
+  // Feedback breadcrumb is on second segment because we flush when "Report a Bug" is clicked
+  // And then the breadcrumb is sent when feedback form is submitted
+  const { breadcrumbs } = getCustomRecordingEvents(replayReq2);
 
   expect(breadcrumbs).toEqual(
     expect.arrayContaining([

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/test.ts renamed to dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/hasSampling/test.ts

@@ -0,0 +1,18 @@
+import { Feedback } from '@sentry-internal/feedback';
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  replaysOnErrorSampleRate: 0,
+  replaysSessionSampleRate: 0,
+  integrations: [
+    new Sentry.Replay({
+      flushMinDelay: 200,
+      flushMaxDelay: 200,
+      minReplayDuration: 0,
+    }),
+    new Feedback(),
+  ],
+});

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/noSampling/init.js

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, getEnvelopeType } from '../../../../utils/helpers';
+import { getCustomRecordingEvents, getReplayEvent, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+sentryTest('should capture feedback with no replay sampling when Form opens (@sentry-internal/feedback import)', async ({ getLocalTestPath, page }) => {
+  if (process.env.PW_BUNDLE) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const [,,replayReq] = await Promise.all([page.goto(url), page.getByText('Report a Bug').click(), reqPromise0]);
+
+  const replayEvent = getReplayEvent(replayReq);
+  expect(replayEvent.segment_id).toBe(0);
+  expect(replayEvent.replay_type).toBe('buffer');
+});

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/noSampling/test.ts

@@ -1,4 +1,4 @@
-import type { Integration, IntegrationFn } from '@sentry/types';
+import type { BaseTransportOptions, Client, ClientOptions, Integration, IntegrationFn } from '@sentry/types';
 import { isBrowser, logger } from '@sentry/utils';
 
 import {
@@ -79,17 +79,18 @@ export class Feedback implements Integration {
   private _hasInsertedActorStyles: boolean;
 
   public constructor({
+    autoInject = true,
     id = 'sentry-feedback',
+    includeReplay = true,
+    isEmailRequired = false,
+    isNameRequired = false,
     showBranding = true,
-    autoInject = true,
     showEmail = true,
     showName = true,
     useSentryUser = {
       email: 'email',
       name: 'username',
     },
-    isEmailRequired = false,
-    isNameRequired = false,
 
     themeDark,
     themeLight,
@@ -123,9 +124,10 @@ export class Feedback implements Integration {
     this._hasInsertedActorStyles = false;
 
     this.options = {
-      id,
-      showBranding,
       autoInject,
+      showBranding,
+      id,
+      includeReplay,
       isEmailRequired,
       isNameRequired,
       showEmail,
@@ -185,6 +187,31 @@ export class Feedback implements Integration {
     }
   }
 
+  /**
+   * Hook that is called after all integrations is setup. This is used to
+   * integrate with the Replay integration to save a replay when Feedback modal
+   * is opened.
+   */
+  public afterAllSetup(client: Client<ClientOptions<BaseTransportOptions>>): void {
+    if (!this.options.includeReplay) {
+      return;
+    }
+
+    const replay = client.getIntegrationByName!('Replay');
+
+    if (!replay) {
+      return;
+    }
+
+    try {
+      // @ts-expect-error Not sure how best to type this w/o
+      // making @sentry/replay a dep
+      replay.startBuffering();
+    } catch (err) {
+      DEBUG_BUILD && logger.error(err);
+    }
+  }
+
   /**
    * Allows user to open the dialog box. Creates a new widget if
    * `autoInject` was false, otherwise re-uses the default widget that was

packages/feedback/src/integration.ts

@@ -72,6 +72,11 @@ export interface FeedbackGeneralConfiguration {
    */
   showName: boolean;
 
+  /**
+   * Should Feedback attempt to include a Session Replay if the integration is installed?
+   */
+  includeReplay: boolean;
+
   /**
    * Fill in email/name input fields with Sentry user context if it exists.
    * The value of the email/name keys represent the properties of your user context.

packages/feedback/src/types/index.ts

@@ -1,4 +1,4 @@
-import { getCurrentScope } from '@sentry/core';
+import { getClient, getCurrentScope } from '@sentry/core';
 import { logger } from '@sentry/utils';
 
 import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
@@ -9,6 +9,8 @@ import type { DialogComponent } from './Dialog';
 import { Dialog } from './Dialog';
 import { SuccessMessage } from './SuccessMessage';
 
+import { DEBUG_BUILD } from '../debug-build';
+
 interface CreateWidgetParams {
   /**
    * Shadow DOM to append to
@@ -124,6 +126,27 @@ export function createWidget({
     }
   }
 
+  /**
+   * Internal handler when dialog is opened
+   */
+  function handleOpenDialog({includeReplay}: {includeReplay?: boolean} = {}) {
+    // Flush replay if it exists
+    if (includeReplay) {
+      const client = getClient();
+      const replay = client && client.getIntegrationByName!('Replay');
+      if (!replay) {
+        return;
+      }
+      try {
+      // @ts-expect-error Not sure how best to type this w/o
+      // making @sentry/replay a dep
+        void replay.flush();
+      } catch (err) {
+        DEBUG_BUILD && logger.error(err);
+      }
+    }
+  }
+
   /**
    * Displays the default actor
    */
@@ -156,6 +179,7 @@ export function createWidget({
         if (options.onFormOpen) {
           options.onFormOpen();
         }
+        handleOpenDialog({includeReplay: options.includeReplay});
         return;
       }
 
@@ -208,6 +232,7 @@ export function createWidget({
       if (options.onFormOpen) {
         options.onFormOpen();
       }
+      handleOpenDialog({includeReplay: options.includeReplay});
     } catch (err) {
       // TODO: Error handling?
       logger.error(err);

packages/feedback/src/widget/createWidget.ts

@@ -59,8 +59,6 @@ export function addGlobalListeners(replay: ReplayContainer): void {
       const replayId = replay.getSessionId();
       if (options && options.includeReplay && replay.isEnabled() && replayId) {
         // This should never reject
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        replay.flush();
         if (feedbackEvent.contexts && feedbackEvent.contexts.feedback) {
           feedbackEvent.contexts.feedback.replay_id = replayId;
         }