Запобіжники

Раніше помилки JavaScript всередині компонентів призводили до пошкодження внутрішнього стану бібліотеки React та спричиняли видачу незрозумілих помилок під час наступних рендерів. Ці помилки були завжди спричинені попереднью помилкою в коді програми. React не надавав можливості вчасно їх опрацювати в компонентах та не міг відновитися після них.

Представляємо запобіжники

Помилка JavaScript в деякій частині UI не повинна ламати весь додаток. Для вирішення цієї проблеми React версії 16 вводить для користувачів новий концепт – «запобіжник» (error boundary).

Запобіжники – це React-компоненти, які відслідковують помилки JavaScript в усьому дереві своїх дочірніх компонентів, логують їх, а також відображають запасний UI замість дерева компонентів, що зламалось. Запобіжники можуть ловити помилки під час рендеру, в методах життєвого циклу та в конструкторах компонентів, що знаходяться в дереві під ними.

Примітка

Запобіжники не можуть піймати помилки в:

• обробниках подій (дізнатися більше)
• асинхронному коді (наприклад, функції зворотнього виклику, передані в setTimeout чи requestAnimationFrame)
• серверному рендерингу (Server-side rendering)
• самому запобіжнику (не в його дочірніх компонентах)

Класовий компонент стане запобіжником, якщо він визначить один (або обидва) методи життєвого циклу: static getDerivedStateFromError() та componentDidCatch(). Використовуйте static getDerivedStateFromError() для рендеру запасного UI, після того як відбулась помилка. Для логування помилки використовуйте componentDidCatch().

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

  static getDerivedStateFromError(error) {    // Оновлюємо стан, щоб наступний рендер показав запасний UI.    return { hasError: true };  }
  componentDidCatch(error, errorInfo) {    // Ви також можете передати помилку в службу звітування про помилки    logErrorToMyService(error, errorInfo);  }
  render() {
    if (this.state.hasError) {      // Ви можете відрендерити будь-який власний запасний UI      return <h1>Something went wrong.</h1>;    }
    return this.props.children; 
  }
}

Потім використовуємо запобіжник як звичайний компонент:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Запобіжники працюють як блок catch {} в JavaScript, тільки для компонентів. Тільки класові компоненти можуть бути запобіжниками. На практиці, в більшості випадків буде доцільно оголосити один запобіжник і потім використовувати його по всьому додатку.

Зверніть увагу, що запобіжники можуть піймати помилки лише в компонентах, що знаходяться під ними в дереві компонентів. Запобіжник не може піймати помилку в собі. Якщо він зламається при спробі відрендерити повідомлення про помилку, то помилка пошириться до наступного запобіжника вище нього в дереві компонентів. Це також схоже на те, як працює блок catch {} в JavaScript.

Демонстрація

Подивіться приклад оголошення і використання запобіжника в React 16.

Де ставити запобіжники

Вирішуйте на ваш розсуд, як часто ставити запобіжники. Було б доцільно обгорнути компоненти маршрутів найвищого рівня, щоб показати користувачеві повідомлення «Щось пішло не так», так само, як це часто робиться в фреймворках на стороні сервера. Ви також можете обгорнути в запобіжник окремі віджети, щоб захистити решту додатку від збоїв в них.