feat(browser): Add captureUserFeedback

packages/browser-integration-tests/suites/public-api/captureUserFeedback/init.js

@@ -0,0 +1,7 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+});

packages/browser-integration-tests/suites/public-api/captureUserFeedback/simple_feedback/subject.js

@@ -0,0 +1,6 @@
+Sentry.captureUserFeedback({
+  eventId: 'test_event_id',
+  email: 'test_email',
+  comments: 'test_comments',
+  name: 'test_name',
+});

packages/browser-integration-tests/suites/public-api/captureUserFeedback/simple_feedback/test.ts

@@ -0,0 +1,18 @@
+import { expect } from '@playwright/test';
+import type { UserFeedback } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+
+sentryTest('should capture simple user feedback', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<UserFeedback>(page, url);
+
+  expect(eventData).toMatchObject({
+    eventId: 'test_event_id',
+    email: 'test_email',
+    comments: 'test_comments',
+    name: 'test_name',
+  });
+});

packages/browser/src/exports.ts

@@ -60,4 +60,5 @@ export {
 } from './stack-parsers';
 export { eventFromException, eventFromMessage } from './eventbuilder';
 export { defaultIntegrations, forceLoad, init, lastEventId, onLoad, showReportDialog, flush, close, wrap } from './sdk';
+export { captureUserFeedback } from './userfeedback';
 export { GlobalHandlers, TryCatch, Breadcrumbs, LinkedErrors, HttpContext, Dedupe } from './integrations';

packages/browser/src/userfeedback.ts

@@ -0,0 +1,70 @@
+import { getCurrentHub } from '@sentry/core';
+import type { DsnComponents, EventEnvelope, SdkMetadata, UserFeedback, UserFeedbackItem } from '@sentry/types';
+import { createEnvelope, dsnToString, logger } from '@sentry/utils';
+
+/**
+ * Sends user feedback to Sentry.
+ */
+export function captureUserFeedback(feedback: UserFeedback): void {
+  const hub = getCurrentHub();
+  const client = hub.getClient();
+  const transport = client && client.getTransport();
+
+  if (!client) {
+    __DEBUG_BUILD__ && logger.log('[UserFeedback] getClient did not return a Client, user feedback will not be sent.');
+    return;
+  }
+
+  if (!transport) {
+    __DEBUG_BUILD__ &&
+      logger.log('[UserFeedback] getTransport did not return a Transport, user feedback will not be sent.');
+    return;
+  }
+
+  const envelope = createUserFeedbackEnvelope(feedback, {
+    metadata: client.getSdkMetadata && client.getSdkMetadata(),
+    dsn: client.getDsn(),
+    tunnel: client.getOptions().tunnel,
+  });
+
+  void transport.send(envelope);
+}
+
+/**
+ * Creates an envelope from a user feedback.
+ */
+export function createUserFeedbackEnvelope(
+  feedback: UserFeedback,
+  {
+    metadata,
+    tunnel,
+    dsn,
+  }: {
+    metadata: SdkMetadata | undefined;
+    tunnel: string | undefined;
+    dsn: DsnComponents | undefined;
+  },
+): EventEnvelope {
+  const headers: EventEnvelope[0] = {
+    event_id: feedback.event_id,
+    sent_at: new Date().toISOString(),
+    ...(metadata &&
+      metadata.sdk && {
+        sdk: {
+          name: metadata.sdk.name,
+          version: metadata.sdk.version,
+        },
+      }),
+    ...(!!tunnel && !!dsn && { dsn: dsnToString(dsn) }),
+  };
+  const item = createUserFeedbackEnvelopeItem(feedback);
+
+  return createEnvelope(headers, [item]);
+}
+
+function createUserFeedbackEnvelopeItem(feedback: UserFeedback): UserFeedbackItem {
+  const feedbackHeaders: UserFeedbackItem[0] = {
+    type: 'user_report',
+  };
+  return [feedbackHeaders, feedback];
+}

packages/browser/test/unit/userfeedback.test.ts

@@ -0,0 +1,68 @@
+import { createUserFeedbackEnvelope } from '../../src/userfeedback';
+
+describe('userFeedback', () => {
+  test('creates user feedback envelope header', () => {
+    const envelope = createUserFeedbackEnvelope(
+      {
+        comments: 'Test Comments',
+        email: '[email protected]',
+        name: 'Test User',
+        event_id: 'testEvent123',
+      },
+      {
+        metadata: {
+          sdk: {
+            name: 'testSdkName',
+            version: 'testSdkVersion',
+          },
+        },
+        tunnel: 'testTunnel',
+        dsn: {
+          host: 'testHost',
+          projectId: 'testProjectId',
+          protocol: 'http',
+        },
+      },
+    );
+
+    expect(envelope[0]).toEqual({
+      dsn: 'http://undefined@testHost/undefinedtestProjectId',
+      event_id: 'testEvent123',
+      sdk: {
+        name: 'testSdkName',
+        version: 'testSdkVersion',
+      },
+      sent_at: expect.any(String),
+    });
+  });
+
+  test('creates user feedback envelope item', () => {
+    const envelope = createUserFeedbackEnvelope(
+      {
+        comments: 'Test Comments',
+        email: '[email protected]',
+        name: 'Test User',
+        event_id: 'testEvent123',
+      },
+      {
+        metadata: undefined,
+        tunnel: undefined,
+        dsn: undefined,
+      },
+    );
+
+    expect(envelope[1]).toEqual([
+      [
+        {
+          type: 'user_report',
+        },
+        {
+          comments: 'Test Comments',
+          email: '[email protected]',
+          name: 'Test User',
+          event_id: 'testEvent123',
+        },
+      ],
+    ]);
+  });
+});