Add attachments to user feedback

[franNadalesDN]

Problem Statement

I want users to be able to report issues and feedback with attachments such log files or images.

Solution Brainstorm

Use similar structure as events for User feedback.

Product Area

User Feedback

[getsantry]

Assigning to @getsentry/support for routing, due by Tuesday, May 30th at 5:00 pm (sfo). ⏲️

[getsantry]

Routing to @getsentry/product-owners-user-feedback for triage, due by Thursday, June 1st at 11:54 am (sfo). ⏲️

[bruno-garcia]

Today the feedback you can submit with the SDK takes an event_id. So you need to capture an exception or at least a message to attach the feedback to. The same way you can use that event_id to tie attachments to it.

I believe we can improve this by letting you capture feedbacks without the need to capture an event (error/msg), and we recently did that to power our new Widget. So it's something we can look into going forward but for now I suggest using the captureMessage with Attachment + captureUserFeedback route

[billyvg]

We are also adding screenshotting to our User Feedback widget: #63749

[bruno-garcia]

For reference the old API is: https://develop.sentry.dev/sdk/features/#user-feedback

The new API could take a local scope:

let feedback = {name:"", message:""}
Sentry.captureUserFeedback(feedback, scope => scope.addAttachment(...));

The blocker for this approach is the backend accepting the user feedback envelope together with attachments, as we allow for error events. @JoshFerge is this something you can help us with?

[ryan953]

The new/updated api to call is being implemented in getsentry/sentry-javascript#11428

It'll be available on v8.0.0 of the SDK as Sentry.captureFeedback() and will very closely align with the other captureException() and captureMessage() methods we have.

The specific method is implemented with this signature & types:

interface SendFeedbackParams {
  message: string;
  name?: string;
  email?: string;
  url?: string;
  source?: string;
  associatedEventId?: string;
}
interface EventHint {
  event_id?: string;
  captureContext?: CaptureContext;
  mechanism?: Partial<Mechanism>;
  syntheticException?: Error | null;
  originalException?: unknown;
  attachments?: Attachment[];
  data?: any;
  integrations?: string[];
}

function captureFeedback(
  feedbackParams: SendFeedbackParams,
  hint: EventHint & { includeReplay?: boolean } = {},
): string

Look out for it once #11428 lands, which should be part of 8.0.0-beta.6 and beyond.

[mydea]

Hey,

this is possible to do in v8 now - you can use it like follows:

Sentry.captureFeedback(
  { message: "I really like your App, thanks!" },
  {
    attachments: [
      {
        filename: "screenshot.png",
        data: "base64-encoded-image",
      },
    ],
  }
);