metamask-extension icon indicating copy to clipboard operation
metamask-extension copied to clipboard

feat(1852): Implement sentry user report on error screen

Open DDDDDanica opened this issue 4 months ago • 6 comments

Description

Sentry provides a feature to collect user feedback to users when an issue occurs. This could be a great help to fix Sentry issues which sometimes come without a lot of context and are difficult to reproduce.

Hence we use out-of-box solution from sentry to implement User Feedback Widget via Sentry.feedbackIntegration. You can find more technical details in this comment.

Design Figma link here.

What's expected in this PR:

  • Refactor original ui/pages/error/error.component.js to typescript, clean up / update language content, and improve the layout based on new design (see above Figma link) that would be consistent as mobile implementation
  • Add a new option in develop options to cause a page crash by remove one language file (for me was easiest way to trigger), which will bring us to error page
  • In new error page, we have 3 options:
  1. Describe what happened - open a form to sent a message to sentry
  2. Contact support - existing link to redirect to process.env.SUPPORT_REQUEST_LINK
  3. Try again - close the extension and allow user to open again
  • Convert ui/ducks/locale/locale.js to typescript and add related tests
  • Add e2e tests with POM pattern

This is the scenario for extension:

  • GIVEN a user has MM installed
  • AND Sentry is enabled (user enabled MetaMetrics)
  • WHEN an unhandled issue occurs in MM
  • THEN MM crashes
  • AND an event is sent to Sentry
  • AND user is given the possibility to describe what happened to him by filling a form
  • AND his feedback gets paired to the Sentry event once user presses the "submit" button at the bottom of the form
  • AND user is given more comprehensive error screen when it crashes

Open in GitHub Codespaces

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/1852

Manual testing steps

  1. Set up sentry (https://github.com/MetaMask/metamask-extension/blob/develop/development/README.md)
  2. Add DSN to SENTRY_DSN_DEV in local env set up, and mark ENABLE_SETTINGS_PAGE_DEV_OPTIONS=true
  3. Run yarn webpack --watch --sentry
  4. Ensure Participate in MetaMetrics is opt in
  5. Click "develop options" in settings
  6. Click "Generate A Page Crash" button
  7. User is redirected to new error page
  8. Click Describe what happened can open a sentry feedback form, then in your sentry project you can find the submitted form within User Feedback section
  9. Click Contact support will redirect user to metamask support page
  10. Click Try again will close the extension and ready for reload

Screenshots/Recordings

Before

After

https://github.com/user-attachments/assets/56145a44-82d3-4d07-be03-87d81ee6a9d7

Pre-merge author checklist

Pre-merge reviewer checklist

  • [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

DDDDDanica avatar Oct 15 '24 09:10 DDDDDanica