metamask-extension
metamask-extension copied to clipboard
feat(1852): Implement sentry user report on error screen
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:
- Describe what happened - open a form to sent a message to sentry
- Contact support - existing link to redirect to
process.env.SUPPORT_REQUEST_LINK
- 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
Related issues
Fixes: https://github.com/MetaMask/MetaMask-planning/issues/1852
Manual testing steps
- Set up sentry (https://github.com/MetaMask/metamask-extension/blob/develop/development/README.md)
- Add DSN to
SENTRY_DSN_DEV
in local env set up, and markENABLE_SETTINGS_PAGE_DEV_OPTIONS
=true - Run
yarn webpack --watch --sentry
- Ensure
Participate in MetaMetrics
is opt in - Click "develop options" in settings
- Click "Generate A Page Crash" button
- User is redirected to new error page
- Click
Describe what happened
can open a sentry feedback form, then in your sentry project you can find the submitted form withinUser Feedback
section - Click
Contact support
will redirect user to metamask support page - 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
- [ ] I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using JSDoc format if applicable
- [ ] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
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.