Show error message if service worker did not load (respond to the UI) (#15774)

* Show error message if service worker did not load (respond to the UI) after 1 minute. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Remove console.log Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * New Error message design Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Fix tests Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Use lastTimeStamp instead of keeping track of message ids Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * Do not initial channe every second. Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> * New logic to check if SW is stuck Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com> Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
2024-12-23 09:52:26 +01:00 · 2022-11-03 21:25:13 +04:00 · 2022-11-03 21:25:13 +04:00 · 107525bb1d
commit 107525bb1d
parent cda3e3e4c0
6 changed files with 129 additions and 40 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -3272,6 +3272,9 @@
  "someNetworksMayPoseSecurity": {
    "message": "Some networks may pose security and/or privacy risks. Understand the risks before adding & using a network."
  },
+  "somethingIsWrong": {
+    "message": "Something's gone wrong. Try reloading the page."
+  },
  "somethingWentWrong": {
    "message": "Oops! Something went wrong."
  },
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@ -88,6 +88,9 @@ const ONE_SECOND_IN_MILLISECONDS = 1_000;
 // Timeout for initializing phishing warning page.
 const PHISHING_WARNING_PAGE_TIMEOUT = ONE_SECOND_IN_MILLISECONDS;

+const ACK_KEEP_ALIVE_MESSAGE = 'ACK_KEEP_ALIVE_MESSAGE';
+const WORKER_KEEP_ALIVE_MESSAGE = 'WORKER_KEEP_ALIVE_MESSAGE';
+
 /**
 * In case of MV3 we attach a "onConnect" event listener as soon as the application is initialised.
 * Reason is that in case of MV3 a delay in doing this was resulting in missing first connect event after service worker is re-activated.
@ -439,6 +442,14 @@ function setupController(initState, initLangCode, remoteSourcePort) {
        // This ensures that UI is initialised only after background is ready
        // It fixes the issue of blank screen coming when extension is loaded, the issue is very frequent in MV3
        remotePort.postMessage({ name: 'CONNECTION_READY' });
+
+        // If we get a WORKER_KEEP_ALIVE message, we respond with an ACK
+        remotePort.onMessage.addListener((message) => {
+          if (message.name === WORKER_KEEP_ALIVE_MESSAGE) {
+            // To test un-comment this line and wait for 1 minute. An error should be shown on MetaMask UI.
+            remotePort.postMessage({ name: ACK_KEEP_ALIVE_MESSAGE });
+          }
+        });
      }

      if (processName === ENVIRONMENT_TYPE_POPUP) {
--- a/app/scripts/ui.js
+++ b/app/scripts/ui.js
@ -30,22 +30,65 @@ const container = document.getElementById('app-content');
 const ONE_SECOND_IN_MILLISECONDS = 1_000;

 const WORKER_KEEP_ALIVE_INTERVAL = ONE_SECOND_IN_MILLISECONDS;
+// Service Worker Keep Alive Message Constants
 const WORKER_KEEP_ALIVE_MESSAGE = 'WORKER_KEEP_ALIVE_MESSAGE';
+const ACK_KEEP_ALIVE_WAIT_TIME = 60_000; // 1 minute
+const ACK_KEEP_ALIVE_MESSAGE = 'ACK_KEEP_ALIVE_MESSAGE';

 // Timeout for initializing phishing warning page.
 const PHISHING_WARNING_PAGE_TIMEOUT = ONE_SECOND_IN_MILLISECONDS;

 const PHISHING_WARNING_SW_STORAGE_KEY = 'phishing-warning-sw-registered';

+let lastMessageRecievedTimestamp = Date.now();
 /*
 * As long as UI is open it will keep sending messages to service worker
 * In service worker as this message is received
 * if service worker is inactive it is reactivated and script re-loaded
 * Time has been kept to 1000ms but can be reduced for even faster re-activation of service worker
 */
+let extensionPort;
+let timeoutHandle;
+
 if (isManifestV3) {
-  setInterval(() => {
+  // Checking for SW aliveness (or stuckness) flow
+  // 1. Check if we have an extensionPort, if yes
+  // 2a. Send a keep alive message to the background via extensionPort
+  // 2b. Add a listener to it (if not already added)
+  // 3a. Set a timeout to check if we have received an ACK from background
+  // 3b. If we have not received an ACK within Xs, we know the background is stuck or dead
+  // 4. If we recieve an ACK_KEEP_ALIVE_MESSAGE from the service worker, we know it is alive
+
+  const ackKeepAliveListener = (message) => {
+    if (message.name === ACK_KEEP_ALIVE_MESSAGE) {
+      lastMessageRecievedTimestamp = Date.now();
+      clearTimeout(timeoutHandle);
+    }
+  };
+
+  const handle = setInterval(() => {
    browser.runtime.sendMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
+
+    if (extensionPort !== null && extensionPort !== undefined) {
+      extensionPort.postMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
+
+      if (extensionPort.onMessage.hasListener(ackKeepAliveListener) === false) {
+        extensionPort.onMessage.addListener(ackKeepAliveListener);
+      }
+    }
+
+    timeoutHandle = setTimeout(() => {
+      if (
+        Date.now() - lastMessageRecievedTimestamp >
+        ACK_KEEP_ALIVE_WAIT_TIME
+      ) {
+        clearInterval(handle);
+        displayCriticalError(
+          'somethingIsWrong',
+          new Error("Something's gone wrong. Try reloading the page."),
+        );
+      }
+    }, ACK_KEEP_ALIVE_WAIT_TIME);
  }, WORKER_KEEP_ALIVE_INTERVAL);
 }

@ -61,7 +104,7 @@ async function start() {
  let isUIInitialised = false;

  // setup stream to background
-  let extensionPort = browser.runtime.connect({ name: windowType });
+  extensionPort = browser.runtime.connect({ name: windowType });
  let connectionStream = new PortStream(extensionPort);

  const activeTab = await queryCurrentActiveTab(windowType);
@ -208,7 +251,7 @@ async function start() {
    initializeUi(tab, connectionStream, (err, store) => {
      if (err) {
        // if there's an error, store will be = metamaskState
-        displayCriticalError(err, store);
+        displayCriticalError('troubleStarting', err, store);
        return;
      }
      isUIInitialised = true;
@ -226,7 +269,7 @@ async function start() {
  function updateUiStreams() {
    connectToAccountManager(connectionStream, (err, backgroundConnection) => {
      if (err) {
-        displayCriticalError(err);
+        displayCriticalError('troubleStarting', err);
        return;
      }

@ -277,8 +320,8 @@ function initializeUi(activeTab, connectionStream, cb) {
  });
 }

-async function displayCriticalError(err, metamaskState) {
-  const html = await getErrorHtml(SUPPORT_LINK, metamaskState);
+async function displayCriticalError(errorKey, err, metamaskState) {
+  const html = await getErrorHtml(errorKey, SUPPORT_LINK, metamaskState);

  container.innerHTML = html;

--- a/shared/lib/error-utils.js
+++ b/shared/lib/error-utils.js
@ -32,7 +32,7 @@ const getLocaleContext = (currentLocaleMessages, enLocaleMessages) => {
  };
 };

-export async function getErrorHtml(supportLink, metamaskState) {
+export async function getErrorHtml(errorKey, supportLink, metamaskState) {
  let response, preferredLocale;
  if (metamaskState?.currentLocale) {
    preferredLocale = metamaskState.currentLocale;
@ -50,26 +50,40 @@ export async function getErrorHtml(supportLink, metamaskState) {
  const { currentLocaleMessages, enLocaleMessages } = response;
  const t = getLocaleContext(currentLocaleMessages, enLocaleMessages);

+  /**
+   * The pattern ${errorKey === 'troubleStarting' ? t('troubleStarting') : ''}
+   * is neccessary because we we need linter to see the string
+   * of the locale keys. If we use the variable directly, the linter will not
+   * see the string and will not be able to check if the locale key exists.
+   */
  return `
    <div class="critical-error">
-      <div class="critical-error__alert">
-        <p class="critical-error__alert__message">
-          ${t('troubleStarting')}
-        </p>
-        <button id='critical-error-button' class="critical-error__alert__button">
-          ${t('restartMetamask')}
-        </button>
+      <div class="critical-error__icon">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M13.2325 9.78823L9.14559 1.96347C8.59641 0.910661 7.83651 0.333313 6.99998 0.333313C6.16345 0.333313 5.40354 0.910661 4.85437 1.96347L0.767492 9.78823C0.250247 10.7867 0.192775 11.7444 0.607848 12.4984C1.02292 13.2523 1.8403 13.6666 2.9131 13.6666H11.0869C12.1597 13.6666 12.977 13.2523 13.3921 12.4984C13.8072 11.7444 13.7497 10.7799 13.2325 9.78823ZM6.52105 5.08794C6.52105 4.80945 6.73816 4.57852 6.99998 4.57852C7.26179 4.57852 7.47891 4.80945 7.47891 5.08794V8.4841C7.47891 8.76259 7.26179 8.99353 6.99998 8.99353C6.73816 8.99353 6.52105 8.76259 6.52105 8.4841V5.08794ZM7.45337 11.0041C7.42144 11.0312 7.38951 11.0584 7.35758 11.0856C7.31927 11.1127 7.28095 11.1331 7.24264 11.1467C7.20432 11.1671 7.16601 11.1807 7.12131 11.1874C7.08299 11.1942 7.03829 11.201 6.99998 11.201C6.96166 11.201 6.91696 11.1942 6.87226 11.1874C6.83395 11.1807 6.79563 11.1671 6.75732 11.1467C6.71901 11.1331 6.68069 11.1127 6.64238 11.0856C6.61045 11.0584 6.57852 11.0312 6.54659 11.0041C6.43165 10.875 6.3614 10.6984 6.3614 10.5218C6.3614 10.3452 6.43165 10.1686 6.54659 10.0395C6.57852 10.0124 6.61045 9.98521 6.64238 9.95804C6.68069 9.93087 6.71901 9.91049 6.75732 9.8969C6.79563 9.87653 6.83395 9.86294 6.87226 9.85615C6.95528 9.83577 7.04468 9.83577 7.12131 9.85615C7.16601 9.86294 7.20432 9.87653 7.24264 9.8969C7.28095 9.91049 7.31927 9.93087 7.35758 9.95804C7.38951 9.98521 7.42144 10.0124 7.45337 10.0395C7.56831 10.1686 7.63855 10.3452 7.63855 10.5218C7.63855 10.6984 7.56831 10.875 7.45337 11.0041Z" fill="#F66A0A"/>
+        </svg>
+      </div>
+      <div class="critical-error__dscription">
+        <div class="critical-error__alert">
+          <p class="critical-error__alert__message">
+            ${errorKey === 'troubleStarting' ? t('troubleStarting') : ''}
+            ${errorKey === 'somethingIsWrong' ? t('somethingIsWrong') : ''}
+          </p>
+          <span id='critical-error-button' class="critical-error__alert__action-link">
+            ${t('restartMetamask')}
+          </span>
+        </div>
+        <p class="critical-error__paragraph">
+          ${t('stillGettingMessage')}
+          <a
+            href=${supportLink}
+            class="critical-error__paragraph__link"
+            target="_blank"
+            rel="noopener noreferrer">
+              ${t('sendBugReport')}
+            </a>
+        </p>
      </div>
-      <p class="critical-error__paragraph">
-        ${t('stillGettingMessage')}
-        <a
-          href=${supportLink}
-          class="critical-error__paragraph__link"
-          target="_blank"
-          rel="noopener noreferrer">
-            ${t('sendBugReport')}
-          </a>
-      </p>
    </div>
    `;
 }
--- a/shared/lib/error-utils.test.js
+++ b/shared/lib/error-utils.test.js
@ -33,7 +33,11 @@ describe('Error utils Tests', function () {
    };

    fetchLocale.mockReturnValue(mockStore.localeMessages.current);
-    const errorHtml = await getErrorHtml(SUPPORT_LINK, mockStore.metamask);
+    const errorHtml = await getErrorHtml(
+      'troubleStarting',
+      SUPPORT_LINK,
+      mockStore.metamask,
+    );
    const currentLocale = mockStore.localeMessages.current;
    const troubleStartingMessage = currentLocale.troubleStarting.message;
    const restartMetamaskMessage = currentLocale.restartMetamask.message;
--- a/ui/css/errors.scss
+++ b/ui/css/errors.scss
@ -1,37 +1,51 @@
 .critical-error {
-  padding: 16px;
+  padding: 1em;
  max-width: 600px;
  margin: 0 auto;
+  border-radius: 4px;
+  border-left: #f66a0a 4px solid;
+  background-color: rgba(255, 211, 61, 0.1);
+  display: flex;
+  padding: 0 4px 0 4px;
+  gap: 12px;
+
+  &__icon {
+    color: var(--color-error-default);
+    height: 100px;
+    padding: 4px 4px 0 4px;
+  }
+
+  &__description {
+    flex-grow: 1;
+  }

  &__alert {
-    color: var(--color-text-default);
-    background-color: var(--color-error-muted);
-    border: 1px solid var(--color-error-default);
-    border-radius: 8px;
-    padding: 16px;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;

    &__message {
      margin-bottom: 16px;
+      text-align: left;
+      color: var(--color-text-default);
    }

-    &__button {
+    &__action-link {
+      text-align: left;
      height: 40px;
-      border-radius: 20px;
-      padding-left: 16px;
-      padding-right: 16px;
-      background-color: var(--color-primary-default);
-      color: var(--color-primary-inverse);
-      border: 1px solid var(--color-primary-default);
-      margin: 0 auto;
+      color: var(--color-primary-default);
+      text-decoration: none;
+      cursor: pointer;
    }
  }

  &__paragraph {
+    text-align: left;
    color: var(--color-text-default);
-    text-align: center;

    &__link {
      color: var(--color-primary-default);