add sendfeedback to sdk

Author: c298lee

packages/feedback/src/index.ts

@@ -0,0 +1,6 @@
+export interface SendFeedbackData {
+  message: string,
+  email: string,
+  replay_id: string,
+  url: string,
+}

packages/feedback/src/types/feedback.ts

@@ -1,5 +1 @@
-export * from './performance';
-export * from './replay';
-export * from './replayFrame';
-export * from './request';
-export * from './rrweb';
+export * from './feedback';

packages/feedback/src/types/index.ts

@@ -0,0 +1,44 @@
+import type {Scope} from '@sentry/core';
+import {prepareEvent} from '@sentry/core';
+import type {Client, FeedbackEvent} from '@sentry/types';
+
+/**
+ * Prepare a feedback event & enrich it with the SDK metadata.
+ */
+export async function prepareFeedbackEvent({
+  client,
+  scope,
+  event,
+}: {
+  client: Client;
+  event: FeedbackEvent;
+  scope: Scope;
+}): Promise<FeedbackEvent | null> {
+  const preparedEvent = (await prepareEvent(
+    client.getOptions(),
+    event,
+    {integrations: []},
+    scope
+  )) as FeedbackEvent | null;
+
+  // If e.g. a global event processor returned null
+  if (!preparedEvent) {
+    return null;
+  }
+
+  // This normally happens in browser client "_prepareEvent"
+  // but since we do not use this private method from the client, but rather the plain import
+  // 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 = {
+    ...preparedEvent.sdk,
+    name: name || 'sentry.javascript.unknown',
+    version: version || '0.0.0',
+  };
+  return preparedEvent;
+}

packages/feedback/src/util/prepareFeedbackEvent.ts

@@ -0,0 +1,115 @@
+import { getCurrentHub } from '@sentry/core';
+import { dsnToString } from '@sentry/utils';
+
+import type { SendFeedbackData } from '../types';
+import { prepareFeedbackEvent } from './prepareFeedbackEvent';
+
+/**
+ * Send feedback using `fetch()`
+ */
+export async function sendFeedbackRequest({
+  message,
+  email,
+  replay_id,
+  url,
+}: SendFeedbackData): Promise<Response | null> {
+  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;
+  }
+
+  const baseEvent = {
+    feedback: {
+      contact_email: email,
+      message,
+      replay_id,
+      url,
+    },
+    // type: 'feedback_event',
+  };
+
+  const feedbackEvent = await prepareFeedbackEvent({
+    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/util/sendFeedbackRequest.ts

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "module": "esnext"
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "../feedback/src/util/sendFeedbackRequest.ts", "../feedback/src/types/feedback.ts"]
 }

packages/replay/tsconfig.json

@@ -0,0 +1,16 @@
+import type {Event} from './event';
+
+/**
+ * NOTE: These types are still considered Beta and subject to change.
+ * @hidden
+ */
+export interface FeedbackEvent extends Event {
+  feedback: {
+    contact_email: string;
+    message: string;
+    replay_id: string;
+    url: string;
+  };
+  // TODO: Add this event type to Event
+  // type: 'feedback_event';
+}

packages/types/src/feedback.ts

@@ -69,6 +69,7 @@ export type {
   Profile,
 } from './profiling';
 export type { ReplayEvent, ReplayRecordingData, ReplayRecordingMode } from './replay';
+export type { FeedbackEvent } from './feedback';
 export type { QueryParams, Request, SanitizedRequestData } from './request';
 export type { Runtime } from './runtime';
 export type { CaptureContext, Scope, ScopeContext } from './scope';