Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle DOM storage being disabled #197798

Merged
merged 3 commits into from
Oct 30, 2024
Merged

Handle DOM storage being disabled #197798

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ddef201
Handle DOM storage being unavailable
kowalczyk-krzysztof Oct 29, 2024
0480eb1
Merge branch 'main' into fix/dom-storage-unavailable
kowalczyk-krzysztof Oct 30, 2024
b9b85cb
Update error message
kowalczyk-krzysztof Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions packages/core/root/core-root-browser-internal/src/kbn_bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@elastic/kibana-docs, can you help us with the wording to make the call to action as clear as possible?

TL;DR, the user's browser configuration doesn't allow writing to the session/local storage. We need them to change that setting for Kibana to work.

Copy link
Contributor

@florent-leborgne florent-leborgne Oct 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking about something like this. Would that be clearer?

Couldn't load Elastic
Update your browser's settings to allow storage of cookies and site data, and reload the page.
Reload

If we can be specific with the type of cookies users need to allow, that'd be great.
Let me know what you think

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And feel free to adjust

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,
Expand Down