Improve fatal error message (#186609)

## Summary Close elastic/kibana-team#948 Makes the error message when Kibana fails to load less scary ![Screenshot 2024-06-21 at 12 13 45](https://github.com/elastic/kibana/assets/7784120/bdb09e35-f782-43c1-912d-89ed9933eb6f)
elastic · Jul 2, 2024 · 369fb60 · 369fb60
1 parent 013bda4
commit 369fb60
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 23 deletions.
diff --git a/...g/core-rendering-server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap b/...g/core-rendering-server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap
diff --git a/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts b/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts
@@ -68,15 +68,38 @@ if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {
       // make subsequent calls to failure() noop
       failure = function () {};
 
-      var err = document.createElement('h1');
-      err.style['color'] = 'white';
-      err.style['font-family'] = 'monospace';
-      err.style['text-align'] = 'center';
-      err.style['background'] = '#F44336';
-      err.style['padding'] = '25px';
-      err.innerText = document.querySelector('[data-error-message]').dataset.errorMessage;
-
-      document.body.innerHTML = err.outerHTML;
+      var errorTitle =  document.querySelector('[data-error-message-title]').dataset.errorMessageTitle;
+      var errorText =  document.querySelector('[data-error-message-text]').dataset.errorMessageText;
+      var errorReload =  document.querySelector('[data-error-message-reload]').dataset.errorMessageReload;
+
+      var err = document.createElement('div');
+      err.style.textAlign = 'center';
+      err.style.padding = '120px 20px';
+      err.style.fontFamily = 'Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif';
+
+      var errorTitleEl = document.createElement('h1');
+      errorTitleEl.innerText = errorTitle;
+      errorTitleEl.style.margin = '20px';
+
+      var errorTextEl = document.createElement('p');
+      errorTextEl.innerText = errorText;
+      errorTextEl.style.margin = '20px';
+
+      var 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);
     }
 
     var stylesheetTarget = document.querySelector('head meta[name="add-styles-here"]')

diff --git a/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx b/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx
@@ -80,9 +80,15 @@ export const Template: FunctionComponent<Props> = ({
             {logo}
             <div
               className="kbnWelcomeText"
-              data-error-message={i18n('core.ui.welcomeErrorMessage', {
+              data-error-message-title={i18n('core.ui.welcomeErrorMessageTitle', {
+                defaultMessage: 'Elastic did not load properly',
+              })}
+              data-error-message-text={i18n('core.ui.welcomeErrorMessageText', {
                 defaultMessage:
-                  'Elastic did not load properly. Check the server output for more information.',
+                  'Please reload this page. If the issue persists, check the browser console and server logs.',
+              })}
+              data-error-message-reload={i18n('core.ui.welcomeErrorReloadButton', {
+                defaultMessage: 'Reload',
               })}
             >
               {i18n('core.ui.welcomeMessage', {

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -1069,7 +1069,6 @@
     "core.ui.searchNavList.label": "Recherche",
     "core.ui.securityNavList.label": "Sécurité",
     "core.ui.skipToMainButton": "Passer au contenu principal",
-    "core.ui.welcomeErrorMessage": "Elastic ne s'est pas chargé correctement. Vérifiez la sortie du serveur pour plus d'informations.",
     "core.ui.welcomeMessage": "Chargement d'Elastic",
     "customIntegrations.components.replacementAccordion.recommendationDescription": "Les intégrations d'Elastic Agent sont recommandées, mais vous pouvez également utiliser Beats. Pour plus de détails, consultez notre {link}.",
     "customIntegrations.languageClients.DotnetElasticsearch.readme.connectingText": "Vous pouvez vous connecter à Elastic Cloud à l'aide d'une {api_key} et d'un {cloud_id} :",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -1069,7 +1069,6 @@
     "core.ui.searchNavList.label": "検索",
     "core.ui.securityNavList.label": "セキュリティ",
     "core.ui.skipToMainButton": "メインコンテンツに移動",
-    "core.ui.welcomeErrorMessage": "Elasticが正常に読み込まれませんでした。詳細はサーバーアウトプットを確認してください。",
     "core.ui.welcomeMessage": "Elastic の読み込み中",
     "customIntegrations.components.replacementAccordion.recommendationDescription": "Elasticエージェント統合が推奨されますが、Beatsも使用できます。詳細については、{link}。",
     "customIntegrations.languageClients.DotnetElasticsearch.readme.connectingText": "{api_key}と{cloud_id}を使用して、Elastic Cloudに接続できます。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -1071,7 +1071,6 @@
     "core.ui.searchNavList.label": "搜索",
     "core.ui.securityNavList.label": "安全",
     "core.ui.skipToMainButton": "跳到主要内容",
-    "core.ui.welcomeErrorMessage": "Elastic 未正确加载。检查服务器输出以了解详情。",
     "core.ui.welcomeMessage": "正在加载 Elastic",
     "customIntegrations.components.replacementAccordion.recommendationDescription": "建议使用 Elastic 代理集成，但也可以使用 Beats。有关更多详情，请访问 {link}。",
     "customIntegrations.languageClients.DotnetElasticsearch.readme.connectingText": "您可以使用 {api_key} 和 {cloud_id} 连接到 Elastic Cloud：",