feat(feedback): Flush replays when feedback form opens

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

@@ -0,0 +1,107 @@
+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 (@sentry-internal/feedback import)',
+  async ({ forceFlushReplay, getLocalTestPath, page }) => {
+    if (process.env.PW_BUNDLE) {
+      sentryTest.skip();
+    }
+
+    const reqPromise0 = waitForReplayRequest(page, 0);
+    const reqPromise1 = waitForReplayRequest(page, 1);
+    const reqPromise2 = waitForReplayRequest(page, 2);
+    const feedbackRequestPromise = page.waitForResponse(res => {
+      const req = res.request();
+
+      const postData = req.postData();
+      if (!postData) {
+        return false;
+      }
+
+      try {
+        return getEnvelopeType(req) === 'feedback';
+      } catch (err) {
+        return false;
+      }
+    });
+
+    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 [, , replayReq0] = await Promise.all([page.goto(url), page.getByText('Report a Bug').click(), reqPromise0]);
+
+    // Inputs are slow, these need to be serial
+    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');
+
+    // Force flush here, as inputs are slow and can cause click event to be in unpredictable segments
+    await Promise.all([forceFlushReplay(), reqPromise1]);
+
+    const [, feedbackResp, replayReq2] = await Promise.all([
+      page.getByLabel('Send Bug Report').click(),
+      feedbackRequestPromise,
+      reqPromise2,
+    ]);
+
+    const feedbackEvent = envelopeRequestParser(feedbackResp.request());
+    const replayEvent = getReplayEvent(replayReq0);
+    // 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([
+        expect.objectContaining({
+          category: 'sentry.feedback',
+          data: { feedbackId: expect.any(String) },
+          timestamp: expect.any(Number),
+          type: 'default',
+        }),
+      ]),
+    );
+
+    expect(feedbackEvent).toEqual({
+      type: 'feedback',
+      breadcrumbs: expect.any(Array),
+      contexts: {
+        feedback: {
+          contact_email: '[email protected]',
+          message: 'my example feedback',
+          name: 'Jane Doe',
+          replay_id: replayEvent.event_id,
+          source: 'widget',
+          url: expect.stringContaining('/dist/index.html'),
+        },
+      },
+      level: 'info',
+      timestamp: expect.any(Number),
+      event_id: expect.stringMatching(/\w{32}/),
+      environment: 'production',
+      sdk: {
+        integrations: expect.arrayContaining(['Feedback']),
+        version: expect.any(String),
+        name: 'sentry.javascript.browser',
+        packages: expect.anything(),
+      },
+      request: {
+        url: expect.stringContaining('/dist/index.html'),
+        headers: {
+          'User-Agent': expect.stringContaining(''),
+        },
+      },
+      platform: 'javascript',
+    });
+  },
+);

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

@@ -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/test.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { 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');
+  },
+);

packages/feedback/package.json

@@ -33,6 +33,9 @@
     "@sentry/types": "7.100.0",
     "@sentry/utils": "7.100.0"
   },
+  "devDependencies": {
+    "@sentry/replay": "7.100.0"
+  },
   "scripts": {
     "build": "run-p build:transpile build:types build:bundle",
     "build:transpile": "rollup -c rollup.npm.config.mjs",

packages/feedback/src/integration.ts

@@ -1,4 +1,5 @@
-import type { Integration, IntegrationFn } from '@sentry/types';
+import { type replayIntegration } from '@sentry/replay';
+import type { BaseTransportOptions, Client, ClientOptions, Integration, IntegrationFn } from '@sentry/types';
 import { isBrowser, logger } from '@sentry/utils';
 
 import {
@@ -79,17 +80,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 +125,10 @@ export class Feedback implements Integration {
     this._hasInsertedActorStyles = false;
 
     this.options = {
-      id,
-      showBranding,
       autoInject,
+      showBranding,
+      id,
+      includeReplay,
       isEmailRequired,
       isNameRequired,
       showEmail,
@@ -185,6 +188,29 @@ export class Feedback implements Integration {
     }
   }
 
+  /**
+   * Hook that is called after all integrations are 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<ReturnType<typeof replayIntegration>>('Replay');
+
+    if (!replay) {
+      return;
+    }
+
+    try {
+      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/types/index.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.