Solução de problemas de erro ReactJS: “Erro inesperado de aplicativo” com useQuery e Axios

ReactJS - Tratamento de "Erro inesperado de aplicativo" em useQuery

Este script trata o erro usando React JS e @tanstack/react-query para busca dinâmica de dados. Ele emprega tratamento de erros adequado para desempenho e segurança ideais do código.

import React from 'react';
import Post from '../post/Post';
import './posts.scss';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import { makeRequest } from '../../axios';
// Create a new Query Client instance
const queryClient = new QueryClient();
const Posts = () => {
  // Using useQuery to fetch posts data with proper error handling
  const { isLoading, error, data } = useQuery({
    queryKey: ['posts'],
    queryFn: () => makeRequest.get('/posts').then(res => res.data),
    onError: (err) => {
      console.error("Error fetching posts:", err);
    }
  });
  return (
    <div className="posts">
      {error ? (
        <p>Something went wrong: {error.message}</p>
      ) : isLoading ? (
        <p>Loading...</p>
      ) : (
        data?.map((post) => <Post post={post} key={post.id} />)
      )}
    </div>
  );
};
export default Posts;

Solução alternativa: usando componentes substitutos

Nessa abordagem, o script define componentes substitutos para melhor experiência do usuário e informações adicionais sobre erros.

import React from 'react';
import Post from '../post/Post';
import './posts.scss';
import { useQuery } from '@tanstack/react-query';
import { makeRequest } from '../../axios';
// Fallback components
const Loading = () => <p>Loading...</p>;
const ErrorComponent = ({ error }) => (
  <p>Error: {error.message} - Please try again later.</p>
);
const Posts = () => {
  const { isLoading, error, data } = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const response = await makeRequest.get('/posts');
      return response.data;
    }
  });
  return (
    <div className="posts">
      {error ? (
        <ErrorComponent error={error} />
      ) : isLoading ? (
        <Loading />
      ) : (
        data?.map((post) => <Post post={post} key={post.id} />)
      )}
    </div>
  );
};
export default Posts;

Script de back-end: configurando um exemplo de endpoint Axios para teste

Este script usa Node.js e Expressar para configurar um endpoint de teste para buscar dados de postagens.

const express = require('express');
const app = express();
// Sample data to simulate database posts
const posts = [
  { id: 1, title: 'Post One', content: 'Content for post one' },
  { id: 2, title: 'Post Two', content: 'Content for post two' }
];
app.get('/posts', (req, res) => {
  res.json(posts);
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log('Server running on port', PORT));

Testes unitários: verificação de renderização de componentes e busca de API

Os testes a seguir validam o sucesso da renderização do componente e da busca da API usando Brincadeira e Biblioteca de testes React.

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Posts from './Posts';
test('renders loading message initially', () => {
  render(<Posts />);
  expect(screen.getByText(/loading.../i)).toBeInTheDocument();
});
test('displays error message on fetch failure', async () => {
  render(<Posts />);
  expect(await screen.findByText(/something went wrong/i)).toBeInTheDocument();
});
test('displays posts data after successful fetch', async () => {
  render(<Posts />);
  expect(await screen.findByText(/Post One/i)).toBeInTheDocument();
});

Principais perguntas frequentes sobre consultas de reação e tratamento de erros

1. O que faz useQuery fazer em React?
2. O useQuery hook busca, armazena em cache e atualiza dados assíncronos em componentes React, manipulando automaticamente estados de carregamento, erro e sucesso.
3. Por que o React mostra o erro "Objetos não são válidos como filho do React"?
4. Este erro acontece quando um objeto é passado diretamente como elemento filho. React requer texto, números ou elementos React como filhos, não como objetos.
5. Como é que queryFn funciona no React Query?
6. queryFn especifica como os dados são buscados em useQuery. É a função responsável por fazer solicitações de API, como axios.get.
7. Por que usar error.message para exibir erros?
8. Usando error.message fornece mensagens de erro detalhadas e fáceis de usar, em vez de declarações vagas como "Algo deu errado", ajudando na solução de problemas.
9. Qual é o papel queryKey na consulta React?
10. queryKey identifica exclusivamente cada consulta, permitindo que o React Query armazene resultados em cache e reduza solicitações de rede desnecessárias.
11. Posso lidar com erros de maneira diferente no React Query?
12. Sim, o onError retorno de chamada em useQuery pode ser personalizado para lidar com tipos de erros específicos, facilitando a depuração.
13. O que é onError usado em useQuery?
14. onError em useQuery é um retorno de chamada executado quando ocorre um erro durante a consulta. Ele permite registrar ou exibir informações de erro dinamicamente.
15. Como faço para testar os componentes do React Query?
16. Use bibliotecas como Jest e React Testing Library para simular respostas da API e verificar se os estados de carregamento, erro e sucesso funcionam conforme o esperado.
17. Por que devo usar renderização condicional no React?
18. A renderização condicional melhora a experiência do usuário exibindo UI específica com base em estados de carregamento, erro ou sucesso, em vez de mostrar dados brutos ou erros.
19. O que são componentes substitutos no React?
20. Os componentes substitutos fornecem UI alternativa, como mensagens de erro ou de carregamento, se o conteúdo principal não puder ser exibido. Eles melhoram a resiliência do aplicativo e a experiência do usuário.
21. Como é que axios.get funciona no exemplo?
22. axios.get envia uma solicitação HTTP GET ao servidor para recuperar dados. Aqui, ele busca dados de postagens no formato JSON para renderização no componente.

Dicas de tratamento de erros para aplicativos React

Novos desenvolvedores em React JS pode ganhar confiança aprendendo a solucionar problemas e erros comuns, como problemas inesperados de aplicativos. Soluções como o uso do React Query, a formatação adequada das respostas do Axios e a configuração do tratamento preciso de erros tornam possível evitar muitas armadilhas. Ao melhorar a experiência do usuário com mensagens informativas e usar componentes substitutos, você garante um processo de desenvolvimento mais tranquilo.

Construir aplicações estáveis ​​também envolve a adoção de estratégias de teste para validar se os componentes se comportam conforme esperado em qualquer condição. Com ferramentas como Jest e React Testing Library, os desenvolvedores podem simular respostas de rede e verificar se o aplicativo reage adequadamente tanto aos sucessos quanto às falhas. Esta abordagem não só reforça a estabilidade, mas também promove melhores práticas de codificação. 🚀