javascript - Cómo mostrar el cuerpo del error en el frontend usando axios

Mi punto final de API rápido está aquí:

@app.post("/api/signup", status_code=status.HTTP_200_OK)
async def signup( credentials : signupcred ):
  try: 
   print(credentials.email,  credentials.password1, credentials.name )
   response = account.create(email= credentials.email, password= credentials.password1, name = credentials.name , user_id= ID.unique() )

   return {response}

  except Exception as e: 
         raise HTTPException(status_code= status.HTTP_403_FORBIDDEN)  # Return an appropriate error status code

en el front-end, quiero imprimir la respuesta después de que se haya producido una excepción porque la respuesta explica bien el error. No quiero enviar un código de error HTTP al usuario.

mi frontend es :

const handlesignup = async (e: any) => {
  e.preventDefault();
  setLoading((loading) => !loading);
  try {
    const signupresponse = await axios.post("/api/signup", {
      email: signupemail,
      password1: password1,
      name: name,
    }); // Send as query paramers );
    // const loginresponse = await axios.post('/api/login', {email, password} )// Send as query paramers );
    // setIsloggedin(()=> true)
    router.replace("/dashboard");
    setLoading((loading) => !loading);
  } catch (error) {
    alert(error);
  }
};

El console.log no funciona porque estoy usando Next.js con un backend de FastAPI. Solo quiero imprimir la respuesta de la función create en el front-end para que los usuarios sepan por qué ocurrió el error de la función. En este momento, la alerta muestra: AxiosError: Request failed with status code 403

Respuesta #1

Ver Axios - Manejo de Errores

Puedes acceder al cuerpo de la respuesta a través de error.response?.data.

Para mostrarlo en tu componente de Next.js, normalmente solo usarías el estado de React, por ejemplo

const [error, setError] = useState<string>();

const handlesignup = async (e: any) => {
  e.preventDefault();
  setError("");
  setLoading(true);
  try {
    const signupresponse = await axios.post("/api/signup", {
      email: signupemail,
      password1: password1,
      name: name,
    }); // Send as query paramers );
    // const loginresponse = await axios.post('/api/login', {email, password} )// Send as query paramers );
    // setIsloggedin(()=> true)
    router.replace("/dashboard");
  } catch (error) {
    console.warn('Signup failed', error);
    setError(error.response?.data ?? error.message);
  } finally {
    setLoading(false);
  }
};

if (error) {
  return <p className="error">{error}</p>;
}

Respuesta #2

Si entiendo correctamente, quieres usar otro useState<AxiosError>() para que en el .catch(error) puedas setError(error), luego en el componente devuelto puedas mostrarlo...

return (
    <div> 
        ...
        {error && error.response.data.message}
    </div>
);

No sé la ruta exacta al mensaje en AxiosError, pero si estás en Typescript puedes presionar F12 sobre él y seguir los tipos.