Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(1852): Implement sentry user report on error screen (#27857)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **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](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#user-feedback-widget) via `Sentry.feedbackIntegration`. You can find more technical details in [this comment](MetaMask/MetaMask-planning#1852 (comment)). Design Figma link [here](https://www.figma.com/design/DM5G1pyp74sMJwyKbw1KiR/Error-message-and-bug-report?node-id=1-4243&node-type=frame&t=iZI13qsxataukM4a-0). ### 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 <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 3. What is the improvement/solution? --> [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27857?quickstart=1) ## **Related issues** Fixes: MetaMask/MetaMask-planning#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** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** https://github.com/user-attachments/assets/56145a44-82d3-4d07-be03-87d81ee6a9d7 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.
- Loading branch information