Environment

SaaS (https://sentry.io/)

What are you trying to accomplish?

I built my own custom UI to send user feedback, however I could not find the screenshot I send:

User Interface

Function

export function sendFeedback(feedback: Feedback) {
  const { name, email, message, reaction, category, screenshot } = feedback
  const eventId = Sentry.lastEventId()

  const userFeedback = {
    name,
    email,
    message,
    associatedEventId: eventId,
    tags: {
      reaction,
      category,
    },
    attachments: [
      {
        filename: `${name}-screenshot.png`,
        data: screenshot,
      },
    ],
  }

  console.table(userFeedback)

  Sentry.captureFeedback(userFeedback)

  // Add custom tags to the event
  Sentry.withScope((scope) => {
    scope.setTag("feedback.reaction", reaction)
    scope.setTag("feedback.category", category)
  })
}

Output

As you see the attachment is available and when I decode the base-64 value I got the exact image. But in Sentry, I did not find that attached image:

Update

Currently, I’m able to receive the screenshot:

But I could not open the preview.

Code

export function sendFeedback(feedback: Feedback) {
  const { name, email, message, reaction, category, screenshot } = feedback

  const eventId = Sentry.captureMessage("User Feedback")

  const userFeedback = {
    name,
    email,
    message,
    associatedEventId: eventId,
    tags: {
      reaction,
      category,
    },
  }

  if (screenshot) {
    Sentry.getCurrentScope().addAttachment({
      filename: `${name}-screenshot.png`,
      data: `data:image/png;base64,${screenshot}`,
      contentType: "image/png",
    })
  }

  Sentry.captureFeedback(userFeedback)
}

When I use base64 converter, I got the image preview:

But in Sentry, I could not preview the image :