Ionic 6 React with react-query fetching API using Axios does not work on real Android device (production) but works on emulator and browser (dev)

Question

I have a form that submit data to a server using react-hook-form like this:

<FormProvider {...methods}>
          <form onSubmit={handleSubmit(onIndividualSignup)}>
            <Swiper
              onSwiper={(swiper) => setSlidesRef(swiper)}
              speed={400}
              initialSlide={0}
              preventInteractionOnTransition={true}
            >
              <SwiperSlide>
                <FirstInfo next={nextSlide} />
              </SwiperSlide>
              <SwiperSlide>
                <SecondInfo prev={prevSlide} isLoading={isLoading} />
              </SwiperSlide>
            </Swiper>
          </form>
        </FormProvider>

Here I'm using the swiper/react package to create a multi-step form that works well.

Also using react-query to fetch data and Axios. To make my code reusable, I decided to create a hook for it.

export const useSignupMutation = () =>
  useMutation(
    async (user: IndividualForm) => {
      const response: AxiosResponse = await axios.post(
        `${API_URL}/api/v1/users/signup`,
        user,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      return response;
    },
    {
      onError(err) {
        console.log(err);
        Toast.show({
          text: String(err),
          duration: "long",
        });
      },
    }
  );

On Signing up for the form.

const onSignup: SubmitHandler<FormData> = (formData) => {
    console.log(formData);
    const { userType, email, fullName, username, password } = formData;

    mutate(
      { userType, email, fullName, username, password },
      {
        onSuccess: (data) => {
          queryClient.setQueryData("IndividualData", formData);
          const token: string = data.data?.token;
          setStorage("token", token);
          presentToast({
            message: "Please verify your email to continue",
            position: "bottom",
            color: "primary",
            duration: 4000,
            cssClass: "toast-container",
          });
          dismissToast();
          history.push("/page/Auth/VerifyEmail");
        },
        onError: (error) => {
          const err = error as AxiosError;
          presentToast({
            color: "danger",
            message: `${err.response?.data}`,
            position: "bottom",
            duration: 4000,
            cssClass: "toast-container",
          });
          dismissToast();
        },
      }
    );
  };

The API is consumed on Emulator and Browser but does not work on real Android devices.

The error is below:

Also tried setting some configs on capacitor.config.ts

server: {
    androidScheme: "http",
    allowNavigation: ["https://my-api.com"],
    cleartext: true,
  },

What can I try next?

Answer 1

This Error is not related to Ionic/React, it was a field on the page I was navigating to that had an error, I was using an input component lib that was not compatible with Ionic/React.