Fixed 500 error reporting and added tests

SFDO-Tooling · Oct 31, 2023 · d0aa518 · d0aa518
1 parent f9ce415
commit d0aa518
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 2 deletions.
diff --git a/locales_dev/en/translation.json b/locales_dev/en/translation.json
@@ -99,6 +99,7 @@
   "Share Link to Installation Job": "Share Link to Installation Job",
   "Show Logs": "Show Logs",
   "Skipped": "Skipped",
+  "Something went wrong. Please try again later.": "Something went wrong. Please try again later.",
   "Start Pre-Install Validation": "Start Pre-Install Validation",
   "Start Pre-Install Validation on Scratch Org": "Start Pre-Install Validation on Scratch Org",
   "Steps": "Steps",

diff --git a/src/js/components/apiErrors.tsx b/src/js/components/apiErrors.tsx
@@ -18,6 +18,15 @@ const ErrorToast = ({
   doRemoveError: typeof removeError;
 }) => {
   const { t } = useTranslation();
+
+  if (
+    error.message &&
+    typeof error.message === 'string' &&
+    /<[a-z][\s\S]*>/i.test(error.message)
+  ) {
+    error.message = t('Something went wrong. Please try again later.');
+  }
+
   return (
     <Toast
       labels={{

diff --git a/src/js/utils/api.ts b/src/js/utils/api.ts
@@ -1,4 +1,5 @@
 import cookies from 'js-cookie';
+import { useTranslation } from 'react-i18next';
 import { ThunkDispatch } from 'redux-thunk';
 
 import { addError } from '@/js/store/errors/actions';
@@ -72,8 +73,8 @@ const apiFetch = (
             msg = body.non_field_errors;
           }
         }
-        if (response.status === 500) {
-          msg = 'Something Went Wrong';
+        if (response.status > 500 && response.status <= 600) {
+          msg = 'Something went wrong. Please try again later.';
         }
         dispatch(addError(msg));
         const error: ApiError = new Error(msg);

diff --git a/test/js/components/apiErrors.test.js b/test/js/components/apiErrors.test.js
@@ -16,6 +16,16 @@ describe('<Errors />', () => {
     return { getByText };
   };
 
+  const setupforRawHTML = () => {
+    const errors = [
+      { id: 'err1', message: '<html><div>This is Error</div></html>' },
+    ];
+    const { findByText } = render(
+      <Errors errors={errors} doRemoveError={doRemoveError} />,
+    );
+    return { findByText };
+  };
+
   test('calls window.location.reload on link click', () => {
     const { getByText } = setup();
 
@@ -24,6 +34,11 @@ describe('<Errors />', () => {
 
     expect(window.location.reload).toHaveBeenCalledTimes(1);
   });
+  test('for raw html error', () => {
+    const { findByText } = setupforRawHTML();
+
+    findByText('Something went wrong. Please try again later.');
+  });
 
   test('calls doRemoveError on close click', () => {
     const { getByText } = setup();

diff --git a/test/js/utils/api.test.js b/test/js/utils/api.test.js
@@ -35,6 +35,14 @@ describe('apiFetch', () => {
   });
 
   describe('error', () => {
+    test('throws Error for status code greater than 500', () => {
+      fetchMock.getOnce('/test/url/', { status: 503, body: {} });
+
+      expect.assertions(1);
+      return expect(apiFetch('/test/url/', dispatch)).rejects.toThrow(
+        'Something went wrong. Please try again later.',
+      );
+    });
     test('throws Error without response', () => {
       fetchMock.getOnce('/test/url/', { status: 500, body: {} });