mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
# Backport This will backport the following commits from `main` to `8.x`: - [Handle DOM storage being disabled (#197798)](https://github.com/elastic/kibana/pull/197798) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Krzysztof Kowalczyk","email":"krzysztof.kowalczyk@elastic.co"},"sourceCommit":{"committedDate":"2024-10-30T14:02:28Z","message":"Handle DOM storage being disabled (#197798)\n\n## Summary\r\n\r\nThis PR aims to improve the message shown to users when Kibana can't be\r\nstarted due to disabled DOM storage (#121189).\r\nThe visuals here follow the same pattern as other fatal errors (see\r\n#186609)\r\n\r\n\r\n\r\nThe `isDomStorageDisabled` check has to be done before `CoreService`\r\ngets instantiated because of issues described below.\r\n\r\nCloses: #121189\r\n\r\n## The issue\r\n\r\nWhat actually happens when you disable all cookies in a browser? Aside\r\nfrom cookies, the browser disables the whole DOM storage -\r\n`localStorage` and `sessionStorage`. Trying to access those will result\r\nin an error.\r\n\r\n\r\n`getSessionId`3bc5e2db73/packages/core/analytics/core-analytics-browser-internal/src/get_session_id.ts (L17)\r\nand\r\n`isSidenavCollapsed# Backport This will backport the following commits from `main` to `8.x`: - [Handle DOM storage being disabled (#197798)](https://github.com/elastic/kibana/pull/197798) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT3bc5e2db73/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx (L91)\r\n\r\nBoth of those try to access either `localStorage` or `sessionStorage`\r\nand both of those are triggered when you create an instance of\r\n`CoreSystem` which gets instantiated in `kbn_bootstrap`\r\n6ef0369746/packages/core/root/core-root-browser-internal/src/kbn_bootstrap.ts (L42)\r\n\r\nTrying to access DOM storage in `CoreSystem` will cause it to throw an\r\nerror and this means that\r\n`FatalErrorService`6ef0369746/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_service.tsx (L32)\r\nwill never instantiate and the\r\n`failure`6ef0369746/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts (L68)\r\nfunction which styles the errors and makes them visible will never\r\ntrigger and all the user will see is permament `Loading Kibana` spinner.\r\n\r\nWrapping `getSessionId` and `isSidenavCollapsed# Backport This will backport the following commits from `main` to `8.x`: - [Handle DOM storage being disabled (#197798)](https://github.com/elastic/kibana/pull/197798) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT in `try-catch` block\r\nallows `FatalErrorService` to work properly, which will catch an\r\nunhandled exception (`Detected an unhandled Promise rejection.`) with an\r\nerror about `sessionStorage` being disabled, which gets thrown by\r\n`LicensingPlugin` (and possibly in other places). This is not an actual\r\nsolution though - this behavior would happen again if another line of\r\ncode trying to access DOM storage gets added to `CoreSystem`.\r\n\r\nI think it would be best to handle this directly in `kbn_bootstrap.ts`\r\nby some check like the one below:\r\n```javascript\r\nconst isDOMStorageDisabled = () => {\r\n try {\r\n const key = 'kbn_bootrasrap_domStorageEnabled';\r\n sessionStorage.setItem(key, 'true');\r\n sessionStorage.removeItem(key);\r\n return false;\r\n } catch (e) {\r\n return true;\r\n }\r\n };\r\nconst domStorageDisabled = isDOMStorageDisabled()\r\n/* \r\n ...some additonal logic\r\n*/\r\n```\r\nThis would then require some error displaying logic that doesn't use\r\n`FatalErrorService`.\r\n\r\nLooking for some feedback on how to properly solve this.","sha":"3a8bd70e835e0467bc5446376345ef7fe1ac4069","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","Team:Core","release_note:skip","v9.0.0","backport:prev-minor"],"title":"Handle DOM storage being disabled","number":197798,"url":"https://github.com/elastic/kibana/pull/197798","mergeCommit":{"message":"Handle DOM storage being disabled (#197798)\n\n## Summary\r\n\r\nThis PR aims to improve the message shown to users when Kibana can't be\r\nstarted due to disabled DOM storage (#121189).\r\nThe visuals here follow the same pattern as other fatal errors (see\r\n#186609)\r\n\r\n\r\n\r\nThe `isDomStorageDisabled` check has to be done before `CoreService`\r\ngets instantiated because of issues described below.\r\n\r\nCloses: #121189\r\n\r\n## The issue\r\n\r\nWhat actually happens when you disable all cookies in a browser? Aside\r\nfrom cookies, the browser disables the whole DOM storage -\r\n`localStorage` and `sessionStorage`. Trying to access those will result\r\nin an error.\r\n\r\n\r\n`getSessionId`3bc5e2db73/packages/core/analytics/core-analytics-browser-internal/src/get_session_id.ts (L17)\r\nand\r\n`isSidenavCollapsed# Backport This will backport the following commits from `main` to `8.x`: - [Handle DOM storage being disabled (#197798)](https://github.com/elastic/kibana/pull/197798) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT3bc5e2db73/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx (L91)\r\n\r\nBoth of those try to access either `localStorage` or `sessionStorage`\r\nand both of those are triggered when you create an instance of\r\n`CoreSystem` which gets instantiated in `kbn_bootstrap`\r\n6ef0369746/packages/core/root/core-root-browser-internal/src/kbn_bootstrap.ts (L42)\r\n\r\nTrying to access DOM storage in `CoreSystem` will cause it to throw an\r\nerror and this means that\r\n`FatalErrorService`6ef0369746/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_service.tsx (L32)\r\nwill never instantiate and the\r\n`failure`6ef0369746/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts (L68)\r\nfunction which styles the errors and makes them visible will never\r\ntrigger and all the user will see is permament `Loading Kibana` spinner.\r\n\r\nWrapping `getSessionId` and `isSidenavCollapsed# Backport This will backport the following commits from `main` to `8.x`: - [Handle DOM storage being disabled (#197798)](https://github.com/elastic/kibana/pull/197798) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT in `try-catch` block\r\nallows `FatalErrorService` to work properly, which will catch an\r\nunhandled exception (`Detected an unhandled Promise rejection.`) with an\r\nerror about `sessionStorage` being disabled, which gets thrown by\r\n`LicensingPlugin` (and possibly in other places). This is not an actual\r\nsolution though - this behavior would happen again if another line of\r\ncode trying to access DOM storage gets added to `CoreSystem`.\r\n\r\nI think it would be best to handle this directly in `kbn_bootstrap.ts`\r\nby some check like the one below:\r\n```javascript\r\nconst isDOMStorageDisabled = () => {\r\n try {\r\n const key = 'kbn_bootrasrap_domStorageEnabled';\r\n sessionStorage.setItem(key, 'true');\r\n sessionStorage.removeItem(key);\r\n return false;\r\n } catch (e) {\r\n return true;\r\n }\r\n };\r\nconst domStorageDisabled = isDOMStorageDisabled()\r\n/* \r\n ...some additonal logic\r\n*/\r\n```\r\nThis would then require some error displaying logic that doesn't use\r\n`FatalErrorService`.\r\n\r\nLooking for some feedback on how to properly solve this.","sha":"3a8bd70e835e0467bc5446376345ef7fe1ac4069"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197798","number":197798,"mergeCommit":{"message":"Handle DOM storage being disabled (#197798)\n\n## Summary\r\n\r\nThis PR aims to improve the message shown to users when Kibana can't be\r\nstarted due to disabled DOM storage (#121189).\r\nThe visuals here follow the same pattern as other fatal errors (see\r\n#186609)\r\n\r\n\r\n\r\nThe `isDomStorageDisabled` check has to be done before `CoreService`\r\ngets instantiated because of issues described below.\r\n\r\nCloses: #121189\r\n\r\n## The issue\r\n\r\nWhat actually happens when you disable all cookies in a browser? Aside\r\nfrom cookies, the browser disables the whole DOM storage -\r\n`localStorage` and `sessionStorage`. Trying to access those will result\r\nin an error.\r\n\r\n\r\n`getSessionId`3bc5e2db73/packages/core/analytics/core-analytics-browser-internal/src/get_session_id.ts (L17)\r\nand\r\n`isSidenavCollapsed# Backport This will backport the following commits from `main` to `8.x`: - [Handle DOM storage being disabled (#197798)](https://github.com/elastic/kibana/pull/197798) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT3bc5e2db73/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx (L91)\r\n\r\nBoth of those try to access either `localStorage` or `sessionStorage`\r\nand both of those are triggered when you create an instance of\r\n`CoreSystem` which gets instantiated in `kbn_bootstrap`\r\n6ef0369746/packages/core/root/core-root-browser-internal/src/kbn_bootstrap.ts (L42)\r\n\r\nTrying to access DOM storage in `CoreSystem` will cause it to throw an\r\nerror and this means that\r\n`FatalErrorService`6ef0369746/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_service.tsx (L32)\r\nwill never instantiate and the\r\n`failure`6ef0369746/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts (L68)\r\nfunction which styles the errors and makes them visible will never\r\ntrigger and all the user will see is permament `Loading Kibana` spinner.\r\n\r\nWrapping `getSessionId` and `isSidenavCollapsed# Backport This will backport the following commits from `main` to `8.x`: - [Handle DOM storage being disabled (#197798)](https://github.com/elastic/kibana/pull/197798) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT in `try-catch` block\r\nallows `FatalErrorService` to work properly, which will catch an\r\nunhandled exception (`Detected an unhandled Promise rejection.`) with an\r\nerror about `sessionStorage` being disabled, which gets thrown by\r\n`LicensingPlugin` (and possibly in other places). This is not an actual\r\nsolution though - this behavior would happen again if another line of\r\ncode trying to access DOM storage gets added to `CoreSystem`.\r\n\r\nI think it would be best to handle this directly in `kbn_bootstrap.ts`\r\nby some check like the one below:\r\n```javascript\r\nconst isDOMStorageDisabled = () => {\r\n try {\r\n const key = 'kbn_bootrasrap_domStorageEnabled';\r\n sessionStorage.setItem(key, 'true');\r\n sessionStorage.removeItem(key);\r\n return false;\r\n } catch (e) {\r\n return true;\r\n }\r\n };\r\nconst domStorageDisabled = isDOMStorageDisabled()\r\n/* \r\n ...some additonal logic\r\n*/\r\n```\r\nThis would then require some error displaying logic that doesn't use\r\n`FatalErrorService`.\r\n\r\nLooking for some feedback on how to properly solve this.","sha":"3a8bd70e835e0467bc5446376345ef7fe1ac4069"}}]}] BACKPORT--> Co-authored-by: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
50c7456ded
commit
46a85bfb22
1 changed files with 70 additions and 0 deletions
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue