Add default and generic message when error code is unknown

PrestaShop · Feb 20, 2025 · 3c2e5c4 · 3c2e5c4
1 parent 5fca6b8
commit 3c2e5c4
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>