From 46a85bfb22db3d6569a36c926161e5d776449e81 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 31 Oct 2024 02:50:12 +1100
Subject: [PATCH] [8.x] Handle DOM storage being disabled (#197798) (#198358)

# 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![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)](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
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)](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![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)](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
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)](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![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)](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
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)](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>
---
 .../src/kbn_bootstrap.ts                      | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)

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,