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 index 80020b79427f5..a06abd107fd06 100644 --- 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,76 @@ 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 defaultErrorTitle = `Couldn't load the page`; + const defaultErrorText = `Update your browser's settings to allow storage of cookies and site data, and reload the page.`; + const defaultErrorReload = 'Reload'; + + const errorTitle = i18nError + ? defaultErrorTitle + : i18n.translate('core.ui.welcomeErrorCouldNotLoadPage', { + defaultMessage: defaultErrorTitle, + }); + + const errorText = i18nError + ? defaultErrorText + : i18n.translate('core.ui.welcomeErrorDomStorageDisabled', { + defaultMessage: defaultErrorText, + }); + + const errorReload = i18nError + ? defaultErrorReload + : i18n.translate('core.ui.welcomeErrorReloadButton', { + defaultMessage: defaultErrorReload, + }); + + 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,