Как правильно обработать ошибку axios?

Question

[EvgenyHalvin]

Всем доброго времени суток!

Пилю проект на React(typescript).
Для работы с запросами использую react-query, axios и open-api generator.

Столкнулся с ошибкой, которую ловлю в dev-режиме:

Uncaught runtime errors:
ERROR
Network Error
AxiosError: Network Error
    at XMLHttpRequest.handleError (http://localhost:3000/static/js/...)

Что делаю.
Создал хуки мутации, для POST-запроса. Один "глупый" (тот, что выше), другой "умный"(ниже):

export const usePostSome = (
  config?: UseMutationOptions<
    AxiosResponse<CustomSuccessResponse, unknown>,
    AxiosError<CustomErrorResponse, unknown>,
    RequestData
  >,
) => {
  return useMutation(
    (data: RequestData) =>
      myApi.postSome(data),
    config,
  );
};

export const useCreateSome = () => {
  const mutation = usePostSome ({
    onSuccess: ({ data }) => {
      // обработка успешного сценария
    },
    onError: (error) => {
      // обработка ошибки
     console.log(error)
    },
    onSettled: () => {...}
  });

  const createSome = (data: RequestData) => mutation.mutateAsync(data);

  return { ...mutation, createSome };
};

После, использую хук useCreateSome в компоненте следующим образом:

const { createSome, isLoading } = useCreateSome();

  const onSubmitHandler = (values: RequestData) => {
    ...
    createSome(values);
  };

Что ожидаю.
Ожидаю обработку ошибок промиса без каких-либо ошибок. Приложение не ломается, но вылезает ошибка в dev-режиме. Если написать обработку через catch, то ошибка пропадает.

Вариант без ошибок, в котором сценарий onError срабатывает и пропадает ошибка райнтайма:

const { createSome, isLoading } = useCreateSome();

  const onSubmitHandler = (values: RequestData) => {
    ...
    createSome(values).catch((err) => console.log(err));
  };

Что я могу упускать? Где ошибаюсь? Буду рад ответу. Задавайте уточняющие вопросы.

Comments

[Snoz3f]

Можешь postSome скинуть?