Feilsøking av ReactJS-feil: "Uventet applikasjonsfeil" med useQuery og Axios

ReactJS - Håndtering av "Uventet applikasjonsfeil" i useQuery

Dette skriptet håndterer feilen ved hjelp av ReactJS og @tanstack/react-query for dynamisk datahenting. Den bruker riktig feilhåndtering for optimal kodeytelse og sikkerhet.

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;

Alternativ løsning: Bruk av reservekomponenter

I denne tilnærmingen definerer skriptet reservekomponenter for bedre brukeropplevelse og ytterligere feilinformasjon.

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;

Back-end-skript: Sette opp et eksempel på Axios-endepunkt for testing

Dette skriptet bruker Node.js og Uttrykke for å sette opp et testendepunkt for henting av innleggsdata.

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

Enhetstester: Verifisering av komponentgjengivelse og API-henting

Følgende tester validerer komponentgjengivelse og API-hentingssuksess ved å bruke Spøk og React Testing Library.

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

Vanlige spørsmål om React-spørsmål og feilhåndtering

1. Hva gjør useQuery gjøre i React?
2. De useQuery hook henter, cacher og oppdaterer asynkrone data i React-komponenter, og håndterer automatisk lasting, feil og suksesstilstander.
3. Hvorfor viser React feilmeldingen "Objekter er ikke gyldige som et React-barn"?
4. Denne feilen oppstår når et objekt sendes direkte som et underordnet element. React krever tekst, tall eller React-elementer som barn, ikke objekter.
5. Hvordan gjør det queryFn jobber i React Query?
6. queryFn spesifiserer hvordan data hentes inn useQuery. Det er funksjonen som er ansvarlig for å lage API-forespørsler, som axios.get.
7. Hvorfor bruke error.message for å vise feil?
8. Bruker error.message gir detaljerte, brukervennlige feilmeldinger i stedet for vage utsagn som "Noe gikk galt", og hjelper til med feilsøking.
9. Hva er rollen til queryKey i React Query?
10. queryKey identifiserer hver spørring unikt, slik at React Query kan bufre resultater og redusere unødvendige nettverksforespørsler.
11. Kan jeg håndtere feil annerledes i React Query?
12. Ja, den onError tilbakeringing useQuery kan tilpasses for å håndtere spesifikke feiltyper, noe som gjør feilsøking enklere.
13. Hva er onError brukt for i brukQuery?
14. onError i useQuery er en tilbakeringing som kjører når det oppstår en feil under spørringen. Den lar deg logge eller vise feilinformasjon dynamisk.
15. Hvordan tester jeg React Query-komponenter?
16. Bruk biblioteker som Jest og React Testing Library for å simulere API-svar og sjekke om lasting, feil og suksesstilstander fungerer som forventet.
17. Hvorfor bør jeg bruke betinget gjengivelse i React?
18. Betinget gjengivelse forbedrer brukeropplevelsen ved å vise spesifikke brukergrensesnitt basert på lasting, feil eller suksesstilstander i stedet for å vise rådata eller feil.
19. Hva er reservekomponenter i React?
20. Reservekomponenter gir alternativt brukergrensesnitt, for eksempel feil- eller innlastingsmeldinger, hvis hovedinnholdet ikke kan vises. De forbedrer appens motstandskraft og brukeropplevelse.
21. Hvordan gjør det axios.get fungerer i eksempelet?
22. axios.get sender en HTTP GET-forespørsel til serveren for å hente data. Her henter den postdata i JSON-format for gjengivelse i komponenten.

Feilhåndteringstips for React-apper

Nye utviklere i ReactJS kan få tillit ved å lære å feilsøke og løse vanlige feil som uventede applikasjonsproblemer. Løsninger som å bruke React Query, riktig formatering av Axios-svar og sette opp nøyaktig feilhåndtering gjør det mulig å unngå mange fallgruver. Ved å forbedre brukeropplevelsen med informative meldinger og bruke reservekomponenter sikrer du en jevnere utviklingsprosess.

Å bygge stabile applikasjoner innebærer også å ta i bruk teststrategier for å validere at komponenter oppfører seg som forventet under alle forhold. Med verktøy som Jest og React Testing Library kan utviklere simulere nettverksresponser og verifisere at appen reagerer riktig på både suksesser og fiaskoer. Denne tilnærmingen styrker ikke bare stabiliteten, men fremmer også bedre kodingspraksis. 🚀