Dépannage de l'erreur ReactJS : « Erreur d'application inattendue » avec useQuery et Axios

ReactJS - Gestion des "Erreurs d'application inattendues" dans useQuery

Ce script gère l'erreur en utilisant RéagirJS et @tanstack/react-query pour la récupération dynamique des données. Il utilise une gestion appropriée des erreurs pour des performances et une sécurité optimales du code.

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;

Solution alternative : utilisation de composants de secours

Dans cette approche, le script définit des composants de secours pour une meilleure expérience utilisateur et des informations supplémentaires sur les erreurs.

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 back-end : configuration d'un exemple de point de terminaison Axios pour les tests

Ce script utilise Noeud.js et Exprimer pour configurer un point de terminaison de test pour récupérer les données des publications.

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));

Tests unitaires : vérification du rendu des composants et récupération de l'API

Les tests suivants valident le rendu des composants et la réussite de la récupération de l'API à l'aide Plaisanter et Bibliothèque de tests de réaction.

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();
});

Principales FAQ sur les requêtes React et la gestion des erreurs

1. Qu'est-ce que useQuery faire dans React ?
2. Le useQuery hook récupère, met en cache et met à jour les données asynchrones dans les composants React, gérant automatiquement les états de chargement, d'erreur et de réussite.
3. Pourquoi React affiche-t-il l'erreur « Les objets ne sont pas valides en tant qu'enfant React » ?
4. Cette erreur se produit lorsqu'un objet est passé directement en tant qu'élément enfant. React nécessite du texte, des nombres ou des éléments React comme enfants, pas comme objets.
5. Comment queryFn travailler dans React Query ?
6. queryFn spécifie comment les données sont récupérées useQuery. C'est la fonction chargée de faire des requêtes API, comme axios.get.
7. Pourquoi utiliser error.message pour afficher les erreurs ?
8. En utilisant error.message fournit des messages d'erreur détaillés et conviviaux plutôt que des déclarations vagues telles que « Quelque chose s'est mal passé », aidant ainsi au dépannage.
9. Quel est le rôle de queryKey dans React Query ?
10. queryKey identifie de manière unique chaque requête, permettant à React Query de mettre en cache les résultats et de réduire les requêtes réseau inutiles.
11. Puis-je gérer les erreurs différemment dans React Query ?
12. Oui, le onError rappel dans useQuery peut être personnalisé pour gérer des types d’erreurs spécifiques, facilitant ainsi le débogage.
13. Qu'est-ce que onError utilisé dans useQuery ?
14. onError dans useQuery est un rappel qui s'exécute lorsqu'une erreur se produit lors de la requête. Il vous permet de consigner ou d'afficher les informations d'erreur de manière dynamique.
15. Comment tester les composants React Query ?
16. Utilisez des bibliothèques comme Jest et React Testing Library pour simuler les réponses de l'API et vérifier si les états de chargement, d'erreur et de réussite fonctionnent comme prévu.
17. Pourquoi devrais-je utiliser le rendu conditionnel dans React ?
18. Le rendu conditionnel améliore l'expérience utilisateur en affichant une interface utilisateur spécifique en fonction des états de chargement, d'erreur ou de réussite plutôt que d'afficher des données brutes ou des erreurs.
19. Que sont les composants de secours dans React ?
20. Les composants de secours fournissent une interface utilisateur alternative, telle que des messages d'erreur ou de chargement, si le contenu principal ne peut pas être affiché. Ils améliorent la résilience des applications et l’expérience utilisateur.
21. Comment axios.get fonctionne dans l'exemple ?
22. axios.get envoie une requête HTTP GET au serveur pour récupérer les données. Ici, il récupère les données des publications au format JSON pour les rendre dans le composant.

Conseils de gestion des erreurs pour les applications React

Nouveaux développeurs dans RéagirJS peuvent gagner en confiance en apprenant à dépanner et à résoudre les erreurs courantes telles que les problèmes d'application inattendus. Des solutions telles que l'utilisation de React Query, le bon formatage des réponses Axios et la mise en place d'une gestion précise des erreurs permettent d'éviter de nombreux écueils. En améliorant l'expérience utilisateur avec des messages informatifs et en utilisant des composants de secours, vous garantissez un processus de développement plus fluide.

La création d'applications stables implique également l'adoption de stratégies de test pour valider que les composants se comportent comme prévu dans toutes les conditions. Avec des outils tels que Jest et React Testing Library, les développeurs peuvent simuler les réponses du réseau et vérifier que l'application réagit de manière appropriée aux succès et aux échecs. Cette approche renforce non seulement la stabilité, mais favorise également de meilleures pratiques de codage. 🚀