diff --git a/_dev/src/ts/components/ErrorPageBuilder.ts b/_dev/src/ts/components/ErrorPageBuilder.ts index 2d57f95c1..b56a9e881 100644 --- a/_dev/src/ts/components/ErrorPageBuilder.ts +++ b/_dev/src/ts/components/ErrorPageBuilder.ts @@ -54,13 +54,12 @@ export default class ErrorPageBuilder { */ public updateDescriptionBlock(errorDetails: Pick): void { const errorDescriptionElement = this.errorElement.querySelector('.error-page__desc'); - const userFriendlyDescriptionElement = errorDescriptionElement?.querySelector( - `.error-page__desc-${isHttpErrorCode(errorDetails.code) ? errorDetails.code : errorDetails.type}` - ); + const userFriendlyDescriptionElement = + errorDescriptionElement?.querySelector( + `.error-page__desc-${isHttpErrorCode(errorDetails.code) ? errorDetails.code : errorDetails.type}` + ) || errorDescriptionElement?.querySelector('.error-page__desc-unknown'); if (userFriendlyDescriptionElement) { userFriendlyDescriptionElement.classList.remove('hidden'); - } else if (errorDescriptionElement && errorDetails.type) { - errorDescriptionElement.innerHTML = errorDetails.type; } } diff --git a/_dev/src/ts/components/LogsViewer.ts b/_dev/src/ts/components/LogsViewer.ts index 22ac98653..96b7cd695 100644 --- a/_dev/src/ts/components/LogsViewer.ts +++ b/_dev/src/ts/components/LogsViewer.ts @@ -120,11 +120,15 @@ export default class LogsViewer extends ComponentAbstract implements DomLifecycl }; public addError = (error: ApiError): void => { - const detailedError = ( - document.getElementById(ErrorPage.templateId) as HTMLTemplateElement | null - )?.content?.querySelector( - `.error-page__desc .error-page__desc-${isHttpErrorCode(error.code) ? error.code : error.type}` - ); + const errorTemplate = document.getElementById( + ErrorPage.templateId + ) as HTMLTemplateElement | null; + + const detailedError = + errorTemplate?.content?.querySelector( + `.error-page__desc .error-page__desc-${isHttpErrorCode(error.code) ? error.code : error.type}` + ) || errorTemplate?.content?.querySelector('.error-page__desc-unknown'); + if (detailedError) { this.addLogs([`ERROR - ${detailedError.textContent}`.replace(/\n(\s)*$/gm, '')]); } diff --git a/storybook/stories/layouts/TemplatedErrors.stories.js b/storybook/stories/layouts/TemplatedErrors.stories.js index 8ba584d7d..008016a1e 100644 --- a/storybook/stories/layouts/TemplatedErrors.stories.js +++ b/storybook/stories/layouts/TemplatedErrors.stories.js @@ -71,6 +71,12 @@ export const Error502 = { }, }; +export const Error560 = { + play: async ({ canvasElement }) => { + new Hydration().hydrateError({ code: 560 }); + }, +}; + export const Timeout = { play: async ({ canvasElement }) => { new Hydration().hydrateError({ type: "ETIMEDOUT" }); diff --git a/views/templates/pages/errors/generic.html.twig b/views/templates/pages/errors/generic.html.twig index 1ce0c723f..44f6f6f83 100644 --- a/views/templates/pages/errors/generic.html.twig +++ b/views/templates/pages/errors/generic.html.twig @@ -76,6 +76,10 @@
  • {{ 'There\'s an issue with the network or connection.'|trans({}) }}
  • + +