feat(feedback): Add captureFeedback method (#11428)

This PR adds a new `captureFeedback` method which is exported from all
SDKs.

This method can be used to capture a (new) user feedback from any
package.

We follow the same semantics as for other capture methods like
`captureException()` or `captureMessage()`: The method returns a string,
which is the event id. We do not wait for sending to be successful or
not, we just try to send it and return. You can both set an
`associatedEventId` (which replaces the event_id of the "old"
`captureUserFeedback`), and also pass attachments to send along (which
for now are sent as a separate envelope).

For usage in the modal UI, there is still `sendFeedback` which continues
to return a promise that resolves with the event ID, or rejects with a
meaningful error message if sending fails.

This also deprecates `captureUserFeedback()`, which is only exported in
browser. We cannot remove this yet because `captureFeedback` will only
work on newer self-hosted instances, so not all users can easily update.
We can/should remove this in v9.

Includes #11626
Fixes 49946

Author: mydea

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

@@ -53,6 +53,10 @@ sentryTest('should capture feedback', async ({ getLocalTestPath, page }) => {
         source: 'widget',
         url: expect.stringContaining('/dist/index.html'),
       },
+      trace: {
+        trace_id: expect.stringMatching(/\w{32}/),
+        span_id: expect.stringMatching(/\w{16}/),
+      },
     },
     level: 'info',
     timestamp: expect.any(Number),

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

@@ -89,6 +89,10 @@ sentryTest('should capture feedback', async ({ forceFlushReplay, getLocalTestPat
         source: 'widget',
         url: expect.stringContaining('/dist/index.html'),
       },
+      trace: {
+        trace_id: expect.stringMatching(/\w{32}/),
+        span_id: expect.stringMatching(/\w{16}/),
+      },
     },
     level: 'info',
     timestamp: expect.any(Number),

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/init.js

@@ -4,7 +4,7 @@ window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
-  integrations: [Sentry.browserTracingIntegration()],
+  integrations: [Sentry.browserTracingIntegration(), Sentry.feedbackIntegration()],
   tracePropagationTargets: ['http://example.com'],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/navigation/test.ts

@@ -2,6 +2,7 @@ import { expect } from '@playwright/test';
 import type { Event, SpanEnvelope } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
 import type { EventAndTraceHeader } from '../../../../utils/helpers';
+import { shouldSkipFeedbackTest } from '../../../../utils/helpers';
 import {
   eventAndTraceHeaderRequestParser,
   getFirstSentryEnvelopeRequest,
@@ -134,7 +135,7 @@ sentryTest('error during navigation has new navigation traceId', async ({ getLoc
 
   const url = await getLocalTestUrl({ testDir: __dirname });
 
-  // ensure navigation transaction is finished
+  // ensure pageload transaction is finished
   await getFirstSentryEnvelopeRequest<Event>(page, url);
 
   const envelopeRequestsPromise = getMultipleSentryEnvelopeRequests<EventAndTraceHeader>(
@@ -202,7 +203,7 @@ sentryTest(
       });
     });
 
-    // ensure navigation transaction is finished
+    // ensure pageload transaction is finished
     await getFirstSentryEnvelopeRequest<Event>(page, url);
 
     const [navigationEvent, navigationTraceHeader] = await getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
@@ -276,7 +277,7 @@ sentryTest(
       });
     });
 
-    // ensure navigation transaction is finished
+    // ensure pageload transaction is finished
     await getFirstSentryEnvelopeRequest<Event>(page, url);
 
     const navigationEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
@@ -456,3 +457,47 @@ sentryTest(
     );
   },
 );
