Depanarea erorii ReactJS: „Eroare neașteptată a aplicației” cu useQuery și Axios

ReactJS - Gestionarea „Eroare neașteptată a aplicației” în useQuery

Acest script tratează eroarea utilizând ReactJS şi @tanstack/react-query pentru preluarea dinamică a datelor. Utilizează o gestionare adecvată a erorilor pentru performanță și securitate optimă a codului.

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ție alternativă: Utilizarea componentelor de rezervă

În această abordare, scriptul definește componente de rezervă pentru o experiență mai bună a utilizatorului și informații suplimentare despre erori.

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: Configurarea unui exemplu de punct final Axios pentru testare

Acest script folosește Node.js şi Expres pentru a configura un punct final de testare pentru preluarea datelor postărilor.

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

Teste unitare: verificarea redării componentelor și preluarea API

Următoarele teste validează redarea componentelor și succesul preluării API folosind Glumă şi Biblioteca de testare 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();
});

Întrebări frecvente de top pentru interogări React și tratarea erorilor

1. Ce face useQuery faci în React?
2. The useQuery prelucrează, memorează cache și actualizează datele asincrone din componentele React, gestionând automat stările de încărcare, eroare și succes.
3. De ce React afișează eroarea „Obiectele nu sunt valide ca un copil React”?
4. Această eroare se întâmplă atunci când un obiect este transmis direct ca element copil. React necesită text, numere sau elemente React ca copii, nu obiecte.
5. Cum face queryFn lucrezi în React Query?
6. queryFn specifică modul în care sunt preluate datele useQuery. Este funcția responsabilă pentru efectuarea solicitărilor API, cum ar fi axios.get.
7. De ce folosi error.message pentru afișarea erorilor?
8. Folosind error.message oferă mesaje de eroare detaliate și ușor de utilizat, mai degrabă decât declarații vagi, cum ar fi „Ceva a mers prost”, ajutând la depanarea.
9. Care este rolul queryKey în React Query?
10. queryKey identifică în mod unic fiecare interogare, permițând React Query să memoreze rezultatele și să reducă solicitările de rețea inutile.
11. Pot gestiona erorile diferit în React Query?
12. Da, onError apel invers useQuery poate fi personalizat pentru a gestiona anumite tipuri de erori, facilitând depanarea.
13. Ce este onError folosit pentru în useQuery?
14. onError în useQuery este un apel invers care rulează atunci când apare o eroare în timpul interogării. Vă permite să vă înregistrați sau să afișați informații despre erori în mod dinamic.
15. Cum testez componentele React Query?
16. Folosiți biblioteci precum Jest şi React Testing Library pentru a simula răspunsurile API și a verifica dacă starea de încărcare, eroare și succes funcționează conform așteptărilor.
17. De ce ar trebui să folosesc redarea condiționată în React?
18. Redarea condiționată îmbunătățește experiența utilizatorului prin afișarea unei anumite interfețe de utilizare bazate pe încărcare, eroare sau stări de succes, în loc să afișeze date brute sau erori.
19. Care sunt componentele de rezervă în React?
20. Componentele de rezervă oferă o interfață de utilizare alternativă, cum ar fi mesajele de eroare sau de încărcare, dacă conținutul principal nu poate fi afișat. Acestea îmbunătățesc rezistența aplicației și experiența utilizatorului.
21. Cum face axios.get lucreaza in exemplu?
22. axios.get trimite o cerere HTTP GET către server pentru a prelua date. Aici, preia datele postărilor în format JSON pentru randare în componentă.

Sfaturi pentru gestionarea erorilor pentru aplicațiile React

Dezvoltatori noi în ReactJS poate câștiga încredere învățând să depaneze și să rezolve erorile comune, cum ar fi problemele neașteptate ale aplicațiilor. Soluții precum utilizarea React Query, formatarea corectă a răspunsurilor Axios și configurarea unei gestionări precise a erorilor fac posibilă evitarea multor capcane. Îmbunătățind experiența utilizatorului cu mesaje informative și folosind componente de rezervă, asigurați un proces de dezvoltare mai ușor.

Construirea de aplicații stabile implică, de asemenea, adoptarea de strategii de testare pentru a valida dacă componentele se comportă conform așteptărilor în orice condiție. Cu instrumente precum Jest și React Testing Library, dezvoltatorii pot simula răspunsurile rețelei și pot verifica dacă aplicația reacționează corespunzător atât la succese, cât și la eșecuri. Această abordare nu numai că întărește stabilitatea, dar încurajează și practici de codare mai bune. 🚀