مرزهای خطای React: راهنمای جامع برای مدیریت قوی خطا

در دنیای توسعه وب مدرن، تجربه کاربری روان و قابل اعتماد از اهمیت بالایی برخوردار است. یک خطای مدیریت نشده می‌تواند کل برنامه React را از کار بیندازد و کاربران را ناامید کرده و به طور بالقوه داده‌های ارزشمند را از بین ببرد. مرزهای خطای React (React Error Boundaries) یک مکانیزم قدرتمند برای مدیریت زیبای این خطاها، جلوگیری از کرش‌های فاجعه‌بار و ارائه تجربه‌ای مقاوم‌تر و کاربرپسندتر فراهم می‌کنند. این راهنما یک نمای کلی و جامع از مرزهای خطای React، شامل هدف، پیاده‌سازی، بهترین شیوه‌ها و تکنیک‌های پیشرفته آن‌ها را ارائه می‌دهد.

مرزهای خطای React چه هستند؟

مرزهای خطا کامپوننت‌های React هستند که خطاهای جاوا اسکریپت را در هر جای درخت کامپوننت فرزند خود می‌گیرند، آن خطاها را ثبت می‌کنند و به جای درختی که کرش کرده، یک UI جایگزین (fallback) نمایش می‌دهند. آنها به عنوان یک شبکه ایمنی عمل می‌کنند و از اینکه خطای یک بخش از برنامه، کل UI را از کار بیندازد، جلوگیری می‌کنند. مرزهای خطا که در React 16 معرفی شدند، جایگزین مکانیزم‌های مدیریت خطای قبلی و کمتر قوی شدند.

مرزهای خطا را مانند بلوک‌های `try...catch` برای کامپوننت‌های React در نظر بگیرید. با این حال، برخلاف `try...catch`، آنها برای کامپوننت‌ها کار می‌کنند و یک روش اعلانی (declarative) و قابل استفاده مجدد برای مدیریت خطاها در سراسر برنامه شما فراهم می‌کنند.

چرا از مرزهای خطا استفاده کنیم؟

مرزهای خطا چندین مزیت حیاتی ارائه می‌دهند:

• جلوگیری از کرش کردن برنامه: مهم‌ترین مزیت، جلوگیری از این است که یک خطای کامپوننت، کل برنامه را از کار بیندازد. به جای یک صفحه خالی یا یک پیام خطای غیرمفید، کاربران یک UI جایگزین زیبا می‌بینند.
• بهبود تجربه کاربری: با نمایش یک UI جایگزین، مرزهای خطا به کاربران اجازه می‌دهند تا به استفاده از بخش‌هایی از برنامه که هنوز به درستی کار می‌کنند، ادامه دهند. این کار از یک تجربه ناخوشایند و خسته‌کننده جلوگیری می‌کند.
• جداسازی خطاها: مرزهای خطا به جداسازی خطاها در بخش‌های خاصی از برنامه کمک می‌کنند و شناسایی و رفع اشکال ریشه مشکل را آسان‌تر می‌سازند.
• ثبت و نظارت پیشرفته: مرزهای خطا یک مکان مرکزی برای ثبت خطاهایی که در برنامه شما رخ می‌دهد، فراهم می‌کنند. این اطلاعات می‌تواند برای شناسایی و رفع مشکلات به صورت پیشگیرانه بسیار ارزشمند باشد. این می‌تواند به یک سرویس نظارتی مانند Sentry، Rollbar یا Bugsnag که همگی پوشش جهانی دارند، متصل شود.
• حفظ وضعیت برنامه: به جای از دست دادن تمام وضعیت برنامه به دلیل یک کرش، مرزهای خطا به بقیه برنامه اجازه می‌دهند تا به کار خود ادامه دهند و پیشرفت و داده‌های کاربر را حفظ کنند.

ایجاد یک کامپوننت مرز خطا

برای ایجاد یک کامپوننت مرز خطا، شما باید یک کامپوننت کلاسی تعریف کنید که یکی یا هر دو متد چرخه حیات زیر را پیاده‌سازی کند:

