From 3c2e5c4942db1386b825f9761210ee22d8964ff8 Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Thu, 20 Feb 2025 15:54:35 +0000
Subject: [PATCH] Add default and generic message when error code is unknown

---
 _dev/src/ts/components/ErrorPageBuilder.ts         |  9 ++++-----
 _dev/src/ts/components/LogsViewer.ts               | 14 +++++++++-----
 _dev/tests/components/ErrorPageBuilder.test.ts     | 12 ++++++++++--
 .../stories/layouts/TemplatedErrors.stories.js     |  6 ++++++
 views/templates/pages/errors/generic.html.twig     |  4 ++++
 5 files changed, 33 insertions(+), 12 deletions(-)

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<ApiError, 'code' | 'type'>): 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/_dev/tests/components/ErrorPageBuilder.test.ts b/_dev/tests/components/ErrorPageBuilder.test.ts
index 3efc63117..0f34cce8d 100644
--- a/_dev/tests/components/ErrorPageBuilder.test.ts
+++ b/_dev/tests/components/ErrorPageBuilder.test.ts
@@ -86,6 +86,10 @@ describe('ErrorPageBuilder', () => {
         <li>There's an issue with the network or connection.</li>
       </ul>
     </div>
+
+    <div class="error-page__desc-unknown hidden">
+      <p>{{ 'An unknown error occurred. It was unexpected and may be caused by a temporary issue with the server.'|trans({}) }}</p>
+    </div>
   </div>
 
         <div class="error-page__buttons">
@@ -167,9 +171,13 @@ describe('ErrorPageBuilder', () => {
     ).toBe(false);
   });
 
-  test('updateDescriptionBlock should set error type as text if no message available', () => {
+  test('updateDescriptionBlock should set a default messahe if no specific one is available', () => {
     errorPageBuilder.updateDescriptionBlock({ code: 999, type: 'CUSTOM_ERROR' });
-    expect(errorElement.querySelector('.error-page__desc')!.innerHTML).toBe('CUSTOM_ERROR');
+    expect(
+      errorElement
+        .querySelector('.error-page__desc-unknown')!
+        .classList.contains('hidden')
+    ).toBe(false);
   });
 
   test('updateResponseBlock should get the response contents', () => {
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..4b6707fa9 100644
--- a/views/templates/pages/errors/generic.html.twig
+++ b/views/templates/pages/errors/generic.html.twig
@@ -76,6 +76,10 @@
         <li>{{ 'There\'s an issue with the network or connection.'|trans({}) }}</li>
       </ul>
     </div>
+
+    <div class="error-page__desc-unknown hidden">
+      <p>{{ 'An unknown error occurred. It was unexpected and may be caused by a temporary issue with the server.'|trans({}) }}</p>
+    </div>
   </div>
 
   <pre id="log-additional-contents" class="hidden"></pre>