از کلاس داخلی ErrorBoundary برای ارتقاء سطح رسیدگی به خطا استفاده کنید.
اگر مدتی با React کار کرده‌اید، ممکن است با پیامی مواجه شده باشید که می‌گوید «برای سفارشی‌سازی رفتار رسیدگی به خطا، مرز خطا را به درخت خود اضافه کنید.» ممکن است هر زمان که اجزای شما خراب می شوند، این را در کنسول مرورگر خود دیده باشید.
React استفاده از مرز خطا را برای ارائه تجربه کاربری بهتر در هنگام بروز خطا توصیه می کند.
کلاس مرز خطا در React چیست؟
مرزهای خطا مانند بلوک try/catch در جاوا اسکریپت وانیلی کار می کنند. تفاوت این است که آنها خطاهایی را که در مؤلفه های React رخ می دهد، می گیرند. اگر خطایی در یک مؤلفه UI رخ دهد، React درخت را در آن مؤلفه جدا می کند و آن را با رابط کاربری بازگشتی که تعریف کرده اید جایگزین می کند. این بدان معنی است که یک خطا فقط بر مؤلفه ای که در آن رخ می دهد تأثیر می گذارد و بقیه برنامه همانطور که انتظار می رود کار می کند.
طبق مستندات React، کلاس های مرزی خطا خطاها را در موارد زیر دریافت نمی کنند:
- گردانندگان رویداد
- کد ناهمزمان
- کد سمت سرور
- خطاهایی که در خود مرز خطا پرتاب می شوند (به جای فرزندان آن).
برای خطاهای بالا می توانید از بلوک try/catch استفاده کنید.
به عنوان مثال، برای دریافت خطایی که در کنترل کننده رویداد رخ می دهد، از کد زیر استفاده کنید:
function EventComponent() {
const [error, setError] = useState(null)
const handleClick = () => {
try {
// Do something
} catch (error) {
setError(error)
}
}
return (
<>
<div>{error?error: ""}</div>
<button onClick={handleClick}>Button</button>
</>
)
}
از مرزهای خطا برای تشخیص خطاها فقط در مؤلفه‌های React استفاده کنید.
ایجاد کلاس مرزی خطا
شما می توانید با تعریف کلاسی که شامل یک یا هر دو روش زیر است، یک مرز خطا ایجاد کنید:
- static getDerivedStateFromError()
- componentDidCatch()
تابع getDerivedStateFromError() وضعیت کامپوننت را به محض مشاهده خطا به روز می کند در حالی که می توانید از componentDidCatch() برای ثبت اطلاعات خطا در کنسول استفاده کنید. همچنین می توانید خطاها را به یک سرویس گزارش خطا ارسال کنید.
در زیر مثالی وجود دارد که نحوه ایجاد یک کلاس مرزی خطای ساده را نشان می دهد.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { error: error };
}
componentDidCatch(error, errorInfo) {
// Log the error to an error reporting service
}
render() {
if (this.state.error) {
// Create a custom fallback UI here
return <h1>There seems to be a problem.</h1>;
}
return this.props.children;
}
}
export default ErrorBoundary;
هنگامی که خطایی رخ می دهد، getDerivedStateFromError() وضعیت را به روز می کند و در نتیجه یک رندر مجدد را راه اندازی می کند که رابط کاربری بازگشتی را نمایش می دهد.
اگر نمی‌خواهید کلاس مرز خطا را از ابتدا ایجاد کنید، از بسته NPM مرزی واکنش خطا استفاده کنید. این بسته مولفه ErrorBoundary را ارائه می دهد که اجزایی را که فکر می کنید ممکن است باعث ایجاد خطا شوند را در بر می گیرد.
استفاده از کلاس مرز خطا
برای رسیدگی به خطاها، اجزاء را با جزء کلاس مرزی خطا بپیچید. می توانید جزء سطح بالا یا اجزای جداگانه را بپیچید.
اگر کامپوننت سطح بالا را بپیچید، کلاس مرزی خطا، خطاهای پرتاب شده توسط همه مؤلفه‌های برنامه React را مدیریت می‌کند.
<ErrorBoundary>
<App/>
</ErrorBoundary>
اگر یک مؤلفه را با یک ErrorBoundary بپیچید، خطا در آن مؤلفه تأثیری بر نحوه رندر مؤلفه دیگر نخواهد داشت.
<ErrorBoundary>
<Profile/>
</ErrorBoundary>
به عنوان مثال، یک خطا در مؤلفه پروفایل بر نحوه رندر مؤلفه دیگری مانند مؤلفه Hero تأثیری نخواهد داشت. در حالی که مولفه نمایه ممکن است خراب شود، بقیه برنامه به خوبی کار خواهد کرد. این بسیار بهتر از رندر کردن صفحه اصلی سفید معمولی ارائه شده توسط React است.
مدیریت خطاها در جاوا اسکریپت
خطاهای برنامه نویسی می تواند برای توسعه دهندگان و کاربران خسته کننده باشد. عدم رسیدگی به خطاها می‌تواند کاربران شما را در معرض UI زشت با پیام‌های خطای غیرقابل درک قرار دهد.
هنگام ساخت کامپوننت React خود، یک کلاس مرزی خطا از ابتدا یا با استفاده از بسته react-error-boundary برای نمایش پیام های خطای کاربر پسند ایجاد کنید.