Skip to content

Commit

Permalink
[8.x] Handle DOM storage being disabled (#197798) (#198358)
Browse files Browse the repository at this point in the history
# Backport

This will backport the following commits from `main` to `8.x`:
- [Handle DOM storage being disabled
(#197798)](#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":"[email protected]"},"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![image](https://github.com/user-attachments/assets/19832830-49e3-4789-9b83-0c1f14d7980d)\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`https://github.com/elastic/kibana/blob/3bc5e2db73799dc9c7831b6f9da4a52063cf112f/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)](#197798)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
https://github.com/elastic/kibana/blob/3bc5e2db73799dc9c7831b6f9da4a52063cf112f/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\nhttps://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/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`https://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_service.tsx#L32\r\nwill
never instantiate and
the\r\n`failure`https://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/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)](#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![image](https://github.com/user-attachments/assets/19832830-49e3-4789-9b83-0c1f14d7980d)\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`https://github.com/elastic/kibana/blob/3bc5e2db73799dc9c7831b6f9da4a52063cf112f/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)](#197798)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
https://github.com/elastic/kibana/blob/3bc5e2db73799dc9c7831b6f9da4a52063cf112f/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\nhttps://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/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`https://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_service.tsx#L32\r\nwill
never instantiate and
the\r\n`failure`https://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/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)](#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![image](https://github.com/user-attachments/assets/19832830-49e3-4789-9b83-0c1f14d7980d)\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`https://github.com/elastic/kibana/blob/3bc5e2db73799dc9c7831b6f9da4a52063cf112f/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)](#197798)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
https://github.com/elastic/kibana/blob/3bc5e2db73799dc9c7831b6f9da4a52063cf112f/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\nhttps://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/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`https://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_service.tsx#L32\r\nwill
never instantiate and
the\r\n`failure`https://github.com/elastic/kibana/blob/6ef03697460aba0d3774c0c03fb7fb58c76c00bd/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)](#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 <[email protected]>
  • Loading branch information
kibanamachine and kowalczyk-krzysztof authored Oct 30, 2024
1 parent 50c7456 commit 46a85bf
Showing 1 changed file with 70 additions and 0 deletions.
70 changes: 70 additions & 0 deletions packages/core/root/core-root-browser-internal/src/kbn_bootstrap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 46a85bf

Please sign in to comment.