wip: screenshots in feedback

packages/feedback/src/sendFeedback.ts

@@ -2,13 +2,10 @@ import type { BrowserClient, Replay } from '@sentry/browser';
 import { getCurrentHub } from '@sentry/core';
 import { getLocationHref } from '@sentry/utils';
 
-import type { SendFeedbackOptions } from './types';
+import type { FeedbackFormData, Screenshot, SendFeedbackOptions } from './types';
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
 
-interface SendFeedbackParams {
-  message: string;
-  name?: string;
-  email?: string;
+interface SendFeedbackParams extends FeedbackFormData {
   url?: string;
 }
 
@@ -18,6 +15,7 @@ interface SendFeedbackParams {
 export function sendFeedback(
   { name, email, message, url = getLocationHref() }: SendFeedbackParams,
   { includeReplay = true }: SendFeedbackOptions = {},
+  screenshots: Screenshot[] = [],
 ): ReturnType<typeof sendFeedbackRequest> {
   const client = getCurrentHub().getClient<BrowserClient>();
   const replay = includeReplay && client ? (client.getIntegrationById('Replay') as Replay | undefined) : undefined;
@@ -38,5 +36,6 @@ export function sendFeedback(
       url,
       replay_id: replayId,
     },
+    screenshots,
   });
 }

packages/feedback/src/types/index.ts

@@ -13,13 +13,16 @@ export interface SendFeedbackData {
     replay_id?: string;
     name?: string;
   };
+  screenshots: Screenshot[];
 }
 
 export interface SendFeedbackOptions {
   /**
    * Should include replay with the feedback?
    */
   includeReplay?: boolean;
+
+  screenshots?: Screenshot[];
 }
 
 /**
@@ -31,6 +34,8 @@ export interface FeedbackFormData {
   name?: string;
 }
 
+export interface FeedbackFormDataWithOptionalScreenshots extends FeedbackFormData, OptionalScreenshotData {}
+
 /**
  * General feedback configuration
  */
@@ -337,3 +342,21 @@ export interface FeedbackWidget {
   closeDialog: () => void;
   removeDialog: () => void;
 }
+
+export interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+
+export interface OptionalScreenshotData {
+  screenshot?: Blob | null;
+  screenshotCutout?: Blob | null;
+}
+
+export interface Screenshot {
+  filename: string;
+  data: Uint8Array;
+  contentType: string;
+}

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -2,7 +2,7 @@ import type { TransportMakeRequestResponse } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
 import { sendFeedback } from '../sendFeedback';
-import type { FeedbackFormData, SendFeedbackOptions } from '../types';
+import type { FeedbackFormData, Screenshot, SendFeedbackOptions } from '../types';
 import type { DialogComponent } from '../widget/Dialog';
 
 /**
@@ -13,6 +13,7 @@ export async function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
   options?: SendFeedbackOptions,
+  screenshots?: Screenshot[],
 ): Promise<TransportMakeRequestResponse | void> {
   if (!dialog) {
     // Not sure when this would happen
@@ -29,7 +30,7 @@ export async function handleFeedbackSubmit(
   dialog.hideError();
 
   try {
-    const resp = await sendFeedback(feedback, options);
+    const resp = await sendFeedback(feedback, options, screenshots);
 
     // Success!
     return resp;