Como tratar Network Error Axios – React

Se fosse assim como eu já usou Axios dentro do React então certamente você já deve ter se deparado com o temido Network Error, mas fique tranquilo, hoje vou explicar como tratar o Network Error e obter as informações necessárias para tratar o erro em si.

Mas antes de aprender a tratar o erro precisamos entender porque o erro retorna só o texto Networt Error.

Isso ocorre pois geralmente debuggamos essas requisições com console.log(erro) e é exatamente ai que mora o erro.

O erro ocorre pois o console.log usa o método padrão toString para transformar objetos complexos em uma string e exibir no console.

Isso se dá por conta da sobrescrita da função toString dentro da classe de erro do Axios.

Bom agora que sabemos o porque o erro ocorre vamos ver como trata-lo.

Para tratar esse erro existem três alternativas, vamos ver cada uma delas.

Analise o objeto completo

Se a requisição tiver passado pelo servidor então o objeto erro tem a propriedade response.

Então se a propriedade estiver preenchida é possível acessar o retorno do servidor.

Além disso é possível ver outras informações úteis para a análise do erro, como status code por exemplo.

Veja o exemplo:

axios.get('/foo')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });

Usar um debugger

A segunda forma de tratar o erro é usar um debugger.

Dessa forma dá para analisar o objeto completo, mas isso tem que ser feito de maneira local.

Confira o exemplo:

axios.get('/foo')
  .catch(function (error) {

    debugger;
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });

Caso queira saber mais formas de debuggar confira o nosso post aqui.

Tratar o objeto de erro

A última maneira e que funciona tanto local tanto publicado é tratar o objeto de erro.

Temos duas formas principais de tratar esse objeto.

A primeira é usando o JSON.stringify.

axios.get('/foo')
  .catch(function (error) {

    console.log(JSON.stringify(error))
  });

A segunda maneira de tratar o objeto é usando o spread operator.

Pois assim um novo objeto é criado, e esse objeto não tem a função toString sobrescrita.

axios.get('/foo')
  .catch(function (error) {

    console.log({...error})
  });

Como tratar Network Error – Conclusão

Eu particularmente prefiro usar o JSON stringify, mas qualquer uma das 3 formas resolve o problema, teste e veja qual é o melhor para você.

Uma coisa importante para não ficar parado nesse tipo de problema é entender mais sobre os pacotes e frameworks.

Então eu sugiro a leitura do repositório do Axios.