+
+sentryTest(
+  'user feedback event after navigation has navigation traceId in headers',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest() || shouldSkipFeedbackTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    // ensure pageload transaction is finished
+    await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+    const navigationEvent = await getFirstSentryEnvelopeRequest<Event>(page, `${url}#foo`);
+
+    const navigationTraceContext = navigationEvent.contexts?.trace;
+    expect(navigationTraceContext).toMatchObject({
+      op: 'navigation',
+      trace_id: expect.stringMatching(/^[0-9a-f]{32}$/),
+      span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+    });
+    expect(navigationTraceContext).not.toHaveProperty('parent_span_id');
+
+    const feedbackEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.getByText('Report a Bug').click();
+    expect(await page.locator(':visible:text-is("Report a Bug")').count()).toEqual(1);
+    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.locator('[data-sentry-feedback] .btn--primary').click();
+
+    const feedbackEvent = await feedbackEventPromise;
+
+    expect(feedbackEvent.type).toEqual('feedback');
+
+    const feedbackTraceContext = feedbackEvent.contexts?.trace;
+
+    expect(feedbackTraceContext).toMatchObject({
+      trace_id: navigationTraceContext?.trace_id,
+      span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+    });
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload-meta/test.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test';
-import type { SpanEnvelope } from '@sentry/types';
+import type { Event, SpanEnvelope } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
 import type { EventAndTraceHeader } from '../../../../utils/helpers';
+import { shouldSkipFeedbackTest } from '../../../../utils/helpers';
 import {
   eventAndTraceHeaderRequestParser,
   getFirstSentryEnvelopeRequest,
@@ -429,3 +430,41 @@ sentryTest(
     expect(headers['baggage']).toBe(META_TAG_BAGGAGE);
   },
 );
+
+sentryTest('user feedback event after pageload has pageload traceId in headers', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest() || shouldSkipFeedbackTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const pageloadEvent = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  const pageloadTraceContext = pageloadEvent.contexts?.trace;
+
+  expect(pageloadTraceContext).toMatchObject({
+    op: 'pageload',
+    trace_id: META_TAG_TRACE_ID,
+    parent_span_id: META_TAG_PARENT_SPAN_ID,
+    span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+  });
+
+  const feedbackEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
+
+  await page.getByText('Report a Bug').click();
+  expect(await page.locator(':visible:text-is("Report a Bug")').count()).toEqual(1);
+  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.locator('[data-sentry-feedback] .btn--primary').click();
+
+  const feedbackEvent = await feedbackEventPromise;
+  const feedbackTraceContext = feedbackEvent.contexts?.trace;
+
+  expect(feedbackEvent.type).toEqual('feedback');
+
+  expect(feedbackTraceContext).toMatchObject({
+    trace_id: META_TAG_TRACE_ID,
+    parent_span_id: META_TAG_PARENT_SPAN_ID,
+    span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+  });
+});

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload/test.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test';
-import type { SpanEnvelope } from '@sentry/types';
+import type { Event, SpanEnvelope } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
 import type { EventAndTraceHeader } from '../../../../utils/helpers';
+import { shouldSkipFeedbackTest } from '../../../../utils/helpers';
 import {
   eventAndTraceHeaderRequestParser,
   getFirstSentryEnvelopeRequest,
@@ -431,3 +432,41 @@ sentryTest(
     );
   },
 );
+
+sentryTest('user feedback event after pageload has pageload traceId in headers', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest() || shouldSkipFeedbackTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const pageloadEvent = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  const pageloadTraceContext = pageloadEvent.contexts?.trace;
+
+  expect(pageloadTraceContext).toMatchObject({
+    op: 'pageload',
+    trace_id: expect.stringMatching(/^[0-9a-f]{32}$/),
+    span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+  });
+  expect(pageloadTraceContext).not.toHaveProperty('parent_span_id');
+
+  const feedbackEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
+
+  await page.getByText('Report a Bug').click();
+  expect(await page.locator(':visible:text-is("Report a Bug")').count()).toEqual(1);
+  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.locator('[data-sentry-feedback] .btn--primary').click();
+
+  const feedbackEvent = await feedbackEventPromise;
+
+  expect(feedbackEvent.type).toEqual('feedback');
+
+  const feedbackTraceContext = feedbackEvent.contexts?.trace;
+
+  expect(feedbackTraceContext).toMatchObject({
+    trace_id: pageloadTraceContext?.trace_id,
+    span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+  });
+});

packages/astro/src/index.server.ts

@@ -14,6 +14,7 @@ export {
   captureEvent,
   captureMessage,
   captureCheckIn,
+  captureFeedback,
   withMonitor,
   createTransport,
   // eslint-disable-next-line deprecation/deprecation

packages/aws-serverless/src/index.ts

@@ -6,6 +6,7 @@ export {
   captureEvent,
   captureMessage,
   captureCheckIn,
+  captureFeedback,
   startSession,
   captureSession,
   endSession,

packages/browser/src/client.ts

@@ -91,6 +91,8 @@ export class BrowserClient extends BaseClient<BrowserClientOptions> {
 
   /**
    * Sends user feedback to Sentry.
+   *
+   * @deprecated Use `captureFeedback` instead.
    */
   public captureUserFeedback(feedback: UserFeedback): void {
     if (!this._isEnabled()) {

packages/browser/src/exports.ts

@@ -88,6 +88,7 @@ export {
   init,
   onLoad,
   showReportDialog,
+  // eslint-disable-next-line deprecation/deprecation
   captureUserFeedback,
 } from './sdk';