Error Boundaries در React - بخش 2 | آموزش برنامه نویسی

۱۱ مهر ۱۳۹۷ توسط Moh3eN مجموعه: مباحث پیشرفته

در این مقاله به ادامه مبحث Error Boundaries در React خواهیم پرداخت. مشاهده بخش ۱

ردیابی Component Stack

نسخۀ ۱۶ ری‌اکت تمام ارورهایی که در حین رندر شدن اتفاق افتاد را به کنسول گزارش می‌کند، حتی اگر برنامه به طور اتفاقی آنها را ببلعد. افزون بر پیغام ارور و stack جاوا اسکریپت، ردیابی Component Stack را نیز فراهم می‌کند. اکنون شما می‌توانید ببینید که که دقیقا کجای درخت کامپوننت شکستی رخ داده است:

همچنین می‌توانید نام فایل‌ها و شمارۀ سطرها را در ردیابی Component Stack ببینید. این موضوع به طور پیش‌فرض در پروژه‌های Create React App عمل می‌کند:

اگر از Create React App استفاده نمی‌کنید، می‌توانید این پلاگین را به طور دستی به تنظیمات Babel خودتان اضافه کنید. به یاد داشته باشید که این فقط برای برنامه نویسی تعیین شده و باید در محصول غیرفعال گردد.

نکته: نام فایل‌ها که در ردیابی stack نشان داده می‌شود به مشخصات Function.name بستگی دارد. اگر از مرورگرهای قدیمی که ممکن است هنوز این را فراهم نکرده باشند (مانند اینترنت اکپلورر ۱۱)، افزودن یک پلیفیل Function.name به برنامۀ خود را مانند function.name-polyfill در نظر داشته باشید. به عنوان روشی دیگر، ممکن است بخواهید مشخصۀ displayName را به طور صریح روی تمام کامپوننت‌ها تنظیم کنید.

در مورد try/catch

try/catch عالی است ولی فقط برای کدهای دستوری کار می‌کند:

try {
  showButton();
} catch (error) {
  // ...
}

اگرچه کامپوننت‌های React اخباری و مشخص کنندۀ اینکه چه باید رندر شود می‌باشند:

<Button />

مرزهای ارور ماهیت اخباری React را حفظ می‌کنند و مطابق انتظار شما رفتار می‌کنند. برای مثال حتی اگر یک ارور در یک componentDidUpdate به سبب setState جایی در سطوح پایین درخت رخ دهد، همچنان آن ارور به نزدیک‌ترین مرز ارور به طور صحیحی منتشر خواهد شد.

در مورد کنترل کنندۀ رویدادها

مرزهای ارور، ارورهای موجود در کنترل کنندۀ رویدادها را نمی‌تواند بگیرد.

React نیاز به مرزهای ارور برای بهبود ارورهای کنترل کنندۀ رویدادها ندارد. بر خلاف متد رندر و چرخۀ زندگی، کنترل کنندۀ رویدادها حین رندر شدن رخ نخواهد داد. پس اگر چیزی را بفرستند، React همچنان می‌داند که چه چیزی را باید نمایش دهد.

اگر نیاز به گرفتن اروری در داخل یک کنترل کنندۀ رویداد دارید، از دستور معمولی try / catch جاوا اسکریپت استفاده کنید:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  handleClick = () => {
    try {
      // Do something that could throw
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <div onClick={this.handleClick}>Click Me</div>
  }
}

به یاد داشته باشید که مثال بالا می‌خواهد رفتار معمولا جاوا اسکریپت را نشان دهد و از مرزهای ارور استفاده نمی‌کند.

ذکر تغییرات نسخۀ ۱۵ ری‌اکت

نسخۀ ۱۵ ری‌اکت پشتیبانی بسیار محدودی از مرزهای ارور تحت متد متفاوتی به نام unstable_handleError داشت. این متد دیگر کار نمی‌کند و شما نیاز به تغییر آن به componentDidCatch در کد، از همان اولین نسخۀ ۱۶ ری‌اکت دارید.

برای این تغییر، ما یک codemod آماده کرده‌ایم تا به طور خودکار کد شما را به سمت نسخۀ جدید منتقل کند.

پایان مبحث Error Boundaries در ری اکت.