Allow manual screenshot upload in User Feedback widget

[fabregas4]

Problem Statement

Some environments require an app to be loaded within an iframe (e.g. Shopify embedded apps). Clicking 'Add a screenshot' on the User Feedback widget shows a message of: Failed to execute 'getDisplayMedia' on 'MediaDevices': Access to the feature "display-capture" is disallowed by permission policy.

As I understand, this is because the iFrame hasn't given permission for native screenshots. I realise there's not much you can do about that, but it would be nice if as a fallback, Sentry could revert to a regular file upload field so a user can upload their own screenshots, as it can be quite an important part of a bug report.

Solution Brainstorm

It could either fall back automatically, or it could be another config option, e.g. enableFileUpload or enableImageUpload

Then those that know their app is used in an environment where the screen capture API is not available, could set enableScreenshot to false and enableImageUpload to true.

Priority

_{React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[andreiborza]

Hey, thank you for taking the time to file this. I'll pass this on internally.

[tjhiggins]

Same issue with trying to take a screenshot inside an iframe inside a chrome extension sidepanel. Currently chrome straight up crashes: https://issues.chromium.org/issues/41497364.

Here is my hacky workaround using html2canvas (https://www.npmjs.com/package/html2canvas)

// Override navigator.mediaDevices.getDisplayMedia and use html2canvas
navigator.mediaDevices.getDisplayMedia = async () => {
  const canvas = await html2canvas(document.body, {
    x: window.scrollX,
    y: window.scrollY,
    width: window.innerWidth,
    height: window.innerHeight,
  });
  return canvas.captureStream();
};