Add default and generic message when error code is unknown

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

Hide file tree

Showing 4 changed files with 23 additions and 10 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/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. This error was unexpected and may be caused by a temporary issue with the server or an unexpected condition in the application.'|trans({}) }}</p>
+    </div>
   </div>
 
   <pre id="log-additional-contents" class="hidden"></pre>