Memecahkan Masalah Kesalahan ReactJS: "Kesalahan Aplikasi Tak Terduga" dengan useQuery dan Axios

ReactJS - Menangani "Kesalahan Aplikasi Tak Terduga" di useQuery

Skrip ini menangani kesalahan menggunakan ReactJS Dan @tanstack/reaksi-query untuk pengambilan data dinamis. Ini menggunakan penanganan kesalahan yang tepat untuk kinerja dan keamanan kode yang optimal.

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;

Solusi Alternatif: Menggunakan Komponen Fallback

Dalam pendekatan ini, skrip mendefinisikan komponen fallback untuk pengalaman pengguna yang lebih baik dan informasi kesalahan tambahan.

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;

Skrip Back-end: Menyiapkan Contoh Titik Akhir Axios untuk Pengujian

Skrip ini menggunakan Node.js Dan Cepat untuk menyiapkan titik akhir pengujian untuk mengambil data postingan.

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

Pengujian Unit: Memverifikasi Rendering Komponen dan Pengambilan API

Tes berikut memvalidasi rendering komponen dan keberhasilan pengambilan API Bersenda gurau Dan Perpustakaan Pengujian 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();
});

FAQ Permintaan React & Penanganan Kesalahan Teratas

1. Apa artinya? useQuery lakukan di React?
2. Itu useQuery hook mengambil, menyimpan cache, dan memperbarui data asinkron dalam komponen React, secara otomatis menangani status pemuatan, kesalahan, dan keberhasilan.
3. Mengapa React menampilkan kesalahan "Objek tidak valid sebagai anak React"?
4. Kesalahan ini terjadi ketika suatu objek diteruskan secara langsung sebagai elemen anak. React memerlukan teks, angka, atau elemen React sebagai turunan, bukan objek.
5. Bagaimana caranya queryFn bekerja di React Query?
6. queryFn menentukan bagaimana data diambil useQuery. Ini adalah fungsi yang bertanggung jawab untuk membuat permintaan API axios.get.
7. Mengapa menggunakan error.message untuk menampilkan kesalahan?
8. Menggunakan error.message memberikan pesan kesalahan yang terperinci dan mudah digunakan, bukan pernyataan yang tidak jelas seperti "Ada yang tidak beres", yang membantu pemecahan masalah.
9. Apa perannya queryKey di Bereaksi Query?
10. queryKey secara unik mengidentifikasi setiap kueri, memungkinkan React Query menyimpan hasil dalam cache dan mengurangi permintaan jaringan yang tidak perlu.
11. Bisakah saya menangani kesalahan secara berbeda di React Query?
12. Ya, itu onError panggilan balik masuk useQuery dapat disesuaikan untuk menangani jenis kesalahan tertentu, sehingga memudahkan proses debug.
13. Apa onError digunakan untuk di useQuery?
14. onError di dalam useQuery adalah panggilan balik yang dijalankan ketika terjadi kesalahan selama kueri. Ini memungkinkan Anda mencatat atau menampilkan informasi kesalahan secara dinamis.
15. Bagaimana cara menguji komponen React Query?
16. Gunakan perpustakaan seperti Jest Dan React Testing Library untuk menyimulasikan respons API dan memeriksa apakah status pemuatan, kesalahan, dan keberhasilan berfungsi seperti yang diharapkan.
17. Mengapa saya harus menggunakan rendering bersyarat di React?
18. Render bersyarat meningkatkan pengalaman pengguna dengan menampilkan UI tertentu berdasarkan pemuatan, kesalahan, atau status keberhasilan, bukan menampilkan data mentah atau kesalahan.
19. Apa saja komponen fallback di React?
20. Komponen fallback menyediakan UI alternatif, seperti pesan kesalahan atau pemuatan, jika konten utama tidak dapat ditampilkan. Mereka meningkatkan ketahanan aplikasi dan pengalaman pengguna.
21. Bagaimana caranya axios.get bekerja dalam contoh?
22. axios.get mengirimkan permintaan HTTP GET ke server untuk mengambil data. Di sini, ia mengambil data postingan dalam format JSON untuk dirender dalam komponen.

Tip Penanganan Kesalahan untuk Aplikasi React

Pengembang baru masuk ReactJS dapat memperoleh kepercayaan diri dengan belajar memecahkan masalah dan mengatasi kesalahan umum seperti masalah aplikasi yang tidak terduga. Solusi seperti menggunakan React Query, memformat respons Axios dengan benar, dan menyiapkan penanganan kesalahan yang akurat dapat menghindari banyak kesalahan. Dengan meningkatkan pengalaman pengguna dengan pesan informatif dan menggunakan komponen cadangan, Anda memastikan proses pengembangan lebih lancar.

Membangun aplikasi yang stabil juga melibatkan penerapan strategi pengujian untuk memvalidasi bahwa komponen berperilaku seperti yang diharapkan dalam kondisi apa pun. Dengan alat seperti Jest dan React Testing Library, pengembang dapat menyimulasikan respons jaringan dan memverifikasi bahwa aplikasi bereaksi dengan tepat terhadap keberhasilan dan kegagalan. Pendekatan ini tidak hanya memperkuat stabilitas tetapi juga mendorong praktik pengkodean yang lebih baik. 🚀