github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Improve fatal error message (#186609)

Browse source 
## Summary

Close https://github.com/elastic/kibana-team/issues/948

Makes the error message when Kibana fails to load less scary 

![Screenshot 2024-06-21 at 12 13
45](bdb09e35-f782-43c1-912d-89ed9933eb6f)
This commit is contained in:
Anton Dosov 2024-07-02 14:03:30 +02:00 • committed by GitHub
parent 013bda4e60
commit 369fb6028c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 70 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

39
packages/core/rendering/core-rendering-server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap generated
View file

@ -52,15 +52,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;
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;
document.body.innerHTML = err.outerHTML;
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\\"]')

39
packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts
View file

@ -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;
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;
document.body.innerHTML = err.outerHTML;
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"]')

10
packages/core/rendering/core-rendering-server-internal/src/views/template.tsx
View file

@ -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', {

1
x-pack/plugins/translations/translations/fr-FR.json
View file

@ -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} :",

1
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -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に接続できます。",

1
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -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：",