¿Cómo tratar error on cliente Axios en React? Si alguna vez has visto el término “Axios error network error“, u otros similares, y te preguntas qué son, has llegado al lugar indicado.
No importa si ha sido creada por el desarrollador más experto o por el más novato, toda aplicación web puede llegar a tener errores. Estos errores se pueden dar, entre muchas razones, por caídas de internet y errores del usuario. Aunque algunos de estos errores debemos comunicarlos, el usuario no necesita toda la información. Por ello, en este post, te enseñaremos cómo tratar error con cliente Axios en React, una manera de controlar lo que le mostramos a un usuario.
¿Qué es tratar un error?
Cuando hablamos de tratar un error en React, nos referimos a capturar los errores que se producen en nuestra aplicación y ejecutar acciones con esta captura. Algunos errores clásicos que podemos encontrar es que se corta internet, por lo que una petición no se ejecuta, o que un usuario inserta las credenciales incorrectas para acceder a la aplicación. En nuestro post sobre controlar loading en React, te hemos sugerido que, cuando te encuentres con uno de estos errores, le des un feedback al usuario para que sepa qué está pasando. Generar este feedback es una forma de tratar un error, pues primero debemos capturarlo y, luego, mandar su mensaje por pantalla: “Axios error network error”.
A continuación, te enseñaremos cómo tratar error con cliente Axios en React. Por ello, te recomendamos leer nuestro post sobre configurar un cliente en Axios.
¿Cómo tratar error en React?
Para tratar un error de manera básica, primero debemos definir los momentos en los que existen errores en nuestra aplicación. Un error puede existir y no existir, ya que es un dato cambiante, es decir, un estado. Por tanto, creamos el siguiente estado:
const [error, setError] = useState (null)
Ahora, podemos usar este estado para guardar el error que hemos capturado en nuestro post sobre controlar error login en React. Es decir, podemos insertar la siguiente línea de código dentro de nuestro catch:
setError (error)
Ahora que tenemos este error, podemos definir que, cuando el error está presente, pasamos su mensaje por pantalla. Para ello, usamos la siguiente línea de código:
{error && <div> {error.message} </div>}
A este mensaje puedes darle el estilo que quieras con la etiqueta style en React. Un ejemplo muy básico sería darle el color rojo:
{error && <div style={{color: ‘red}}> {error.message} </div>}
¿Cómo tratar error con cliente Axios en React?
Ya tenemos el mensaje de error pintado en pantalla. Es decir, nuestro usuario ya tiene el feedback necesario. Sin embargo, no estamos tratando el error del todo bien, pues el mensaje que nos manda (request failed satus code 401) no es lo bastante específico. Por ello, debemos tratar error con cliente Axios en React.
Como has podido leer en nuestro post sobre configurar un cliente en Axios, hemos creado un archivo client.js con las siguientes líneas de código:
import axios from ‘axios’;
const client = axios.create ({
baseURL: process.env.REACT_APP_API_BASE_URL,
client.interceptors.response.use (response => response.data);
export default client;
En las anteriores líneas de código, hemos definido interceptors para un cliente en React para definir qué parte de la respuesta queremos recibir. A esta función use podemos pasarle una segunda parte, que define cómo tratar error con cliente Axios en React. Para ello, usamos la siguiente función:
error => {
if (!error.response) {
return Promise.reject ({message: error.message });
}
return Promise.reject ({
message: error.response.satusText,
… error.response,
… error.response.data,
});
},
Puede que no entiendas lo que sucede en la anterior función, pero no te preocupes. Desde KeepCoding hemos hecho muchas pruebas con el objeto error y esta es la función con la que logramos capturar todos los errores y devolverlos siempre en una forma de objeto con una clave message.
Con esta función, podrás ver que ahora te llegará el error.message que llega de la API, no el 401. Este mensaje es mucho más claro para tu usuario y le da feedback sobre qué debe solucionar. Un ejemplo de esto es el mensaje wrong username/password cuando las credenciales son incorrectas. Otro ejemplo sería Axios Error Network Error cuando hay un fallo en la conexión.
Ahora que sabes cómo tratar error con cliente Axios en React, ¡es momento de poner estos conocimientos en práctica en tu propia aplicación web! Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en donde aprenderás a desarrollar todo tipo de proyectos de programación para la web con lenguajes como JavaScript, CSS y HTML. ¿A qué esperas para empezar tu formación como desarrollador web? ¡Matricúlate ya y empieza a cambiar tu futuro!
