Handle DOM storage being unavailable

elastic · Oct 29, 2024 · ddef201 · ddef201
1 parent e5eb58a
commit ddef201
Showing 1 changed file with 69 additions and 0 deletions.
diff --git a/packages/core/root/core-root-browser-internal/src/kbn_bootstrap.ts b/packages/core/root/core-root-browser-internal/src/kbn_bootstrap.ts
@@ -39,6 +39,75 @@ export async function __kbnBootstrap__() {
     }),
   ]);
 
+  const isDomStorageDisabled = () => {
+    try {
+      const key = 'kbn_bootstrap_domStorageEnabled';
+      sessionStorage.setItem(key, 'true');
+      sessionStorage.removeItem(key);
+      localStorage.setItem(key, 'true');
+      localStorage.removeItem(key);
+      return false;
+    } catch (e) {
+      return true;
+    }
+  };
+
+  if (isDomStorageDisabled()) {
+    const defaultErrorText =
+      'Your browser needs to have session storage and local storage enabled.';
+    const defaultErrorReload = 'Reload';
+    const defaultErrorTitle = 'Elastic did not load properly';
+    const errorText = i18nError
+      ? defaultErrorText
+      : i18n.translate('core.ui.domStorageDisabled', {
+          defaultMessage: defaultErrorText,
+        });
+
+    const errorReload = i18nError
+      ? defaultErrorReload
+      : i18n.translate('core.ui.welcomeErrorReloadButton', {
+          defaultMessage: defaultErrorReload,
+        });
+    const errorTitle = i18nError
+      ? defaultErrorTitle
+      : i18n.translate('core.ui.welcomeErrorMessageTitle', {
+          defaultMessage: defaultErrorTitle,
+        });
+
+    const err = document.createElement('div');
+    err.style.textAlign = 'center';
+    err.style.padding = '120px 20px';
+    err.style.fontFamily = 'Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif';
+
+    const errorTitleEl = document.createElement('h1');
+    errorTitleEl.innerText = errorTitle;
+    errorTitleEl.style.margin = '20px';
+    errorTitleEl.style.color = '#1a1c21';
+
+    const errorTextEl = document.createElement('p');
+    errorTextEl.innerText = errorText;
+    errorTextEl.style.margin = '20px';
+    errorTextEl.style.color = '#343741';
+
+    const errorReloadEl = document.createElement('button');
+    errorReloadEl.innerText = errorReload;
+    errorReloadEl.onclick = function () {
+      location.reload();
+    };
+    errorReloadEl.setAttribute(
+      'style',
+      'cursor: pointer; padding-inline: 12px; block-size: 40px; font-size: 1rem; line-height: 1.4286rem; border-radius: 6px; min-inline-size: 112px; color: rgb(255, 255, 255); background-color: rgb(0, 119, 204); outline-color: rgb(0, 0, 0); border:none'
+    );
+
+    err.appendChild(errorTitleEl);
+    err.appendChild(errorTextEl);
+    err.appendChild(errorReloadEl);
+
+    document.body.innerHTML = '';
+    document.body.appendChild(err);
+    return;
+  }
+
   const coreSystem = new CoreSystem({
     injectedMetadata,
     rootDomElement: document.body,