feat: use custom prepare/send, re-use createEventEnvelope from core

Author: billyvg

packages/core/src/index.ts

@@ -4,6 +4,7 @@ export type { OfflineStore, OfflineTransportOptions } from './transports/offline
 export type { ServerRuntimeClientOptions } from './server-runtime-client';
 
 export * from './tracing';
+export {createEventEnvelope} from './envelope';
 export {
   addBreadcrumb,
   captureCheckIn,

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -1,38 +1,39 @@
+import type { TransportMakeRequestResponse } from '@sentry/types';
+
 import { sendFeedback } from '../sendFeedback';
 import type { FeedbackFormData, SendFeedbackOptions } from '../types';
 import type { DialogComponent } from '../widget/Dialog';
 
 /**
  * Calls `sendFeedback` to send feedback, handles UI behavior of dialog.
  */
-export function handleFeedbackSubmit(
+export async function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
   options?: SendFeedbackOptions,
-): string | undefined {
+): Promise<TransportMakeRequestResponse | void> {
   if (!dialog) {
     // Not sure when this would happen
     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.');
+  };
 
   dialog.hideError();
 
-  // TODO: Error handling?
-  return sendFeedback(feedback, options);
-  // try {
-  //   const resp = await sendFeedback(feedback, options);
-  //
-  //   // Success!
-  //   return resp;
-  // } catch {
-  //   // Errored... re-enable submit button
-  //   showFetchError();
-  // }
+  try {
+    const resp = await sendFeedback(feedback, options);
+
+    // Success!
+    return resp;
+  } catch (err) {
+    console.error(err);
+    // Errored... re-enable submit button
+    showFetchError();
+  }
 }

packages/feedback/src/util/prepareFeedbackEvent.ts

@@ -9,8 +9,6 @@ interface PrepareFeedbackEventParams {
 }
 /**
  * Prepare a feedback event & enrich it with the SDK metadata.
- *
- * TODO: Refactor this with the replay version
  */
 export async function prepareFeedbackEvent({
   client,
@@ -27,10 +25,12 @@ export async function prepareFeedbackEvent({
     event,
     { integrations: undefined },
     scope,
+    client,
   )) as FeedbackEvent | null;
 
-  // If e.g. a global event processor returned null
-  if (!preparedEvent) {
+  if (preparedEvent === null) {
+    // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
+    client.recordDroppedEvent('event_processor', 'feedback', event);
     return null;
   }
 
@@ -39,14 +39,5 @@ export async function prepareFeedbackEvent({
   // we need to do this manually.
   preparedEvent.platform = preparedEvent.platform || 'javascript';
 
-  // extract the SDK name because `client._prepareEvent` doesn't add it to the event
-  const metadata = client.getSdkMetadata && client.getSdkMetadata();
-  const { name, version } = (metadata && metadata.sdk) || {};
-
-  preparedEvent.sdk = {
-    name: name || 'sentry.javascript.unknown',
-    version: version || '0.0.0',
-  };
-
   return preparedEvent;
 }

packages/feedback/src/util/sendFeedbackRequest.ts

@@ -1,20 +1,23 @@
-import { getCurrentHub } from '@sentry/core';
-import type { FeedbackEvent } from '@sentry/types';
-import { uuid4 } from '@sentry/utils';
+import { createEventEnvelope, getCurrentHub } from '@sentry/core';
+import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
 
 import type { SendFeedbackData } from '../types';
+import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 
 /**
- * Send feedback using `fetch()`
+ * Send feedback using transport
  */
-export function sendFeedbackRequest({
+export async function sendFeedbackRequest({
   feedback: { message, email, name, replay_id, url },
-}: SendFeedbackData): string | undefined {
+}: SendFeedbackData): Promise<void | TransportMakeRequestResponse> {
+  debugger;
   const hub = getCurrentHub();
   const client = hub.getClient();
   const scope = hub.getScope();
+  const transport = client && client.getTransport();
+  const dsn = client && client.getDsn();
 
-  if (!client) {
+  if (!client || !transport || !dsn) {
     return;
   }
 
@@ -31,11 +34,87 @@ export function sendFeedbackRequest({
     type: 'feedback',
   };
 
-  return client.captureEvent(
-    baseEvent,
-    {
-      event_id: uuid4(),
-    },
+  const feedbackEvent = await prepareFeedbackEvent({
     scope,
-  );
+    client,
+    event: baseEvent,
+  });
+
+  if (feedbackEvent === null) {
+    return;
+  }
+
+  /*
+  For reference, the fully built event looks something like this:
+  {
+      "type": "feedback",
+      "event_id": "d2132d31b39445f1938d7e21b6bf0ec4",
+      "timestamp": 1597977777.6189718,
+      "dist": "1.12",
+      "platform": "javascript",
+      "environment": "production",
+      "release": 42,
+      "tags": {"transaction": "/organizations/:orgId/performance/:eventSlug/"},
+      "sdk": {"name": "name", "version": "version"},
+      "user": {
+          "id": "123",
+          "username": "user",
+          "email": "user@site.com",
+          "ip_address": "192.168.11.12",
+      },
+      "request": {
+          "url": None,
+          "headers": {
+              "user-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15"
+          },
+      },
+      "contexts": {
+          "feedback": {
+              "message": "test message",
+              "contact_email": "test@example.com",
+              "type": "feedback",
+          },
+          "trace": {
+              "trace_id": "4C79F60C11214EB38604F4AE0781BFB2",
+              "span_id": "FA90FDEAD5F74052",
+              "type": "trace",
+          },
+          "replay": {
+              "replay_id": "e2d42047b1c5431c8cba85ee2a8ab25d",
+          },
+      },
+    }
+  */
+
+  const envelope = createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel);
+
+  let response: void | TransportMakeRequestResponse;
+
+  try {
+    console.log(envelope);
+    response = await transport.send(envelope);
+  } 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;
+  }
+
+  // TODO (v8): we can remove this guard once transport.send's type signature doesn't include void anymore
+  if (!response) {
+    return response;
+  }
+
+  // If the status code is invalid, we want to immediately stop & not retry
+  if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+    throw new Error('Unable to send Feedback');
+  }
+
+  return response;
 }

packages/feedback/src/widget/createWidget.ts

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