release(runway): cherry-pick feat: Add MetaMetrics event to "Infinite spinner" error screen cp-13.3.0 (#35851)

- feat: Add MetaMetrics event to "Infinite spinner" error screen
cp-13.3.0 (#35619)

<!--
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**
This PR implements user-controlled error reporting on the critical error
screen, allowing users to opt into sending crash reports to help with
debugging while maintaining transparency about data collection.

**Error Reporting Checkbox:**

- Added checkbox above restart button with "Report this error" text
- Checkbox pre-selected by default
- Info icon (ℹ️) next to checkbox text

**Legal Text Popover:**

- Info icon shows popover with legal text on click
- A bit styling with rounded corners and shadow
- Explains data collection and privacy policy

**Sentry Integration:**

- Checkbox checked → sends error to Sentry via fetch API on restart
- Checkbox unchecked → no data sent, just restarts MetaMask
- Includes error details, user agent, extension version

<!--
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?
2. What is the improvement/solution?
-->

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/35619?quickstart=1)


## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Added checkbox for emitting Sentry event when
restarting MetaMask from error page

## **Related issues**

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

## **Manual testing steps**

1. open the extension's devtools
2. execute the following code (its creates an invalid state object):
```
     // browser and chrome are NOT scuttled in test builds, so we can use them
    // to access the storage API here
    const browser = globalThis.browser ?? globalThis.chrome;

    // corrupt the primary database by setting `meta` to `null`
    browser.storage.local.set({ meta: null }, () => {
          browser.runtime.reload()
    });
```
3. open the popup. The error modal should be displayed to the user.
4. Click i icon beside "report this error" should show a popover of
legal text
5. Click restart metamask, should see a request sending to sentry before
reloading
6. If uncheck the checkbox "report this error", there won't be any
request sending to sentry before reloading

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

**Recording:** 


https://www.loom.com/share/876c2fefb7224c1da85c14d2538d9ca2?sid=3e5835e7-2ec5-4277-ac01-ba072460b602

**Screenshot: ** 
<img width="406" height="606" alt="Screenshot 2025-09-10 at 00 36 43"

src="https://github.com/user-attachments/assets/9d152017-e3ce-4da5-81dc-b4f8e5434a23"
/>
<img width="403" height="605" alt="Screenshot 2025-09-10 at 00 36 48"

src="https://github.com/user-attachments/assets/386ccd0a-3fde-48f0-b3dc-acbbe18a01aa"
/>


## **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/main/.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/main/.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.

---------

Co-authored-by: dddddanica <[email protected]>
[5adb0e7](5adb0e7)

Co-authored-by: Jongsun Suh <[email protected]>
Co-authored-by: dddddanica <[email protected]>

Author: 3 people

app/_locales/en/messages.json

@@ -89,14 +89,21 @@ export async function maybeGetLocaleContext(currentLocale) {
  *
  * @param {import('../../ui/helpers/utils/display-critical-error').CriticalErrorTranslationKey} errorKey - The key for the error message.
  * @param {ErrorLike} error - The error object to log.
- * @param {{preferredLocale: string, t: (string) => string}} localeContext - The MetaMask state containing the current locale.
+ * @param {{preferredLocale: string, t: (string) => string}} localeContext - The MetaMask state containing the current locale and translation function.
  * @param {string} [supportLink] - The support link to include in the footer.
  * @returns {string} The HTML string for the critical error message.
  */
 export function getErrorHtml(errorKey, error, localeContext, supportLink) {
   switchDirectionForPreferredLocale(localeContext.preferredLocale);
   const { t } = localeContext;
 
+  const legalText = `
+    <span>${lodashEscape(t('errorLegalTextSummary'))}</span>
+    <p>• ${lodashEscape(t('errorLegalTextFirstInfo'))}</p>
+    <p>• ${lodashEscape(t('errorLegalTextSecondInfo'))}</p>
+    <span>${lodashEscape(t('errorLegalTextNoPersonalInfo'))}</span>
+`;
+
   const footer = supportLink
     ? `
       <p class="critical-error__footer">
@@ -106,7 +113,7 @@ export function getErrorHtml(errorKey, error, localeContext, supportLink) {
           class="critical-error__link"
           target="_blank"
           rel="noopener noreferrer">
-            ${lodashEscape(t('sendBugReport'))}
+            ${lodashEscape(t('errorPageContactSupport'))}
         </a>
       </p>
     `
@@ -131,7 +138,39 @@ export function getErrorHtml(errorKey, error, localeContext, supportLink) {
         ${errorKey === 'somethingIsWrong' ? t('somethingIsWrong') : ''}
       </p>
       ${detailsRawHtml}
-      <button id="critical-error-button" class="critical-error__button-restore button btn-primary">
+      <label class="critical-error__report">
+        <input
+        id="critical-error-checkbox"
+          type="checkbox"
+          checked
+          class="critical-error__report-checkbox"
+        />
+        <span class="critical-error__report-text">
+          ${lodashEscape(t('reportThisError'))}
+        </span>
+        <button
+          id="critical-error-tip-anchor"
+          popovertarget="critical-error-legal-text"
+          type="button"
+          class="critical-error__info"
+        >
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="critical-error__info-icon">
+            <path d="m11 17h2v-6h-2zm1-8c.2833 0 .5208-.09583.7125-.2875s.2875-.42917.2875-.7125-.0958-.52083-.2875-.7125-.4292-.2875-.7125-.2875-.5208.09583-.7125.2875-.2875.42917-.2875.7125.0958.52083.2875.7125.4292.2875.7125.2875zm0 13c-1.3833 0-2.68333-.2625-3.9-.7875s-2.275-1.2375-3.175-2.1375-1.6125-1.9583-2.1375-3.175-.7875-2.5167-.7875-3.9.2625-2.68333.7875-3.9 1.2375-2.275 2.1375-3.175 1.95833-1.6125 3.175-2.1375 2.5167-.7875 3.9-.7875 2.6833.2625 3.9.7875 2.275 1.2375 3.175 2.1375 1.6125 1.95833 2.1375 3.175.7875 2.5167.7875 3.9-.2625 2.6833-.7875 3.9-1.2375 2.275-2.1375 3.175-1.9583 1.6125-3.175 2.1375-2.5167.7875-3.9.7875zm0-2c2.2333 0 4.125-.775 5.675-2.325s2.325-3.4417 2.325-5.675c0-2.23333-.775-4.125-2.325-5.675s-3.4417-2.325-5.675-2.325c-2.23333 0-4.125.775-5.675 2.325s-2.325 3.44167-2.325 5.675c0 2.2333.775 4.125 2.325 5.675s3.44167 2.325 5.675 2.325z"/>
+          </svg>
+        </button>
+      </label>
+      <div
+        popover
+        anchor="critical-error-tip-anchor"
+        id="critical-error-legal-text"
+        class="critical-error__legal-text"
+      >
+        ${legalText}
+      </div>
+      <button
+        id="critical-error-button"
+        class="critical-error__button-restore button btn-primary"
+        title="Report this error and restart MetaMask">
         ${lodashEscape(t('restartMetamask'))}
       </button>
       ${footer}

app/_locales/en_GB/messages.json

@@ -50,8 +50,8 @@ describe('Error utils Tests', function () {
           stillGettingMessage: {
             message: 'Still getting this message?',
           },
-          sendBugReport: {
-            message: 'Send us a bug report.',
+          errorPageContactSupport: {
+            message: 'Contact support',
           },
         },
       },
@@ -77,12 +77,13 @@ describe('Error utils Tests', function () {
     const restartMetamaskMessage = currentLocale.restartMetamask.message;
     const stillGettingMessageMessage =
       currentLocale.stillGettingMessage.message;
-    const sendBugReportMessage = currentLocale.sendBugReport.message;
+    const errorPageContactSupport =
+      currentLocale.errorPageContactSupport.message;
 
     expect(errorHtml).toContain(troubleStartingMessage);
     expect(errorHtml).toContain(troubleStartingTitle);
     expect(errorHtml).toContain(restartMetamaskMessage);
     expect(errorHtml).toContain(stillGettingMessageMessage);
-    expect(errorHtml).toContain(sendBugReportMessage);
+    expect(errorHtml).toContain(errorPageContactSupport);
   });
 });

shared/lib/error-utils.js

@@ -3,11 +3,12 @@
   border-radius: 4px;
   border-left: var(--color-warning-default) 4px solid;
   background-color: var(--color-warning-muted);
-  color: inherit; // Required to inherit color set from prefers-color-scheme
+  color: inherit; // Required to inherit color set from prefers-color-schem
   display: flex;
   padding: 12px 12px 12px 8px;
   gap: 8px;
   line-height: 24px;
+  height: 92vh;
 
   & h1 {
     font-size: 20px;
@@ -26,7 +27,6 @@
     > span {
       flex: 0 0 auto;
       max-width: 100%;
-      padding-inline-end: 8px;
     }
   }
 
@@ -50,14 +50,92 @@
 
   & p {
     margin: 1em 0;
-
-    &.small {
-      font-size: 12px;
-    }
   }
 
   &__details {
     max-height: 10em;
     overflow: auto;
   }
+
+  &__legal-text {
+    position: fixed;
+    top: 158px;
+    left: -8px;
+    background-color: var(--color-background-default);
+    border-radius: 12px;
+    padding: 20px;
+    max-width: 320px;
+    text-align: left;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: var(--color-text-default);
+    font-size: 14px;
+    line-height: 1.2;
+    z-index: 1000;
+
+    span {
+      display: block;
+      margin-bottom: 12px;
+      font-weight: 500;
+    }
+
+    p {
+      margin: 8px 0;
+      font-weight: 400;
+    }
+  }
+
+  &__report {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    user-select: none;
+    margin-bottom: 8px;
+  }
+
+  &__report-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    position: relative;
+    margin-right: 4px;
+    background-color: var(--color-background-default);
+    border: 2px solid var(--color-border-default);
+  }
+
+  &__report-checkbox:checked {
+    background-color: var(--color-primary-default);
+    border: none;
+  }
+
+  &__report-checkbox:checked::after {
+    content: "";
+    position: absolute;
+    width: 5px;
+    height: 10px;
+    border: solid var(--color-primary-inverse);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  &__info {
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-left: 4px;
+
+    &-icon {
+      width: 18px;
+      height: 18px;
+      fill: var(--color-primary-default);
+    }
+  }
 }