Sentry自定义用户反馈UI：截图无法显示及预览问题求助

SaaS（Sentry官方平台）

自定义用户反馈UI后，发送的截图无法在Sentry中正常显示：

用户界面 #

初始实现代码 #

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)

  // 给事件添加自定义标签
  Sentry.withScope((scope) => {
    scope.setTag("feedback.reaction", reaction)
    scope.setTag("feedback.category", category)
  })
}

控制台显示附件已存在，base64解码后可得到正确图片，但Sentry平台中找不到该附件：

目前已能在Sentry中收到截图：

但无法打开图片预览。

修改后的代码 #

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

  const eventId = Sentry.captureMessage("用户反馈")

  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)
}

使用base64解码工具可正常预览图片：

但在Sentry平台中无法预览该图片：

内容的提问来源于stack exchange，提问作者Ala Eddine Menai