مدیریت خطاها
در ری‌اکت (React)، مدیریت خطاها یک بخش اساسی برای ساخت برنامه‌های وب پایدار و قابل اعتماد است. در برنامه‌های مدرن Single Page Applications (SPA) که از کامپوننت‌های متعدد و پیچیده استفاده می‌کنند، خطاهای ناخواسته در هنگام دریافت داده‌ها، بروزرسانی state و تعاملات کاربری امری طبیعی هستند. بدون مدیریت مناسب، این خطاها می‌توانند باعث از کار افتادن کل برنامه یا رفتارهای غیرمنتظره شوند.
ری‌اکت امکاناتی مانند Error Boundaries ارائه می‌دهد که به توسعه‌دهندگان اجازه می‌دهد خطاهای رخ‌داده در کامپوننت‌های فرزند را گرفته و یک رابط کاربری جایگزین نمایش دهند. این قابلیت به جلوگیری از کرش شدن کل اپلیکیشن کمک می‌کند. علاوه بر این، استفاده از بلوک‌های try/catch و متدهای Promise.catch برای مدیریت خطاهای غیرهمزمان توصیه می‌شود.
در این مرجع، شما خواهید آموخت که چگونه کامپوننت‌های حساس به خطا بسازید، Error Boundaries را به‌طور مؤثر پیاده‌سازی کنید، خطاهای غیرهمزمان را مدیریت نمایید و با بهینه‌سازی عملکرد، پایداری برنامه را افزایش دهید. این دانش برای ساخت برنامه‌های ری‌اکت پیچیده و حرفه‌ای ضروری است و به شما کمک می‌کند تا اپلیکیشن‌هایی مقاوم، قابل نگهداری و با تجربه کاربری بهینه ایجاد کنید.
مثال پایه
jsximport React, { Component, useState } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error("خطای گرفته‌شده:", error, info);
}
render() {
if (this.state.hasError) {
return <h2>یک خطا در این کامپوننت رخ داده است.</h2>;
}
return this.props.children;
}
}
function FaultyComponent() {
const [count, setCount] = useState(0);
if (count === 3) {
throw new Error("حد شمارش عبور شد!");
}
return ( <div> <p>شمارنده فعلی: {count}</p>
<button onClick={() => setCount(count + 1)}>افزایش</button> </div>
);
}
export default function App() {
return ( <ErrorBoundary> <FaultyComponent /> </ErrorBoundary>
);
}در این مثال، کامپوننت ErrorBoundary یک کامپوننت کلاس است که خطاهای ایجادشده در کامپوننت‌های فرزند خود را گرفته و از کرش شدن کل اپلیکیشن جلوگیری می‌کند. متد getDerivedStateFromError وضعیت state را هنگام وقوع خطا به‌روزرسانی می‌کند تا رابط کاربری جایگزین نمایش داده شود و متد componentDidCatch خطا و جزئیات کامپوننت را در کنسول لاگ می‌کند تا توسعه‌دهنده بتواند مشکل را بررسی کند.
FaultyComponent یک کامپوننت تابعی ساده است که شمارنده را نگه می‌دارد و در صورت رسیدن به مقدار ۳ یک خطا پرتاب می‌کند. استفاده از useState تضمین می‌کند که state به‌صورت امن مدیریت شود و از تغییر مستقیم state جلوگیری می‌شود. این الگو می‌تواند برای مدیریت خطاهای غیرهمزمان، داده‌های ناهمزمان و کامپوننت‌های تو در تو نیز به کار رود.
مثال کاربردی
jsximport React, { useState, useEffect } from 'react';
function DataFetcher({ url }) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(res => {
if (!res.ok) throw new Error("خطا در دریافت داده‌ها");
return res.json();
})
.then(setData)
.catch(setError);
}, [url]);
if (error) return <div>خطا در بارگذاری: {error.message}</div>;
if (!data) return <div>در حال بارگذاری داده...</div>;
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
export default function App() {
return <DataFetcher url="https://jsonplaceholder.typicode.com/posts/1" />;
}Advanced ری‌اکت (React) Implementation
jsximport React, { Component } from 'react';
class AdvancedErrorBoundary extends Component {
state = { hasError: false, error: null, errorInfo: null };
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
this.setState({ errorInfo });
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return ( <div> <h1>یک خطا رخ داده است</h1>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()} <br />
{this.state.errorInfo?.componentStack} </details> </div>
);
}
return this.props.children;
}
}
function logErrorToService(error, info) {
console.log("ارسال خطا به سرویس:", error, info);
}
export default AdvancedErrorBoundary;بهترین شیوه‌ها در ری‌اکت برای مدیریت خطا شامل استفاده از Error Boundaries، مدیریت امن عملیات غیرهمزمان، جلوگیری از تغییر مستقیم state و بهینه‌سازی عملکرد است. اشتباهات رایج شامل prop drilling بیش از حد، رندرهای غیرضروری و به‌روزرسانی‌های غیرقابل کنترل state می‌باشند.
برای بهبود عملکرد می‌توان از React.memo، useCallback و useMemo استفاده کرد. ابزارهای دیباگینگ مانند React DevTools و سرویس‌های مانیتورینگ خارجی مانند Sentry می‌توانند در شناسایی و پیگیری خطاها کمک کنند. از نظر امنیت، پیام‌های خطا نباید به کاربر نهایی نمایش داده شوند و فقط در لاگ‌ها ثبت شوند تا تجربه کاربری و امنیت برنامه حفظ شود.
📊 مرجع کامل
| ری‌اکت (React) Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| ErrorBoundary | گرفتن خطاهای کامپوننت‌های فرزند | <ErrorBoundary>{children}</ErrorBoundary> | <ErrorBoundary><FaultyComponent /></ErrorBoundary> | مدیریت خطای محلی |
| getDerivedStateFromError | به‌روزرسانی state هنگام خطا | static getDerivedStateFromError(error) | static getDerivedStateFromError(error) { return { hasError: true }; } | فقط کامپوننت کلاس |
| componentDidCatch | ثبت خطا | componentDidCatch(error, info) | componentDidCatch(error, info) { console.log(error, info); } | برای مانیتورینگ |
| useState | مدیریت state محلی | const [state, setState] = useState(initial) | const [count, setCount] = useState(0) | از mutation مستقیم جلوگیری کنید |
| useEffect | اجرای اثرات و عملیات async | useEffect(() => {}, [dependencies]) | useEffect(() => { fetchData(); }, []); | بارگذاری داده |
| try/catch | مدیریت خطاهای همزمان/غیرهمزمان | try { ... } catch(error) { ... } | try { const res = await fetch(url); } catch(e) { setError(e); } | حفظ سازگاری state |
| setState | به‌روزرسانی state کلاس | this.setState({ key: value }) | this.setState({ hasError: true }); | از mutation مستقیم جلوگیری شود |
| React.memo | جلوگیری از رندرهای غیرضروری | export default React.memo(Component) | export default React.memo(FaultyComponent); | بهینه‌سازی عملکرد |
| PropTypes | اعتبارسنجی props | Component.propTypes = {...} | FaultyComponent.propTypes = { count: PropTypes.number } | کشف زودهنگام خطا |
| ErrorBoundaryFallback | رابط کاربری جایگزین | function Fallback() { return <div>Error</div>; } | <ErrorBoundary fallback={<Fallback />}><Component /></ErrorBoundary> | بهبود UX |
📊 Complete ری‌اکت (React) Properties Reference
| Property | Values | Default | Description | ری‌اکت (React) Support |
|---|---|---|---|---|
| hasError | true, false | false | وضعیت خطا | Class Components |
| error | Error object | null | ذخیره خطا | Class Components |
| errorInfo | object | null | Stack trace کامپوننت | Class Components |
| children | ReactNode | null | کامپوننت‌های فرزند | تمام کامپوننت‌ها |
| fallback | ReactNode | null | رابط کاربری جایگزین هنگام خطا | React 16+ |
| getDerivedStateFromError | function | null | به‌روزرسانی state هنگام خطا | Class Components |
| componentDidCatch | function | null | متد دریافت خطا | Class Components |
| useState | function | null | Hook مدیریت state | Functional Components |
| useEffect | function | null | Hook اثرات و async | Functional Components |
| setState | function | null | به‌روزرسانی state کلاس | Class Components |
| React.memo | function | null | جلوگیری از re-render غیرضروری | Functional Components |
| PropTypes | object | null | اعتبارسنجی props | تمام کامپوننت‌ها |
مدیریت خطاها در ری‌اکت برای ایجاد کامپوننت‌های پایدار و قابل اعتماد حیاتی است. استفاده از Error Boundaries، مدیریت امن عملیات غیرهمزمان و بهینه‌سازی عملکرد، برنامه را مقاوم در برابر کرش و خطا می‌کند. در مراحل بعدی، بررسی عملکرد، مدیریت state جهانی و ابزارهای مانیتورینگ به توسعه‌دهندگان کمک می‌کند تا خطاها را به صورت حرفه‌ای شناسایی و مدیریت کنند و تجربه کاربری بهینه ایجاد شود.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود