Skip to content

Commit

Permalink
feat(1852): Implement sentry user report on error screen (#27857)
Browse files Browse the repository at this point in the history
<!--
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
DDDDDanica authored Nov 8, 2024
1 parent 1d4fcc0 commit 152a50e
Show file tree
Hide file tree
Showing 48 changed files with 1,124 additions and 478 deletions.
12 changes: 0 additions & 12 deletions app/_locales/de/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/el/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 30 additions & 10 deletions app/_locales/en/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/en_GB/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/es/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/es_419/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/fr/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/hi/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/id/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 0 additions & 4 deletions app/_locales/it/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/ja/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/ko/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions app/_locales/ph/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 152a50e

Please sign in to comment.