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

DDDDDanica · 2024-10-15T09:38:41Z

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 mark ENABLE_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 within User 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

2024-10-16.13.09.02.mov

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.

github-actions · 2024-10-15T09:38:55Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

DDDDDanica · 2024-10-15T23:57:44Z

shared/modules/i18n.ts

@@ -177,7 +177,7 @@ function missingKeyError(
    onError?.(error);
    log.error(error);

-    if (process.env.IN_TEST) {
+    if (process.env.IN_TEST || process.env.ENABLE_SETTINGS_PAGE_DEV_OPTIONS) {


Adding this enable to trigger a crash from develop option

DDDDDanica · 2024-10-15T23:58:15Z

test/e2e/tests/account/snap-account-settings.spec.ts

@@ -33,7 +33,7 @@ describe('Add snap account experimental settings @no-mmi', function (this: Suite
        await settingsPage.goToExperimentalSettings();

        const experimentalSettings = new ExperimentalSettings(driver);
-        await settingsPage.check_pageIsLoaded();
+        await experimentalSettings.check_pageIsLoaded();


Typo fixing

DDDDDanica · 2024-10-15T23:59:11Z

ui/pages/error/error.component.tsx

+    let isMounted = true; // For preventing memory leak
+
+    if (sentryButtonRef.current && isMounted) {
+      feedback.attachTo(sentryButtonRef.current); // Attach feedback widget to button


Bound trigger to button click

DDDDDanica · 2024-10-16T00:00:14Z

ui/pages/settings/developer-options-tab/sentry-test.tsx

+      setCurrentLocale(currentLocale, {
+        ...localeMessages,
+        // @ts-expect-error - remove a language string in this page to trigger a page crash
+        developerOptions: undefined,


Remove a language file in current page to trigger crash

DDDDDanica · 2024-10-16T00:00:47Z

ui/pages/settings/settings.component.js

@@ -326,7 +326,7 @@ class SettingsPage extends PureComponent {
      },
    ];

-    if (process.env.ENABLE_SETTINGS_PAGE_DEV_OPTIONS) {
+    if (process.env.ENABLE_SETTINGS_PAGE_DEV_OPTIONS || process.env.IN_TEST) {


enable develop options in e2e test

DDDDDanica · 2024-10-16T00:00:52Z

ui/pages/settings/settings.component.js

@@ -395,7 +395,8 @@ class SettingsPage extends PureComponent {
        />
        <Route exact path={SECURITY_ROUTE} component={SecurityTab} />
        <Route exact path={EXPERIMENTAL_ROUTE} component={ExperimentalTab} />
-        {process.env.ENABLE_SETTINGS_PAGE_DEV_OPTIONS && (
+        {(process.env.ENABLE_SETTINGS_PAGE_DEV_OPTIONS ||
+          process.env.IN_TEST) && (


enable develop options in e2e test

sonarcloud · 2024-10-16T12:09:19Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
81.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

metamaskbot · 2024-10-16T12:30:53Z

Builds ready [e4489e9]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1636 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	310	2031	1572	316	152
		domContentLoaded	1487	1894	1593	103	49
		load	1505	2067	1636	124	60
		domInteractive	24	203	40	39	19
		backgroundConnect	8	170	45	37	18
		firstReactRender	44	208	111	50	24
		getState	5	102	25	29	14
		initialActions	0	0	0	0	0
		loadScripts	1104	1409	1199	84	40
		setupStore	11	129	30	32	15
		uiStartup	1693	2709	1895	225	108

test/e2e/page-objects/pages/ErrorPage.ts

metamaskbot · 2024-10-16T22:15:16Z

Builds ready [ccdf22c]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1674 ± 53 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1576	2086	1681	111	53
		domContentLoaded	1530	2075	1647	117	56
		load	1574	2084	1674	111	53
		domInteractive	24	210	54	48	23
		backgroundConnect	8	68	24	19	9
		firstReactRender	43	200	78	37	18
		getState	4	61	12	16	8
		initialActions	0	64	3	14	7
		loadScripts	1110	1667	1236	118	57
		setupStore	11	74	30	25	12
		uiStartup	1722	2242	1866	145	69

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 3.21 KiB (0.04%)
common: 1.41 KiB (0.02%)

metamaskbot · 2024-11-07T02:09:19Z

Builds ready [b30f186]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1793 ± 77 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1639	2366	1792	163	78
		domContentLoaded	1632	2246	1769	143	69
		load	1640	2358	1793	161	77
		domInteractive	15	71	39	14	7
		backgroundConnect	7	102	27	23	11
		firstReactRender	52	286	105	50	24
		getState	4	57	14	16	8
		initialActions	0	1	0	0	0
		loadScripts	1158	1681	1289	126	61
		setupStore	11	69	27	22	10
		uiStartup	1807	2635	2022	192	92

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 4.74 KiB (0.06%)
common: 518 Bytes (0.01%)

itsyoboieltr

LGTM! The code changes look good to me! I also did the manual testing steps and it all worked for me locally. Great job! Just left one small comment.

app/scripts/lib/setupSentry.js

itsyoboieltr

perfect

metamaskbot · 2024-11-07T17:42:36Z

Builds ready [c9d97fe]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1975 ± 100 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1698	2607	1979	209	100
		domContentLoaded	1648	2558	1947	202	97
		load	1656	2602	1975	209	100
		domInteractive	16	184	58	39	19
		backgroundConnect	9	61	25	17	8
		firstReactRender	46	296	104	47	23
		getState	5	69	20	21	10
		initialActions	0	1	0	0	0
		loadScripts	1191	2088	1446	189	91
		setupStore	11	87	35	26	13
		uiStartup	1851	2831	2216	243	117

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 4.74 KiB (0.06%)
common: 524 Bytes (0.01%)

hjetpoluru · 2024-11-07T18:46:09Z

@DDDDDanica, This is helpful PR for tracking sentry errors.

I notice that when clicking on the Try Again button the application crashes. Could you please check.

Screen.Recording.2024-11-07.at.1.43.21.PM.mov

DDDDDanica · 2024-11-08T12:16:53Z

hey @hjetpoluru thanks for checking, this is expected, as it is not crashing the extension, but close the extension for reload purpose.

hjetpoluru

Manually tested and functionality is LGTM and working as expected. Tests are written in POM and documentation is clear. Nice work @DDDDDanica

DDDDDanica added the team-extension-platform label Oct 15, 2024

DDDDDanica self-assigned this Oct 15, 2024

DDDDDanica requested review from a team as code owners October 15, 2024 09:38

DDDDDanica force-pushed the feature/1852-sentry-feedback branch 12 times, most recently from ead4ad9 to 6ff3574 Compare October 15, 2024 22:44

DDDDDanica changed the title ~~Draft: feat(1852): Implement sentry user report on error screen~~ feat(1852): Implement sentry user report on error screen Oct 15, 2024

DDDDDanica force-pushed the feature/1852-sentry-feedback branch 2 times, most recently from 354e60a to c9fcbc7 Compare October 15, 2024 23:57

DDDDDanica commented Oct 16, 2024

View reviewed changes

DDDDDanica force-pushed the feature/1852-sentry-feedback branch 4 times, most recently from f0acd52 to e4489e9 Compare October 16, 2024 11:57

chloeYue reviewed Oct 16, 2024

View reviewed changes

test/e2e/page-objects/pages/ErrorPage.ts Outdated Show resolved Hide resolved

DDDDDanica force-pushed the feature/1852-sentry-feedback branch from e4489e9 to ccdf22c Compare October 16, 2024 21:40

DDDDDanica force-pushed the feature/1852-sentry-feedback branch 6 times, most recently from 32ea0a0 to b30f186 Compare November 7, 2024 01:19

DDDDDanica requested review from danjm and itsyoboieltr November 7, 2024 01:21

itsyoboieltr previously approved these changes Nov 7, 2024

View reviewed changes

app/scripts/lib/setupSentry.js Outdated Show resolved Hide resolved

DDDDDanica dismissed itsyoboieltr’s stale review via 064291c November 7, 2024 17:01

DDDDDanica added 4 commits November 7, 2024 17:01

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

94d5643

feat(1852): modify based on review feedback - e2e test, file name, etc

e5bb3a9

feat(1852): add eventId to sentry feedback report

c0fa599

Revert changes for METAMASK_DEBUG flag

c9d97fe

DDDDDanica force-pushed the feature/1852-sentry-feedback branch from 064291c to c9d97fe Compare November 7, 2024 17:02

itsyoboieltr approved these changes Nov 7, 2024

View reviewed changes

zone-live approved these changes Nov 7, 2024

View reviewed changes

chloeYue approved these changes Nov 8, 2024

View reviewed changes

hjetpoluru self-requested a review November 8, 2024 14:08

hjetpoluru approved these changes Nov 8, 2024

View reviewed changes

DDDDDanica added this pull request to the merge queue Nov 8, 2024

Merged via the queue into develop with commit 152a50e Nov 8, 2024
76 checks passed

DDDDDanica deleted the feature/1852-sentry-feedback branch November 8, 2024 14:36

github-actions bot locked and limited conversation to collaborators Nov 8, 2024

metamaskbot added the release-12.8.0 Issue or pull request that will be included in release 12.8.0 label Nov 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DDDDDanica commented Oct 15, 2024 •

edited

Loading

github-actions bot commented Oct 15, 2024

DDDDDanica Oct 15, 2024

DDDDDanica Oct 15, 2024

DDDDDanica Oct 15, 2024

DDDDDanica Oct 16, 2024

DDDDDanica Oct 16, 2024

DDDDDanica Oct 16, 2024

sonarcloud bot commented Oct 16, 2024

metamaskbot commented Oct 16, 2024

metamaskbot commented Oct 16, 2024

metamaskbot commented Nov 7, 2024

itsyoboieltr left a comment

itsyoboieltr left a comment

metamaskbot commented Nov 7, 2024

hjetpoluru commented Nov 7, 2024

DDDDDanica commented Nov 8, 2024

hjetpoluru left a comment

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

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

Conversation

DDDDDanica commented Oct 15, 2024 • edited Loading

Description

What's expected in this PR:

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 15, 2024

DDDDDanica Oct 15, 2024

Choose a reason for hiding this comment

DDDDDanica Oct 15, 2024

Choose a reason for hiding this comment

DDDDDanica Oct 15, 2024

Choose a reason for hiding this comment

DDDDDanica Oct 16, 2024

Choose a reason for hiding this comment

DDDDDanica Oct 16, 2024

Choose a reason for hiding this comment

DDDDDanica Oct 16, 2024

Choose a reason for hiding this comment

sonarcloud bot commented Oct 16, 2024

Quality Gate passed

metamaskbot commented Oct 16, 2024

metamaskbot commented Oct 16, 2024

metamaskbot commented Nov 7, 2024

itsyoboieltr left a comment

Choose a reason for hiding this comment

itsyoboieltr left a comment

Choose a reason for hiding this comment

metamaskbot commented Nov 7, 2024

hjetpoluru commented Nov 7, 2024

DDDDDanica commented Nov 8, 2024

hjetpoluru left a comment

Choose a reason for hiding this comment

DDDDDanica commented Oct 15, 2024 •

edited

Loading