feat(feedback): Add source to feedback payload (#9494)

`sendFeedback` now sends a `source` property in the feedback context.
`source` will be `api` if you call `sendFeedback` directly, otherwise
`widget` when called from widget UI.

Author: billyvg

packages/feedback/src/sendFeedback.ts

@@ -10,13 +10,14 @@ interface SendFeedbackParams {
   name?: string;
   email?: string;
   url?: string;
+  source?: string;
 }
 
 /**
  * Public API to send a Feedback item to Sentry
  */
 export function sendFeedback(
-  { name, email, message, url = getLocationHref() }: SendFeedbackParams,
+  { name, email, message, source = 'api', url = getLocationHref() }: SendFeedbackParams,
   { includeReplay = true }: SendFeedbackOptions = {},
 ): ReturnType<typeof sendFeedbackRequest> {
   const client = getCurrentHub().getClient<BrowserClient>();
@@ -37,6 +38,7 @@ export function sendFeedback(
       message,
       url,
       replay_id: replayId,
+      source,
     },
   });
 }

packages/feedback/src/types/index.ts

@@ -12,6 +12,7 @@ export interface SendFeedbackData {
     email?: string;
     replay_id?: string;
     name?: string;
+    source?: string;
   };
 }
 

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -29,7 +29,7 @@ export async function handleFeedbackSubmit(
   dialog.hideError();
 
   try {
-    const resp = await sendFeedback(feedback, options);
+    const resp = await sendFeedback({ ...feedback, source: 'widget' }, options);
 
     // Success!
     return resp;

packages/feedback/src/util/sendFeedbackRequest.ts

@@ -8,7 +8,7 @@ import { prepareFeedbackEvent } from './prepareFeedbackEvent';
  * Send feedback using transport
  */
 export async function sendFeedbackRequest({
-  feedback: { message, email, name, replay_id, url },
+  feedback: { message, email, name, source, replay_id, url },
 }: SendFeedbackData): Promise<void | TransportMakeRequestResponse> {
   const hub = getCurrentHub();
   const client = hub.getClient();
@@ -28,6 +28,7 @@ export async function sendFeedbackRequest({
         message,
         replay_id,
         url,
+        source,
       },
     },
     type: 'feedback',

packages/feedback/test/sendFeedback.test.ts

@@ -0,0 +1,43 @@
+import { getCurrentHub } from '@sentry/core';
+
+import { sendFeedback } from '../src/sendFeedback';
+import { mockSdk } from './utils/mockSdk';
+
+describe('sendFeedback', () => {
+  it('sends feedback', async () => {
+    mockSdk();
+    const mockTransport = jest.spyOn(getCurrentHub().getClient()!.getTransport()!, 'send');
+
+    await sendFeedback({
+      name: 'doe',
+      email: '[email protected]',
+      message: 'mi',
+    });
+    expect(mockTransport).toHaveBeenCalledWith([
+      { event_id: expect.any(String), sent_at: expect.any(String) },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: undefined,
+            contexts: {
+              feedback: {
+                contact_email: '[email protected]',
+                message: 'mi',
+                name: 'doe',
+                replay_id: undefined,
+                source: 'api',
+                url: 'http://localhost/',
+              },
+            },
+            environment: 'production',
+            event_id: expect.any(String),
+            platform: 'javascript',
+            timestamp: expect.any(Number),
+            type: 'feedback',
+          },
+        ],
+      ],
+    ]);
+  });
+});

packages/feedback/test/utils/mockSdk.ts

@@ -0,0 +1,58 @@
+import type { Envelope, Transport, TransportMakeRequestResponse } from '@sentry/types';
+
+import type { TestClientOptions } from '../utils/TestClient';
+import { getDefaultClientOptions, init } from '../utils/TestClient';
+
+export interface MockSdkParams {
+  sentryOptions?: Partial<TestClientOptions>;
+}
+
+class MockTransport implements Transport {
+  send: (request: Envelope) => PromiseLike<TransportMakeRequestResponse>;
+
+  constructor() {
+    const send: ((request: Envelope) => PromiseLike<TransportMakeRequestResponse>) & {
+      __sentry__baseTransport__?: boolean;
+    } = jest.fn(async () => {
+      return {
+        statusCode: 200,
+      };
+    });
+
+    send.__sentry__baseTransport__ = true;
+    this.send = send;
+  }
+
+  async flush() {
+    return true;
+  }
+  async sendEvent(_e: Event) {
+    return {
+      status: 'skipped',
+      event: 'ok',
+      type: 'transaction',
+    };
+  }
+  async sendSession() {
+    return;
+  }
+  async recordLostEvent() {
+    return;
+  }
+  async close() {
+    return;
+  }
+}
+
+export async function mockSdk({ sentryOptions }: MockSdkParams = {}): Promise<void> {
+  init({
+    ...getDefaultClientOptions(),
+    dsn: 'https://[email protected]/1',
+    autoSessionTracking: false,
+    sendClientReports: false,
+    transport: () => new MockTransport(),
+    replaysSessionSampleRate: 0.0,
+    replaysOnErrorSampleRate: 0.0,
+    ...sentryOptions,
+  });
+}

packages/feedback/test/widget/createWidget.test.ts

@@ -155,6 +155,7 @@ describe('createWidget', () => {
         message: 'My feedback',
         url: 'http://localhost/',
         replay_id: undefined,
+        source: 'widget',
       },
     });
 
@@ -194,6 +195,7 @@ describe('createWidget', () => {
         message: 'My feedback',
         url: 'http://localhost/',
         replay_id: undefined,
+        source: 'widget',
       },
     });