feat: send feedback envelopes using captureEvent

Author: billyvg

packages/feedback/src/types/index.ts

@@ -1,26 +1,10 @@
-import type { Event, Primitive } from '@sentry/types';
+import type { Primitive } from '@sentry/types';
 
 import type { ActorComponent } from '../widget/Actor';
 import type { DialogComponent } from '../widget/Dialog';
 
 export type SentryTags = { [key: string]: Primitive } | undefined;
 
-/**
- * NOTE: These types are still considered Beta and subject to change.
- * @hidden
- */
-export interface FeedbackEvent extends Event {
-  feedback: {
-    message: string;
-    url: string;
-    contact_email?: string;
-    name?: string;
-    replay_id?: string;
-  };
-  // TODO: Add this event type to Event
-  // type: 'feedback_event';
-}
-
 export interface SendFeedbackData {
   feedback: {
     message: string;

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -5,38 +5,34 @@ import type { DialogComponent } from '../widget/Dialog';
 /**
  * Calls `sendFeedback` to send feedback, handles UI behavior of dialog.
  */
-export async function handleFeedbackSubmit(
+export function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
   options?: SendFeedbackOptions,
-): Promise<Response | false> {
+): string | undefined {
   if (!dialog) {
     // Not sure when this would happen
-    return false;
+    return;
   }
 
-  const showFetchError = (): void => {
-    if (!dialog) {
-      return;
-    }
-    dialog.showError('There was a problem submitting feedback, please wait and try again.');
-  };
+  // const showFetchError = (): void => {
+  //   if (!dialog) {
+  //     return;
+  //   }
+  //   dialog.showError('There was a problem submitting feedback, please wait and try again.');
+  // };
 
-  try {
-    dialog.hideError();
-    const resp = await sendFeedback(feedback, options);
+  dialog.hideError();
 
-    if (!resp) {
-      // Errored... re-enable submit button
-      showFetchError();
-      return false;
-    }
-
-    // Success!
-    return resp;
-  } catch {
-    // Errored... re-enable submit button
-    showFetchError();
-    return false;
-  }
+  // TODO: Error handling?
+  return sendFeedback(feedback, options);
+  // try {
+  //   const resp = await sendFeedback(feedback, options);
+  //
+  //   // Success!
+  //   return resp;
+  // } catch {
+  //   // Errored... re-enable submit button
+  //   showFetchError();
+  // }
 }

packages/feedback/src/util/prepareFeedbackEvent.ts

@@ -1,8 +1,6 @@
 import type { Scope } from '@sentry/core';
 import { prepareEvent } from '@sentry/core';
-import type { Client } from '@sentry/types';
-
-import type { FeedbackEvent } from '../types';
+import type { Client, FeedbackEvent } from '@sentry/types';
 
 interface PrepareFeedbackEventParams {
   client: Client;
@@ -11,13 +9,15 @@ interface PrepareFeedbackEventParams {
 }
 /**
  * Prepare a feedback event & enrich it with the SDK metadata.
+ *
+ * TODO: Refactor this with the replay version
  */
 export async function prepareFeedbackEvent({
   client,
   scope,
   event,
 }: PrepareFeedbackEventParams): Promise<FeedbackEvent | null> {
-  const eventHint = { integrations: undefined };
+  const eventHint = {};
   if (client.emit) {
     client.emit('preprocessEvent', event, eventHint);
   }
@@ -44,9 +44,9 @@ export async function prepareFeedbackEvent({
   const { name, version } = (metadata && metadata.sdk) || {};
 
   preparedEvent.sdk = {
-    ...preparedEvent.sdk,
     name: name || 'sentry.javascript.unknown',
     version: version || '0.0.0',
   };
+
   return preparedEvent;
 }

packages/feedback/src/util/sendFeedbackRequest.ts

@@ -1,113 +1,41 @@
 import { getCurrentHub } from '@sentry/core';
-import { dsnToString } from '@sentry/utils';
+import type { FeedbackEvent } from '@sentry/types';
+import { uuid4 } from '@sentry/utils';
 
 import type { SendFeedbackData } from '../types';
-import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 
 /**
  * Send feedback using `fetch()`
  */
-export async function sendFeedbackRequest({
+export function sendFeedbackRequest({
   feedback: { message, email, name, replay_id, url },
-}: SendFeedbackData): Promise<Response | null> {
+}: SendFeedbackData): string | undefined {
   const hub = getCurrentHub();
-
-  if (!hub) {
-    return null;
-  }
-
   const client = hub.getClient();
   const scope = hub.getScope();
-  const transport = client && client.getTransport();
-  const dsn = client && client.getDsn();
 
-  if (!client || !transport || !dsn) {
-    return null;
+  if (!client) {
+    return;
   }
 
-  const baseEvent = {
-    feedback: {
-      contact_email: email,
-      name,
-      message,
-      replay_id,
-      url,
+  const baseEvent: FeedbackEvent = {
+    contexts: {
+      feedback: {
+        contact_email: email,
+        name,
+        message,
+        replay_id,
+        url,
+      },
     },
-    // type: 'feedback_event',
+    type: 'feedback',
   };
 
-  const feedbackEvent = await prepareFeedbackEvent({
+  return client.captureEvent(
+    baseEvent,
+    {
+      event_id: uuid4(),
+    },
     scope,
-    client,
-    event: baseEvent,
-  });
-
-  if (!feedbackEvent) {
-    // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
-    // client.recordDroppedEvent('event_processor', 'feedback', baseEvent);
-    return null;
-  }
-
-  /*
-  For reference, the fully built event looks something like this:
-  {
-    "data": {
-      "dist": "abc123",
-      "environment": "production",
-      "feedback": {
-        "contact_email": "colton.allen@sentry.io",
-        "message": "I really like this user-feedback feature!",
-        "replay_id": "ec3b4dc8b79f417596f7a1aa4fcca5d2",
-        "url": "https://docs.sentry.io/platforms/javascript/"
-      },
-      "id": "1ffe0775ac0f4417aed9de36d9f6f8dc",
-      "platform": "javascript",
-      "release": "[email protected]",
-      "request": {
-        "headers": {
-          "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
-        }
-      },
-      "sdk": {
-        "name": "sentry.javascript.react",
-        "version": "6.18.1"
-      },
-      "tags": {
-        "key": "value"
-      },
-      "timestamp": "2023-08-31T14:10:34.954048",
-      "user": {
-        "email": "username@example.com",
-        "id": "123",
-        "ip_address": "127.0.0.1",
-        "name": "user",
-        "username": "user2270129"
-      }
-    }
-  }
-  */
-
-  // Prevent this data (which, if it exists, was used in earlier steps in the processing pipeline) from being sent to
-  // sentry. (Note: Our use of this property comes and goes with whatever we might be debugging, whatever hacks we may
-  // have temporarily added, etc. Even if we don't happen to be using it at some point in the future, let's not get rid
-  // of this `delete`, lest we miss putting it back in the next time the property is in use.)
-  delete feedbackEvent.sdkProcessingMetadata;
-
-  try {
-    const path = 'https://sentry.io/api/0/feedback/';
-    const response = await fetch(path, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `DSN ${dsnToString(dsn)}`,
-      },
-      body: JSON.stringify(feedbackEvent),
-    });
-    if (!response.ok) {
-      return null;
-    }
-    return response;
-  } catch (err) {
-    return null;
-  }
+  );
 }

packages/feedback/src/widget/createWidget.ts

@@ -74,10 +74,10 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
       return;
     }
 
-    const result = await handleFeedbackSubmit(dialog, feedback);
+    const eventId = handleFeedbackSubmit(dialog, feedback);
 
     // Error submitting feedback
-    if (!result) {
+    if (!eventId) {
       if (options.onSubmitError) {
         options.onSubmitError();
       }