[Epic] User Feedback Annotations

[ryan953]

The goal of the project is to close a large feature request, sentry users want to allow their customers to create an mark-up screen shots to better illustrate their feedback problems.

Basically, we want to solve for the cases in getsentry/sentry-javascript#9460

KTTR Tracking

Design Files

• Screenshot only wireframe figjam
• v3 Figma with expanding screen shot area

Prep

Beta Give feedback

1. Compare and choose framework for UI components, minimizing confusion with react, and minimizing bundle-size overhead: https://www.notion.so/sentry/User-Feedback-Screenshot-Frameworks-996f2ff9513249068a176437dd82d8a9?pvs=4

Core - SDK (MVP)

Beta Give feedback

1. Integrate sendFeedback() with captureUserFeedback(): Rename sendFeedback to captureFeedback & enhance it sentry-javascript#10953
2. Create SDK-Loader style loader for async loading the image-capture transpiled ts/js onClick={() => { hideFeedbackWidget(); const image = await askUserForAnnotatedScreenshot(); Sentry.getCurrentScope().addAttachment(image); showFeedbackWidget(image); }}
3. Lazy load feedback screenshot sentry-javascript#11435
   +0
   
4. Create enableScreenshotReporting: boolean option on existing Feedback integration class/hook
5. Disable "Add screenshot" button for mobile users because iOS & android do not have support for the API
6. Build the two-step design: screen shot is rendered -> user selects an area to include (or clicks cancel) -> preview screen is rendered -> user chooses "accept/go back" -> screen shot replaces button inside widget, is attached to feedback
7. Don't forget to re-use the theme/classnames/css variables from the widget, use it in the screen shot'r
8. Update screenshots and cropping styles and allow for customization
9. Add tests!!!

Core - App (MVP)

Beta Give feedback

1. Show an icon in the feedback list when attachments are present
2. Render attachments inside Feedback Details
3. Upsell when an attachment was dropped due to quota
4. Update screenshots in Feedback Details to align with designs #67707
   +0
   

Screenshots (GA)

Beta Give feedback

1. Update Feedback Product docs (what is this thing, include images, attachment quota management)
2. Update feedback perf docs (what is the overhead)
3. Update Feedback config docs (how to enable)
4. Update in-app onboarding experience

Bugs

Beta Give feedback

1. Integrate sendFeedback() with captureUserFeedback(): Rename sendFeedback to captureFeedback & enhance it sentry-javascript#10953
2. [User Feedback] Scroll feedback form when window height is short sentry-javascript#11842
   +0
   
3. [User Feedback] Reconfigure feedback form layout when window is narrow and screenshot is aded sentry-javascript#11843
   +0
   
4. [User Feedback] When the feedback dialog is open scroll events get passed through to the page below (this is worse when screenshot is added) sentry-javascript#11844
   +0
   
5. Safari adds black bars to the right & bottom of the screen shot, figure out what's happening here.
6. The canvas element doesn't resize properly after cropping (vertically) or on window resize.
7. The confirm/cancel buttons are inaccessible when the cropped image is too tall
8. Update the cropping rectangle after a resize
9. Cropping can be challenging #67056
   +0
   

[ryan953]

We've delievered the Screenshots portion of this, but the annotations stuff has been deferred until we get some feedback. Unassigning and setting this back to TODO. Also renamed to better track the remaining work.

[ryan953]

POC: getsentry/sentry-javascript#11175