استكشاف أخطاء خطأ ReactJS وإصلاحها: "خطأ تطبيق غير متوقع" مع useQuery وAxios

ReactJS - معالجة "خطأ التطبيق غير المتوقع" في useQuery

يعالج هذا البرنامج النصي الخطأ باستخدام ReactJS و @tanstack/react-query لجلب البيانات الديناميكية. يستخدم معالجة مناسبة للأخطاء لتحقيق الأداء الأمثل للتعليمات البرمجية والأمان.

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;

الحل البديل: استخدام المكونات الاحتياطية

في هذا الأسلوب، يحدد البرنامج النصي المكونات الاحتياطية لتجربة مستخدم أفضل ومعلومات إضافية عن الأخطاء.

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;

البرنامج النصي الخلفي: إعداد نموذج لنقطة نهاية Axios للاختبار

يستخدم هذا البرنامج النصي Node.js و يعبر لإعداد نقطة نهاية اختبار لجلب بيانات المشاركات.

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

اختبارات الوحدة: التحقق من عرض المكونات وجلب واجهة برمجة التطبيقات

تتحقق الاختبارات التالية من صحة عرض المكونات ونجاح جلب واجهة برمجة التطبيقات (API) باستخدام مزاح و مكتبة اختبار التفاعل.

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

أهم الأسئلة الشائعة حول استعلام التفاعل ومعالجة الأخطاء

1. ماذا يفعل useQuery تفعل في رد الفعل؟
2. ال useQuery يقوم الخطاف بإحضار البيانات غير المتزامنة وتخزينها مؤقتًا وتحديثها في مكونات React، ويتعامل تلقائيًا مع حالات التحميل والخطأ والنجاح.
3. لماذا يُظهر React الخطأ "الكائنات غير صالحة باعتبارها تابعة لـ React"؟
4. يحدث هذا الخطأ عندما يتم تمرير كائن مباشرة كعنصر فرعي. يتطلب React نصًا أو أرقامًا أو عناصر React كعناصر فرعية، وليس كائنات.
5. كيف queryFn العمل في رد الفعل الاستعلام؟
6. queryFn يحدد كيفية جلب البيانات useQuery. إنها الوظيفة المسؤولة عن تقديم طلبات API، مثل axios.get.
7. لماذا تستخدم error.message لعرض الأخطاء؟
8. استخدام error.message يوفر رسائل خطأ مفصلة وسهلة الاستخدام بدلاً من العبارات الغامضة مثل "حدث خطأ ما"، مما يساعد في استكشاف الأخطاء وإصلاحها.
9. ما هو دور queryKey في رد الاستعلام؟
10. queryKey يحدد كل استعلام بشكل فريد، مما يسمح لـ React Query بتخزين النتائج مؤقتًا وتقليل طلبات الشبكة غير الضرورية.
11. هل يمكنني التعامل مع الأخطاء بشكل مختلف في React Query؟
12. نعم onError رد الاتصال في useQuery يمكن تخصيصها للتعامل مع أنواع أخطاء محددة، مما يجعل تصحيح الأخطاء أسهل.
13. ما هو onError تستخدم في useQuery؟
14. onError في useQuery هو رد اتصال يتم تشغيله عند حدوث خطأ أثناء الاستعلام. فهو يتيح لك تسجيل معلومات الخطأ أو عرضها ديناميكيًا.
15. كيف يمكنني اختبار مكونات React Query؟
16. استخدم المكتبات مثل Jest و React Testing Library لمحاكاة استجابات واجهة برمجة التطبيقات والتحقق مما إذا كانت حالات التحميل والخطأ والنجاح تعمل كما هو متوقع.
17. لماذا يجب علي استخدام العرض الشرطي في React؟
18. يعمل العرض الشرطي على تحسين تجربة المستخدم من خلال عرض واجهة مستخدم محددة بناءً على التحميل أو الخطأ أو حالات النجاح بدلاً من عرض البيانات الأولية أو الأخطاء.
19. ما هي المكونات الاحتياطية في React؟
20. توفر المكونات الاحتياطية واجهة مستخدم بديلة، مثل رسائل الخطأ أو التحميل، إذا تعذر عرض المحتوى الرئيسي. تعمل على تحسين مرونة التطبيق وتجربة المستخدم.
21. كيف axios.get العمل في المثال؟
22. axios.get يرسل طلب HTTP GET إلى الخادم لاسترداد البيانات. هنا، يقوم بجلب بيانات المنشورات بتنسيق JSON لعرضها في المكون.

نصائح للتعامل مع الأخطاء لتطبيقات React

المطورين الجدد في ReactJS يمكن أن يكتسب الثقة من خلال تعلم كيفية استكشاف الأخطاء الشائعة وحلها مثل مشكلات التطبيق غير المتوقعة. حلول مثل استخدام React Query، وتنسيق استجابات Axios بشكل صحيح، وإعداد معالجة دقيقة للأخطاء، تجعل من الممكن تجنب العديد من المخاطر. من خلال تحسين تجربة المستخدم من خلال الرسائل الإعلامية واستخدام المكونات الاحتياطية، فإنك تضمن عملية تطوير أكثر سلاسة.

يتضمن بناء التطبيقات المستقرة أيضًا اعتماد استراتيجيات الاختبار للتحقق من أن المكونات تتصرف كما هو متوقع في أي حالة. باستخدام أدوات مثل Jest وReact Testing Library، يمكن للمطورين محاكاة استجابات الشبكة والتحقق من أن التطبيق يتفاعل بشكل مناسب مع كل من النجاحات والإخفاقات. لا يعزز هذا النهج الاستقرار فحسب، بل يعزز أيضًا ممارسات الترميز الأفضل. 🚀