search

getsentry / sentry

Developer-first error tracking and performance monitoring
https://sentry.io
Other
37.54k stars 4.04k forks source link

[Epic] User Feedback Annotations #63749

Open ryan953 opened 5 months ago

ryan953 commented 5 months ago

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 https://github.com/getsentry/sentry-javascript/issues/9460

KTTR Tracking

Design Files

### Prep
- [x] 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)
- [ ] Integrate sendFeedback() with captureUserFeedback(): https://github.com/getsentry/sentry-javascript/issues/10953
- [x] 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); }}`
- [ ] https://github.com/getsentry/sentry-javascript/issues/11435
- [x] Create `enableScreenshotReporting: boolean` option on existing Feedback integration class/hook
- [x] Disable "Add screenshot" button for mobile users because iOS & android do not have support for the API
- [x] 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
- [x] Don't forget to re-use the theme/classnames/css variables from the widget, use it in the screen shot'r
- [x] Update screenshots and cropping styles and allow for customization
- [ ] Add tests!!!
### Core - App (MVP)
- [x] Show an icon in the feedback list when attachments are present
- [x] Render attachments inside Feedback Details
- [ ] Upsell when an attachment was dropped due to quota
- [ ] https://github.com/getsentry/sentry/issues/67707
### Screenshots (GA)
- [x] Update Feedback Product docs (what is this thing, include images, attachment quota management)
- [ ] Update feedback perf docs (what is the overhead)
- [x] Update Feedback config docs (how to enable)
- [x] Update in-app onboarding experience
### Bugs
- [ ] Integrate sendFeedback() with captureUserFeedback():  https://github.com/getsentry/sentry-javascript/issues/10953
- [ ] https://github.com/getsentry/sentry-javascript/issues/11842
- [ ] https://github.com/getsentry/sentry-javascript/issues/11843
- [ ] https://github.com/getsentry/sentry-javascript/issues/11844
- [x] Safari adds black bars to the right & bottom of the screen shot, figure out what's happening here.
- [x] The canvas element doesn't resize properly after cropping (vertically) or on window resize.
- [x] The confirm/cancel buttons are inaccessible when the cropped image is too tall
- [x] Update the cropping rectangle after a resize
- [ ] https://github.com/getsentry/sentry/issues/67056

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 https://github.com/getsentry/sentry-javascript/issues/9460

KTTR Tracking

Design File

### Annotations
- [ ] Create the toolbar inside the Preview screen, allowing for free-form text, shapes, adding text, and color pickers for each.
- [ ] Implement an undo/redo stack AND/OR a 'reset' button to remove some/all annotations
- [ ] Discuss/implement a 'select' mode where existing annotations (shapes, text, freeforms) can be re-selected, so that colors and position can be adjusted.
- [ ] https://github.com/getsentry/sentry-javascript/issues/11166
- [ ] https://github.com/getsentry/sentry-javascript/pull/11175
ryan953 commented 1 month ago

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 commented 1 month ago

POC: https://github.com/getsentry/sentry-javascript/pull/11175