1
resposta

[Dúvida] Como tratar erro de statusCode HTTP do Axios no React

Olá pessoal, estou usando o Axios e sempre que tenho uma resposta da API com um status code de 4xx ou 5xx ele mostra no console do navegador o erro com a URL da API. Como posso tratar esse erro para que não apareça no console do navegador?

Erro na requisição do axios referente a autenticação

Configuração do Axios:

import axios from 'axios';

export const API = axios.create({ baseURL: 'http://localhost:3000' });

Configuração da requisição:

import { INotesGetResponse } from '@/interfaces/notes-get-response';
import { API } from './api';

export const NotesServices = {
  getNotes: async (token: string): Promise<INotesGetResponse> => {
    try {
      const request = await API.get('/notes', {
        headers: {
          Authorization: token,
        },
      });
      const data = request.data;
      const statusCode = request.status;
      if (statusCode == 200) {
        return { data, statusCode } as INotesGetResponse;
      } else {
        throw { message: data.message, statusCode };
      }
    } catch (error) {
      return error as INotesGetResponse;
    }
  },
};

Interface do INotesGetResponse:

export interface INote {
  id: number;
  title: string;
  description: string;
}

export interface INotesGetResponse {
  data?: INote[];
  message?: string;
  statusCode?: number;
}

pages/notes.tsx:

useEffect(() => {
    NotesServices.getNotes(cookies.jwt).then((notes) => {
      notes.statusCode == 200 ? setNotes(notes.data!) : notes.statusCode == 401 ? router.push('/login') : alert(notes.message);
    });
  }, [cookies.jwt, router]);

Resposta da autenticação no backend:

class Auth {
  static async login(request: FastifyRequest, reply: FastifyReply, done: CallableFunction) {
    const token = request.headers.authorization;
    if (!token) {
      reply.status(401);
      return reply.send({ message: 'Unauthorized', statusCode: 401 });
    }
    const decoded = (await JWTService.verifyToken(token)) as User;
    if (decoded) {
      const user = await UsersService.getUser(decoded.email);
      if (user) {
        const userInfo = { email: user.email, id: user.id };
        request.user = userInfo;
        done();
      } else {
        throw new Error('Cannot find user!');
      }
    }
  }
}

export { Auth };
1 resposta

Olá Luciano! Como vai?

Peço desculpas pela demora em obter um retorno

Para tratar o erro de statusCode do Axios no React e evitar que ele seja exibido no console do navegador, você pode utilizar um bloco try-catch para capturar o erro e tratá-lo da forma que desejar.

No seu código, você já está utilizando um bloco try-catch na função getNotes do serviço NotesServices. No entanto, ao invés de retornar o erro, você está retornando o objeto error como resposta. Acredito que um bom norte para tratar o erro de forma adequada, você pode fazer o seguinte:

getNotes: async (token: string): Promise<INotesGetResponse> => {
  try {
    const request = await API.get('/notes', {
      headers: {
        Authorization: token,
      },
    });
    const data = request.data;
    const statusCode = request.status;
    if (statusCode == 200) {
      return { data, statusCode } as INotesGetResponse;
    } else {
      throw { message: data.message, statusCode };
    }
  } catch (error) {
    console.error(error);//Fazer o tratamento
    return { message: 'Ocorreu um erro na requisição', statusCode: error.statusCode } as INotesGetResponse;
  }
},

Dessa forma, quando ocorrer um erro de statusCode, o erro será capturado pelo bloco catch e você poderá realizar o tratamento adequado, como exibir uma mensagem de erro na tela ou realizar alguma ação específica para cada tipo de erro.

Espero ter ajudado a lhe dar um norte e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!