Merge pull request #16090 from strapi/enhance/use-api-error-handler-a…

…xios-error

useAPIErrorHandler: Handle AxiosError

packages/core/helper-plugin/lib/src/hooks/useAPIErrorHandler/tests/useAPIErrorHandler.test.js

@@ -1,5 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 import { useIntl } from 'react-intl';
+import { AxiosError } from 'axios';
 
 import { useAPIErrorHandler } from '../useAPIErrorHandler';
 
@@ -19,6 +20,10 @@ function setup(...args) {
 }
 
 describe('useAPIErrorHandler', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('exports formatAPIError()', async () => {
     const handler = await setup();
 
@@ -80,6 +85,29 @@ describe('useAPIErrorHandler', () => {
     });
 
     expect(message).toBe('Field contains errors\nField must be unique');
-    expect(formatMessage).toBeCalledTimes(3);
+    expect(formatMessage).toBeCalledTimes(2);
+  });
+
+  test('formats AxiosErrors', async () => {
+    let message;
+    const handler = await setup();
+    const { formatAPIError } = handler.result.current;
+
+    const axiosError = new AxiosError(
+      'Error message',
+      '409',
+      undefined,
+      {},
+      {
+        status: 405,
+        data: { message: 'Error message' },
+      }
+    );
+
+    act(() => {
+      message = formatAPIError(axiosError);
+    });
+
+    expect(message).toBe('Error message');
   });
 });

packages/core/helper-plugin/lib/src/hooks/useAPIErrorHandler/useAPIErrorHandler.js

@@ -1,6 +1,8 @@
 import { useIntl } from 'react-intl';
+import { AxiosError } from 'axios';
 
 import { formatAPIError } from './utils/formatAPIError';
+import { formatAxiosError } from './utils/formatAxiosError';
 
 /**
  * Hook that exports an error message formatting function.
@@ -15,6 +17,10 @@ export function useAPIErrorHandler(intlMessagePrefixCallback) {
 
   return {
     formatAPIError(error) {
+      if (error instanceof AxiosError) {
+        return formatAxiosError(error, { intlMessagePrefixCallback, formatMessage });
+      }
+
       return formatAPIError(error, { intlMessagePrefixCallback, formatMessage });
     },
   };

packages/core/helper-plugin/lib/src/hooks/useAPIErrorHandler/utils/formatAxiosError/index.js

@@ -0,0 +1,13 @@
+import { getPrefixedId } from '../getPrefixedId';
+
+export function formatAxiosError(error, { intlMessagePrefixCallback, formatMessage }) {
+  const { code, message } = error;
+
+  return formatMessage({
+    id: getPrefixedId(message, intlMessagePrefixCallback),
+    defaultMessage: message,
+    values: {
+      code,
+    },
+  });
+}

packages/core/helper-plugin/lib/src/hooks/useAPIErrorHandler/utils/formatAxiosError/tests/index.test.js

@@ -0,0 +1,29 @@
+import { AxiosError } from 'axios';
+
+import { formatAxiosError } from '..';
+
+describe('formatAxiosError', () => {
+  test('serializes AxiosError', () => {
+    const spy = jest.fn((obj) => obj);
+    const error = new AxiosError(
+      'Error message',
+      '409',
+      undefined,
+      {},
+      {
+        status: 405,
+        data: { message: 'Error message' },
+      }
+    );
+
+    formatAxiosError(error, { formatMessage: spy });
+
+    expect(spy).toHaveBeenCalledWith({
+      defaultMessage: 'Error message',
+      id: 'apiError.Error message',
+      values: {
+        code: '409',
+      },
+    });
+  });
+});

packages/core/helper-plugin/lib/src/hooks/useAPIErrorHandler/utils/getPrefixedId/index.js

@@ -0,0 +1,14 @@
+const ERROR_PREFIX = 'apiError.';
+
+export function getPrefixedId(message, callback) {
+  const prefixedMessage = `${ERROR_PREFIX}${message}`;
+
+  // if a prefix function has been passed in it is used to
+  // prefix the id, e.g. to allow an error message to be
+  // set only for a localization namespace
+  if (typeof callback === 'function') {
+    return callback(prefixedMessage);
+  }
+
+  return prefixedMessage;
+}

packages/core/helper-plugin/lib/src/hooks/useAPIErrorHandler/utils/normalizeAPIError/index.js

@@ -1,17 +1,4 @@
-const ERROR_PREFIX = 'apiError.';
-
-function getPrefixedId(message, callback) {
-  const prefixedMessage = `${ERROR_PREFIX}${message}`;
-
-  // if a prefix function has been passed in it is used to
-  // prefix the id, e.g. to allow an error message to be
-  // set only for a localization namespace
-  if (callback) {
-    return callback(prefixedMessage);
-  }
-
-  return prefixedMessage;
-}
+import { getPrefixedId } from '../getPrefixedId';
 
 function normalizeError(error, { name, intlMessagePrefixCallback }) {
   const { message, path } = error;