• static getDerivedStateFromError(error): این متد استاتیک پس از اینکه یک خطا توسط کامپوننت فرزند پرتاب شود، فراخوانی می‌شود. این متد خطای پرتاب شده را به عنوان آرگومان دریافت می‌کند و باید مقداری را برای به‌روزرسانی state برگرداند تا UI جایگزین رندر شود.
• componentDidCatch(error, info): این متد پس از اینکه یک خطا توسط کامپوننت فرزند پرتاب شود، فراخوانی می‌شود. این متد خطای پرتاب شده و همچنین یک آبجکت info حاوی اطلاعاتی در مورد اینکه کدام کامپوننت خطا را پرتاب کرده است، دریافت می‌کند. شما می‌توانید از این متد برای ثبت خطا یا انجام سایر عملیات جانبی (side effects) استفاده کنید.

در اینجا یک مثال ساده از یک کامپوننت مرز خطا آورده شده است:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // state را به‌روزرسانی کنید تا رندر بعدی UI جایگزین را نشان دهد.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // مثال "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Caught an error: ", error, info.componentStack);
    // شما همچنین می‌توانید خطا را در یک سرویس گزارش خطا ثبت کنید
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // شما می‌توانید هر UI جایگزین سفارشی را رندر کنید
      return 
مشکلی پیش آمده است.
;
    }

    return this.props.children; 
  }
}

توضیح:

• کامپوننت ErrorBoundary یک کامپوننت کلاسی است که از React.Component ارث‌بری می‌کند.
• سازنده (constructor) حالت (state) را با hasError: false مقداردهی اولیه می‌کند. این پرچم برای تعیین اینکه آیا UI جایگزین باید رندر شود یا نه، استفاده خواهد شد.
• static getDerivedStateFromError(error) یک متد استاتیک است که خطای پرتاب شده را دریافت می‌کند. این متد state را به hasError: true به‌روزرسانی می‌کند، که باعث رندر شدن UI جایگزین می‌شود.
• componentDidCatch(error, info) یک متد چرخه حیات است که خطا و یک آبجکت info حاوی اطلاعاتی در مورد پشته کامپوننت (component stack) را دریافت می‌کند. از این متد برای ثبت خطا در کنسول استفاده می‌شود. در یک برنامه واقعی، شما معمولاً خطا را در یک سرویس گزارش خطا ثبت می‌کنید.
• متد render() وضعیت hasError را بررسی می‌کند. اگر true باشد، یک UI جایگزین (در این مورد، یک تگ ساده

  ) را رندر می‌کند. در غیر این صورت، فرزندان کامپوننت را رندر می‌کند.

استفاده از مرزهای خطا

برای استفاده از یک مرز خطا، به سادگی کامپوننت یا کامپوننت‌هایی را که می‌خواهید محافظت کنید، با کامپوننت ErrorBoundary بپوشانید:

اگر ComponentThatMightThrow خطایی پرتاب کند، ErrorBoundary خطا را گرفته، state خود را به‌روزرسانی کرده و UI جایگزین خود را رندر می‌کند. بقیه برنامه به طور عادی به کار خود ادامه خواهند داد.

محل قرارگیری مرز خطا

محل قرارگیری مرزهای خطا برای مدیریت مؤثر خطا بسیار حیاتی است. این استراتژی‌ها را در نظر بگیرید:

• مرزهای خطای سطح بالا: کل برنامه را با یک مرز خطا بپوشانید تا هرگونه خطای مدیریت نشده را گرفته و از کرش کامل برنامه جلوگیری کنید. این یک سطح اولیه از محافظت را فراهم می‌کند.
• مرزهای خطای جزئی (Granular): کامپوننت‌ها یا بخش‌های خاصی از برنامه را با مرزهای خطا بپوشانید تا خطاها را جدا کرده و UIهای جایگزین هدفمندتری ارائه دهید. برای مثال، ممکن است یک کامپوننتی را که داده‌ها را از یک API خارجی دریافت می‌کند، با یک مرز خطا بپوشانید.
• مرزهای خطای سطح صفحه: قرار دادن مرزهای خطا در اطراف کل صفحات یا مسیرهای برنامه خود را در نظر بگیرید. این کار از تأثیر خطای یک صفحه بر صفحات دیگر جلوگیری می‌کند.

