CODEWITHSUNDEEP
sentrysentryreact
Ala Eddine Menai
Ala Eddine Menai

Reputation: 2880

Why I could not find the screenshots send by the user in User Feedback UI

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

image

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

image

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:

image

Update

Currently, I'm able to receive the screenshot:

50577937-1eca-47b0-b184-69c019c8984c

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:

image

But in Sentry, I could not preview the image :

image

Upvotes: 0

Views: 87

Answers (1)

Dmytro Bondarenko
Dmytro Bondarenko

Reputation: 1022

I've found this in the Sentry's React-Native PR (https://github.com/getsentry/sentry-react-native/pull/4435/files#diff-dc53374add9dcb598744d48c3b9a4754b382365f6d998b95516f9131d35fc427):

export const base64ToUint8Array = (base64: string): Uint8Array => {
  if (typeof atob !== 'function' || !isWeb()) {
    throw new Error('atob is not available in this environment.');
  }

  const binaryString = atob(base64);
  return new Uint8Array([...binaryString].map(char => char.charCodeAt(0)));
};

It could be what are you looking for. I've tried to use b64 directly in the react-native, spent some time until I realized that the plain b64 just doesn't work.

Upvotes: 0

Related Questions