working screenshot attachment

Author: c298lee

packages/core/src/envelope.ts

@@ -1,4 +1,6 @@
 import type {
+  Attachment,
+  AttachmentItem,
   DsnComponents,
   Event,
   EventEnvelope,
@@ -9,8 +11,10 @@ import type {
   SessionAggregates,
   SessionEnvelope,
   SessionItem,
+  TextEncoderInternal,
 } from '@sentry/types';
 import {
+  createAttachmentEnvelopeItem,
   createEnvelope,
   createEventEnvelopeHeaders,
   dsnToString,
@@ -86,3 +90,29 @@ export function createEventEnvelope(
   const eventItem: EventItem = [{ type: eventType }, event];
   return createEnvelope<EventEnvelope>(envelopeHeaders, [eventItem]);
 }
+
+/**
+ * Create an Envelope from an event.
+ */
+export function createAttachmentEnvelope(
+  event: Event,
+  attachment: Attachment,
+  dsn?: DsnComponents,
+  metadata?: SdkMetadata,
+  tunnel?: string,
+  textEncoder?: TextEncoderInternal,
+): EventEnvelope {
+  const sdkInfo = getSdkMetadataForEnvelopeHeader(metadata);
+  enhanceEventWithSdkInfo(event, metadata && metadata.sdk);
+
+  const envelopeHeaders = createEventEnvelopeHeaders(event, sdkInfo, tunnel, dsn);
+
+  // 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 event.sdkProcessingMetadata;
+
+  const attachmentItem: AttachmentItem = createAttachmentEnvelopeItem(attachment, textEncoder);
+  return createEnvelope<EventEnvelope>(envelopeHeaders, [attachmentItem]);
+}

packages/core/src/index.ts

@@ -7,7 +7,7 @@ export type { IntegrationIndex } from './integration';
 
 export * from './tracing';
 export * from './semanticAttributes';
-export { createEventEnvelope, createSessionEnvelope } from './envelope';
+export { createEventEnvelope, createSessionEnvelope, createAttachmentEnvelope } from './envelope';
 export {
   addBreadcrumb,
   captureCheckIn,
@@ -83,12 +83,7 @@ export { hasTracingEnabled } from './utils/hasTracingEnabled';
 export { isSentryRequestUrl } from './utils/isSentryRequestUrl';
 export { handleCallbackErrors } from './utils/handleCallbackErrors';
 export { parameterize } from './utils/parameterize';
-export {
-  spanToTraceHeader,
-  spanToJSON,
-  spanIsSampled,
-  spanToTraceContext,
-} from './utils/spanUtils';
+export { spanToTraceHeader, spanToJSON, spanIsSampled, spanToTraceContext } from './utils/spanUtils';
 export { getRootSpan } from './utils/getRootSpan';
 export { applySdkMetadata } from './utils/sdkMetadata';
 export { DEFAULT_ENVIRONMENT } from './constants';

packages/feedback-screenshot/src/screenshot.tsx

@@ -7,20 +7,26 @@ import { h, render } from 'preact';
 interface FeedbackScreenshotOptions {
   buttonRef: HTMLDivElement;
   croppingRef: HTMLDivElement;
-  props: unknown;
+  props: {
+    screenshotImage: HTMLCanvasElement | null;
+    setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+  };
 }
 
 export interface FeedbackScreenshotIntegrationOptions {
   buttonRef: HTMLDivElement;
   croppingRef: HTMLDivElement;
-  props: unknown;
+  props: {
+    screenshotImage: HTMLCanvasElement | null;
+    setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+  };
 }
 
 const INTEGRATION_NAME = 'FeedbackScreenshot';
 const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
 /** Exported only for type safe tests. */
-export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreenshotOptions> = {}) => {
+export const _feedbackScreenshotIntegration = ((options: FeedbackScreenshotOptions) => {
   return {
     name: INTEGRATION_NAME,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -29,11 +35,21 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
       return {
         buttonRef: options.buttonRef || WINDOW.document.createElement('div'),
         croppingRef: options.croppingRef || WINDOW.document.createElement('div'),
-        props: options.props || null,
+        props: {
+          screenshotImage: options.props.screenshotImage,
+          setScreenshotImage: options.props.setScreenshotImage,
+        },
       };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
-      return render(<ScreenshotButton croppingRef={options.croppingRef} />, options.buttonRef);
+      return render(
+        <ScreenshotButton
+          croppingRef={options.croppingRef}
+          screenshotImage={options.props.screenshotImage}
+          setScreenshotImage={options.props.setScreenshotImage}
+        />,
+        options.buttonRef,
+      );
     },
   };
 }) satisfies IntegrationFn;

packages/feedback-screenshot/src/screenshotButton.tsx

@@ -4,17 +4,23 @@ import { useTakeScreenshot } from './useTakeScreenshot';
 import type { VNode } from 'preact';
 import { ScreenshotWidget } from './screenshotWidget';
 
-type Props = { croppingRef: HTMLDivElement };
+type Props = {
+  croppingRef: HTMLDivElement;
+  screenshotImage: HTMLCanvasElement | null;
+  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+};
 
-export function ScreenshotButton({ croppingRef }: Props): VNode {
+export function ScreenshotButton({ croppingRef, screenshotImage, setScreenshotImage }: Props): VNode {
   const [clicked, setClicked] = useState(false);
   const { isInProgress, takeScreenshot } = useTakeScreenshot();
 
   const handleClick = useCallback(async () => {
     if (!clicked) {
       const image = await takeScreenshot();
-      render(<ScreenshotWidget image={image} />, croppingRef);
+      setScreenshotImage(image);
+      render(<ScreenshotWidget screenshotImage={image} setScreenshotImage={setScreenshotImage} />, croppingRef);
     } else {
+      setScreenshotImage(null);
       render(null, croppingRef);
     }
     setClicked(prev => !prev);

packages/feedback-screenshot/src/screenshotWidget.tsx

@@ -1,9 +1,13 @@
 import { h, render } from 'preact';
 import type { VNode } from 'preact';
 
-type Props = { image: HTMLCanvasElement };
+type Props = {
+  screenshotImage: HTMLCanvasElement | null;
+  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+};
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function ScreenshotWidget({ image }: Props): VNode | null {
+export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props): VNode | null {
+  const image = screenshotImage;
   return image ? (
     <div style="padding-right: 16px;">
       <img

packages/feedback/src/sendFeedback.ts

@@ -1,7 +1,7 @@
 import { getLocationHref } from '@sentry/utils';
 
 import { FEEDBACK_API_SOURCE } from './constants';
-import type { SendFeedbackOptions } from './types';
+import type { Screenshot, SendFeedbackOptions } from './types';
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
 
 interface SendFeedbackParams {
@@ -18,6 +18,7 @@ interface SendFeedbackParams {
 export function sendFeedback(
   { name, email, message, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   options: SendFeedbackOptions = {},
+  screenshots: Screenshot[] = [],
 ): ReturnType<typeof sendFeedbackRequest> {
   if (!message) {
     throw new Error('Unable to submit feedback with empty message');
@@ -34,5 +35,6 @@ export function sendFeedback(
       },
     },
     options,
+    screenshots,
   );
 }

packages/feedback/src/types/index.ts

@@ -21,6 +21,7 @@ export interface SendFeedbackOptions {
    * Should include replay with the feedback?
    */
   includeReplay?: boolean;
+  screenshots?: Screenshot[];
 }
 
 /**
@@ -30,7 +31,6 @@ export interface FeedbackFormData {
   message: string;
   email?: string;
   name?: string;
-  screenshot?: Uint8Array;
 }
 
 /**
@@ -343,3 +343,9 @@ export interface FeedbackWidget {
   closeDialog: () => void;
   removeDialog: () => void;
 }
+
+export interface Screenshot {
+  filename: string;
+  data: Uint8Array;
+  contentType: string;
+}

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -4,7 +4,7 @@ import { logger } from '@sentry/utils';
 import { FEEDBACK_WIDGET_SOURCE } from '../constants';
 import { DEBUG_BUILD } from '../debug-build';
 import { sendFeedback } from '../sendFeedback';
-import type { FeedbackFormData, SendFeedbackOptions } from '../types';
+import type { FeedbackFormData, Screenshot, SendFeedbackOptions } from '../types';
 import type { DialogComponent } from '../widget/Dialog';
 
 /**
@@ -14,6 +14,7 @@ import type { DialogComponent } from '../widget/Dialog';
 export async function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
+  screenshots?: Screenshot[],
   options?: SendFeedbackOptions,
 ): Promise<TransportMakeRequestResponse | void> {
   if (!dialog) {
@@ -31,7 +32,7 @@ export async function handleFeedbackSubmit(
   dialog.hideError();
 
   try {
-    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options);
+    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options, screenshots);
 
     // Success!
     return resp;

packages/feedback/src/util/sendFeedbackRequest.ts

@@ -1,8 +1,8 @@
-import { createEventEnvelope, getClient, withScope } from '@sentry/core';
+import { createEventEnvelope, getClient, withScope, createAttachmentEnvelope } from '@sentry/core';
 import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
 
 import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
-import type { SendFeedbackData, SendFeedbackOptions } from '../types';
+import type { Screenshot, SendFeedbackData, SendFeedbackOptions } from '../types';
 import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 
 /**
@@ -11,6 +11,7 @@ import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 export async function sendFeedbackRequest(
   { feedback: { message, email, name, source, url } }: SendFeedbackData,
   { includeReplay = true }: SendFeedbackOptions = {},
+  screenshots: Screenshot[],
 ): Promise<void | TransportMakeRequestResponse> {
   const client = getClient();
   const transport = client && client.getTransport();
@@ -57,6 +58,19 @@ export async function sendFeedbackRequest(
 
     const envelope = createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel);
 
+    let attachment_envelope;
+    for (const attachment of screenshots || []) {
+      attachment_envelope = createAttachmentEnvelope(
+        feedbackEvent,
+        attachment,
+        dsn,
+        client.getOptions()._metadata,
+        client.getOptions().tunnel,
+        // eslint-disable-next-line @sentry-internal/sdk/no-optional-chaining
+        client.getOptions().transportOptions && client.getOptions().transportOptions?.textEncoder,
+      );
+    }
+
     let response: void | TransportMakeRequestResponse;
 
     try {
@@ -84,6 +98,33 @@ export async function sendFeedbackRequest(
       throw new Error('Unable to send Feedback');
     }
 
+    if (attachment_envelope) {
+      try {
+        response = await transport.send(attachment_envelope);
+      } catch (err) {
+        const error = new Error('Unable to send Feedback screenshot');
+
+        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;
+      }
+
+      // Require valid status codes, otherwise can assume feedback was not sent successfully
+      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+        throw new Error('Unable to send Feedback screenshot');
+      }
+    }
+
     return response;
   });
 }