مثال:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

در این مثال، هر بخش اصلی برنامه (Header, Sidebar, ContentArea, Footer) با یک مرز خطا پوشانده شده است. این به هر بخش اجازه می‌دهد تا خطاها را به طور مستقل مدیریت کند و از تأثیر یک خطا بر کل برنامه جلوگیری می‌کند.

سفارشی‌سازی UI جایگزین

UI جایگزینی که توسط یک مرز خطا نمایش داده می‌شود باید آموزنده و کاربرپسند باشد. این دستورالعمل‌ها را در نظر بگیرید:

• ارائه یک پیام خطای واضح: یک پیام خطای مختصر و آموزنده نمایش دهید که توضیح دهد چه مشکلی پیش آمده است. از اصطلاحات فنی خودداری کنید و از زبانی استفاده کنید که برای کاربران قابل فهم باشد.
• ارائه راه‌حل: راه‌حل‌های احتمالی را به کاربر پیشنهاد دهید، مانند رفرش کردن صفحه، تلاش مجدد در زمانی دیگر، یا تماس با پشتیبانی.
• حفظ ثبات برند: اطمینان حاصل کنید که UI جایگزین با طراحی کلی و برندینگ برنامه شما مطابقت دارد. این به حفظ یک تجربه کاربری یکپارچه کمک می‌کند.
• فراهم کردن راهی برای گزارش خطا: یک دکمه یا لینک قرار دهید که به کاربران اجازه دهد خطا را به تیم شما گزارش دهند. این می‌تواند اطلاعات ارزشمندی برای اشکال‌زدایی و رفع مشکلات فراهم کند.

مثال:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // state را به‌روزرسانی کنید تا رندر بعدی UI جایگزین را نشان دهد.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // شما همچنین می‌توانید خطا را در یک سرویس گزارش خطا ثبت کنید
    console.error("Caught an error: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // شما می‌توانید هر UI جایگزین سفارشی را رندر کنید
      return (
        

          
وای! مشکلی پیش آمده است.
          
متأسفیم، اما در حین نمایش این محتوا خطایی رخ داد.
          
لطفاً صفحه را رفرش کنید یا در صورت ادامه مشکل با پشتیبانی تماس بگیرید.
           window.location.reload()}>رفرش صفحه
          تماس با پشتیبانی
        
      );
    }

    return this.props.children; 
  }
}

این مثال یک UI جایگزین آموزنده‌تر را نمایش می‌دهد که شامل یک پیام خطای واضح، راه‌حل‌های پیشنهادی و لینک‌هایی برای رفرش کردن صفحه و تماس با پشتیبانی است.

مدیریت انواع مختلف خطاها

مرزهای خطا، خطاهایی را که در حین رندرینگ، در متدهای چرخه حیات و در سازنده‌های کل درخت زیرمجموعه خود رخ می‌دهند، می‌گیرند. آنها خطاهای مربوط به موارد زیر را *نمی‌گیرند*:

• مدیریت‌کننده‌های رویداد (Event handlers)
• کد ناهمگام (مانند setTimeout، requestAnimationFrame)
• رندر سمت سرور (Server-side rendering)
• خطاهایی که در خود مرز خطا پرتاب می‌شوند (به جای فرزندان آن)

برای مدیریت این نوع خطاها، باید از تکنیک‌های مختلفی استفاده کنید.

مدیریت‌کننده‌های رویداد

برای خطاهایی که در مدیریت‌کننده‌های رویداد رخ می‌دهند، از یک بلوک استاندارد try...catch استفاده کنید:

