feat(feedback): Add captureFeedback method

fix PR

Author: mydea

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';
 

packages/browser/src/index.bundle.feedback.ts

@@ -10,3 +10,5 @@ export {
 } from '@sentry-internal/feedback';
 
 export { browserTracingIntegrationShim as browserTracingIntegration, replayIntegrationShim as replayIntegration };
+
+export { captureFeedback } from '@sentry/core';

packages/browser/src/index.bundle.tracing.replay.feedback.ts

@@ -13,6 +13,7 @@ export {
   withActiveSpan,
   getSpanDescendants,
   setMeasurement,
+  captureFeedback,
 } from '@sentry/core';
 
 export {

packages/browser/src/index.ts

@@ -10,6 +10,7 @@ export {
   extraErrorDataIntegration,
   rewriteFramesIntegration,
   sessionTimingIntegration,
+  captureFeedback,
 } from '@sentry/core';
 
 export {

packages/browser/src/sdk.ts

@@ -295,10 +295,13 @@ function startSessionTracking(): void {
 
 /**
  * Captures user feedback and sends it to Sentry.
+ *
+ * @deprecated Use `captureFeedback` instead.
  */
 export function captureUserFeedback(feedback: UserFeedback): void {
   const client = getClient<BrowserClient>();
   if (client) {
+    // eslint-disable-next-line deprecation/deprecation
     client.captureUserFeedback(feedback);
   }
 }

packages/core/src/feedback.ts

@@ -0,0 +1,71 @@
+import type { Attachment, EventHint, FeedbackEvent } from '@sentry/types';
+import { getClient, getCurrentScope } from './currentScopes';
+import { createAttachmentEnvelope } from './envelope';
+
+interface FeedbackParams {
+  message: string;
+  name?: string;
+  email?: string;
+  attachments?: Attachment[];
+  url?: string;
+  source?: string;
+  associatedEventId?: string;
+}
+
+/**
+ * Send user feedback to Sentry.
+ */
+export function captureFeedback(
+  feedbackParams: FeedbackParams,
+  hint?: EventHint & { includeReplay?: boolean },
+): string {
+  const { message, name, email, url, source, attachments, associatedEventId } = feedbackParams;
+
+  const client = getClient();
+  const transport = client && client.getTransport();
+  const dsn = client && client.getDsn();
+
+  if (!client || !transport || !dsn) {
+    throw new Error('Invalid Sentry client');
+  }
+
+  const feedbackEvent: FeedbackEvent = {
+    contexts: {
+      feedback: {
+        contact_email: email,
+        name,
+        message,
+        url,
+        source,
+        associated_event_id: associatedEventId,
+      },
+    },
+    type: 'feedback',
+    level: 'info',
+  };
+
+  if (client) {
+    client.emit('beforeSendFeedback', feedbackEvent, hint);
+  }
+
+  const eventId = getCurrentScope().captureEvent(feedbackEvent, hint);
+
+  // For now, we have to send attachments manually in a separate envelope
+  // Because we do not support attachments in the feedback envelope
+  // Once the Sentry API properly supports this, we can get rid of this and send it through the event envelope
+  if (client && attachments && attachments.length) {
+    // TODO: https://docs.sentry.io/platforms/javascript/enriching-events/attachments/
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    void transport.send(
+      createAttachmentEnvelope(
+        feedbackEvent,
+        attachments,
+        dsn,
+        client.getOptions()._metadata,
+        client.getOptions().tunnel,
+      ),
+    );
+  }
+
+  return eventId;
+}

packages/core/src/index.ts

@@ -99,6 +99,7 @@ export { BrowserMetricsAggregator } from './metrics/browser-aggregator';
 export { getMetricSummaryJsonForSpan } from './metrics/metric-summary';
 export { addTracingHeadersToFetchRequest, instrumentFetchRequest } from './fetch';
 export { trpcMiddleware } from './trpc';
+export { captureFeedback } from './feedback';
 
 // eslint-disable-next-line deprecation/deprecation
 export { getCurrentHubShim, getCurrentHub } from './getCurrentHubShim';

packages/feedback/src/core/sendFeedback.test.ts

@@ -14,26 +14,34 @@ describe('sendFeedback', () => {
       message: 'mi',
     });
     expect(mockTransport).toHaveBeenCalledWith([
-      { event_id: expect.any(String), sent_at: expect.any(String) },
+      {
+        event_id: expect.any(String),
+        sent_at: expect.any(String),
+        trace: expect.anything(),
+      },
       [
         [
           { type: 'feedback' },
           {
             breadcrumbs: undefined,
             contexts: {
+              trace: {
+                parent_span_id: undefined,
+                span_id: expect.any(String),
+                trace_id: expect.any(String),
+              },
               feedback: {
                 contact_email: '[email protected]',
                 message: 'mi',
                 name: 'doe',
-                replay_id: undefined,
                 source: 'api',
                 url: 'http://localhost/',
               },
             },
             level: 'info',
             environment: 'production',
             event_id: expect.any(String),
-            platform: 'javascript',
+            // TODO: Why is there no platform here?
             timestamp: expect.any(Number),
             type: 'feedback',
           },

packages/feedback/src/core/sendFeedback.ts

@@ -1,100 +1,54 @@
-import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core';
-import type { FeedbackEvent, SendFeedback, SendFeedbackParams } from '@sentry/types';
+import { captureFeedback } from '@sentry/core';
+import { getClient } from '@sentry/core';
+import type { SendFeedback, SendFeedbackParams, TransportMakeRequestResponse } from '@sentry/types';
+import type { Event } from '@sentry/types';
 import { getLocationHref } from '@sentry/utils';
-import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
-import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent';
+import { FEEDBACK_API_SOURCE } from '../constants';
 
 /**
  * Public API to send a Feedback item to Sentry
  */
 export const sendFeedback: SendFeedback = (
   { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   { includeReplay = true } = {},
-) => {
+): Promise<void> => {
   if (!message) {
     throw new Error('Unable to submit feedback with empty message');
   }
 
+  // We want to wait for the feedback to be sent (or not)
   const client = getClient();
-  const transport = client && client.getTransport();
-  const dsn = client && client.getDsn();
 
-  if (!client || !transport || !dsn) {
-    throw new Error('Invalid Sentry client');
+  if (!client) {
+    throw new Error('No client setup, cannot send feedback.');
   }
 
-  const baseEvent: FeedbackEvent = {
-    contexts: {
-      feedback: {
-        contact_email: email,
-        name,
-        message,
-        url,
-        source,
-      },
-    },
-    type: 'feedback',
-  };
+  const eventId = captureFeedback({ name, email, message, attachments, source, url }, { includeReplay });
 
-  return withScope(async scope => {
-    // No use for breadcrumbs in feedback
-    scope.clearBreadcrumbs();
+  // We want to wait for the feedback to be sent (or not)
+  return new Promise<void>((resolve, reject) => {
+    // After 5s, we want to clear anyhow
+    const timeout = setTimeout(() => reject('timeout'), 5_000);
 
-    if ([FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE].includes(String(source))) {
-      scope.setLevel('info');
-    }
-
-    const feedbackEvent = await prepareFeedbackEvent({
-      scope,
-      client,
-      event: baseEvent,
-    });
-
-    if (client.emit) {
-      client.emit('beforeSendFeedback', feedbackEvent, { includeReplay: Boolean(includeReplay) });
-    }
-
-    try {
-      const response = await transport.send(
-        createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel),
-      );
-
-      if (attachments && attachments.length) {
-        // TODO: https://docs.sentry.io/platforms/javascript/enriching-events/attachments/
-        await transport.send(
-          createAttachmentEnvelope(
-            feedbackEvent,
-            attachments,
-            dsn,
-            client.getOptions()._metadata,
-            client.getOptions().tunnel,
-          ),
-        );
+    client.on('afterSendEvent', (event: Event, response: TransportMakeRequestResponse) => {
+      if (event.event_id !== eventId) {
+        return;
       }
 
+      clearTimeout(timeout);
+
       // Require valid status codes, otherwise can assume feedback was not sent successfully
       if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
         if (response.statusCode === 0) {
-          throw new Error(
+          return reject(
             'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.',
           );
         }
-        throw new Error('Unable to send Feedback. Invalid response from server.');
+        return reject('Unable to send Feedback. Invalid response from server.');
       }
 
-      return response;
-    } catch (err) {
-      const error = new Error('Unable to send Feedback');
-
-      try {
-        // In case browsers don't allow this property to be writable
-        // @ts-expect-error This needs lib es2022 and newer
-        error.cause = err;
-      } catch {
-        // nothing to do
-      }
-      throw error;
-    }
+      resolve();
+    });
   });
 };
 

packages/feedback/src/util/prepareFeedbackEvent.ts

@@ -1,6 +1,5 @@
 import type { Attachment } from '../attachment';
 import type { Event } from '../event';
-import type { TransportMakeRequestResponse } from '../transport';
 import type { User } from '../user';
 
 /**
@@ -19,6 +18,7 @@ interface FeedbackContext extends Record<string, unknown> {
   name?: string;
   replay_id?: string;
   url?: string;
+  associated_event_id?: string;
 }
 
 /**
@@ -48,7 +48,4 @@ interface SendFeedbackOptions {
   includeReplay?: boolean;
 }
 
-export type SendFeedback = (
-  params: SendFeedbackParams,
-  options?: SendFeedbackOptions,
-) => Promise<TransportMakeRequestResponse>;
+export type SendFeedback = (params: SendFeedbackParams, options?: SendFeedbackOptions) => Promise<void>;