function MyComponent() {
  const handleClick = () => {
    try {
      // کدی که ممکن است خطا پرتاب کند
      throw new Error("Something went wrong in the event handler");
    } catch (error) {
      console.error("Error in event handler: ", error);
      // خطا را مدیریت کنید (مثلاً، نمایش پیام خطا)
      alert("خطایی رخ داد. لطفاً دوباره تلاش کنید.");
    }
  };

  return روی من کلیک کن;
}

کد ناهمگام

برای خطاهایی که در کد ناهمگام رخ می‌دهند، از بلوک‌های try...catch درون تابع ناهمگام استفاده کنید:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // پردازش داده‌ها
        console.log(data);
      } catch (error) {
        console.error("Error fetching data: ", error);
        // خطا را مدیریت کنید (مثلاً، نمایش پیام خطا)
        alert("دریافت داده‌ها با شکست مواجه شد. لطفاً بعداً دوباره تلاش کنید.");
      }
    }

    fetchData();
  }, []);

  return 
در حال بارگذاری داده‌ها...
;
}

به عنوان جایگزین، می‌توانید از یک مکانیزم مدیریت خطای سراسری برای promise rejectionهای مدیریت نشده استفاده کنید:

window.addEventListener('unhandledrejection', function(event) {
  console.error('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ');');
  // به صورت اختیاری یک پیام خطای سراسری نمایش دهید یا خطا را در یک سرویس ثبت کنید
  alert("یک خطای غیرمنتظره رخ داد. لطفاً بعداً دوباره تلاش کنید.");
});

تکنیک‌های پیشرفته مرز خطا

بازنشانی (Resetting) مرز خطا

در برخی موارد، ممکن است بخواهید راهی برای کاربران فراهم کنید تا مرز خطا را بازنشانی کرده و عملیاتی که باعث خطا شده را دوباره امتحان کنند. این می‌تواند در صورتی مفید باشد که خطا به دلیل یک مشکل موقتی، مانند مشکل شبکه، ایجاد شده باشد.

برای بازنشانی یک مرز خطا، می‌توانید از یک کتابخانه مدیریت state مانند Redux یا Context برای مدیریت وضعیت خطا و ارائه یک تابع بازنشانی استفاده کنید. به عنوان جایگزین، می‌توانید از یک رویکرد ساده‌تر با وادار کردن مرز خطا به بازنصب (remount) استفاده کنید.

مثال (وادار کردن به بازنصب):

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorCount: 0, key: 0 };
  }

  static getDerivedStateFromError(error) {
    // state را به‌روزرسانی کنید تا رندر بعدی UI جایگزین را نشان دهد.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // شما همچنین می‌توانید خطا را در یک سرویس گزارش خطا ثبت کنید
    console.error("Caught an error: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // شما می‌توانید هر UI جایگزین سفارشی را رندر کنید
      return (
        

          
وای! مشکلی پیش آمده است.
          
متأسفیم، اما در حین نمایش این محتوا خطایی رخ داد.
          دوباره تلاش کنید
        
      );
    }

    return 
{this.props.children}
;
  }
}

در این مثال، یک 'key' به div بسته‌بندی‌کننده اضافه شده است. تغییر key باعث می‌شود که کامپوننت دوباره بازنصب (remount) شود و به طور مؤثر حالت خطا را پاک کند. متد `resetError` وضعیت `key` کامپوننت را به‌روزرسانی می‌کند و باعث می‌شود کامپوننت بازنصب شده و فرزندان خود را دوباره رندر کند.

استفاده از مرزهای خطا با Suspense

React Suspense به شما این امکان را می‌دهد که رندر یک کامپوننت را تا زمانی که شرطی برآورده شود (مثلاً، داده‌ها دریافت شوند) «معلق» کنید. شما می‌توانید مرزهای خطا را با Suspense ترکیب کنید تا تجربه مدیریت خطای قوی‌تری برای عملیات ناهمگام فراهم کنید.

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      در حال بارگذاری...