ErrorBoundary in React

Що таке ErrorBoundary?

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

Використання ErrorBoundary є важливим з декількох причин:

1. Покращує користувацький досвід: Замість того, щоб користувачі бачили білі екрани або нерозбірливі повідомлення про помилки, ErrorBoundary дозволяє відображати структуровані, зрозумілі повідомлення або візуальні елементи.
2. Підтримує стабільність додатка: Захищає додаток від повного краху, дозволяючи користувачам продовжувати взаємодію з тими частинами додатка, які не були зачеплені помилкою.
3. Спрощує відладку: Забезпечує механізми для логування помилок, що допомагає розробникам швидше виявляти та вирішувати проблеми у додатках.

Механізм ErrorBoundary

Перехоплення помилок: ErrorBoundary використовують два методи життєвого циклу, static getDerivedStateFromError() та componentDidCatch(), для перехоплення помилок в дочірніх компонентах.

• getDerivedStateFromError(): Викликається після виникнення помилки у будь-якому дочірньому компоненті. Використовується для рендеринга запасного UI, коли дочірній компонент зазнає помилку.
• componentDidCatch(): Використовується для запису інформації про помилку, такої як стек викликів, і може бути використаний для логування помилок до зовнішніх сервісів. Запасний UI: Коли помилка виникає, ErrorBoundary може рендерити запасний інтерфейс замість крахованого компонента, покращуючи користувацький досвід та запобігаючи впливу помилки на інші частини додатка.
• Ізоляція помилок: ErrorBoundary ізолює помилку в конкретному компоненті, запобігаючи поширенню помилки та краху всього додатка.

Заглушка для відображення помилок

ErrorBoundary може використовувати запасний UI для відображення помилок. Це може бути просте повідомлення про помилку або більш складний інтерфейс, який дозволяє користувачам взаємодіяти з додатком, навіть коли виникає помилка. Ось приклад запасного UI для відображення помилок який ми використовували в Blynk:

Приклад використання ErrorBoundary

Пропоную вам приклад використання ErrorBoundary у React:

import React from "react";
import PropTypes from "prop-types";

import ErrorPage from "./components/ErrorPage";

class ErrorBoundary extends React.Component {
  static getDerivedStateFromError() {
    // Обновити стан, щоб наступний рендер показав запасний UI.
    return { hasError: true };
  }

  state = { hasError: false };

  componentDidMount() {
    // Додати слухача кліків для збору даних про помилки
    document.addEventListener?.("click", e => {
      window.STACK_FOR_ERROR.addClick(e?.target);
    });
  }

  componentDidCatch(error, info) {
    // Відправити помилку на сервер у виробничому середовищі та ігнорувати деякі помилки
    if (
      process.env.NODE_ENV === "production" &&
      error.message &&
      this.ignoredErrors.every(text => !error.message.includes(text))
    ) {
      this.handleSendError(error, info); // Відправка помилки на сервер
    }
  }

  handleSendError = (error, info) => {
    this.props.sendError({
      msg: `Message: ${error.message}, Location: ${window.location.href}`,
      obj: JSON.stringify({
        ...info,
        // Додати додаткові дані про користувача
        userActions: window.STACK_FOR_ERROR.export(),
      }),
    });
  };

  // Ігнорувати деякі помилки
  ignoredErrors = [
    "returnfalse is not defined", // addblock error
  ];

  render() {
    if (this.state.hasError) {
      // Відобразити запасний UI
      return <ErrorPage />;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Зовнішні бібліотеки та інструменти

Є кілька зовнішніх бібліотек та інструментів, які можна використовувати для реалізації ErrorBoundary у React:

• react-error-boundary - Це бібліотека, яка надає простий спосіб використання ErrorBoundary у React.
• Sentry - Це інструмент для збору, агрегації та відображення помилок у веб-додатках. Він може бути використаний для логування помилок, які виникають у ErrorBoundary.
• Bugsnag - Це інша платформа для збору та агрегації помилок у веб-додатках. Вона також може бути використана для логування помилок, які виникають у ErrorBoundary.
• Rollbar - Це ще один інструмент для збору та агрегації помилок у веб-додатках. Він також може бути використаний для логування помилок, які виникають у ErrorBoundary.

Висновок

ErrorBoundary у React - це потужний механізм для обробки помилок у веб-додатках. Він дозволяє відобразити запасний інтерфейс, коли виникає помилка, покращуючи користувацький досвід та запобігаючи краху всього додатка. Є кілька зовнішніх бібліотек та інструментів, які можна використовувати для реалізації ErrorBoundary у React, таких як react-error-boundary, Sentry, Bugsnag та Rollbar. Я сподіваюся, що ця стаття була корисною для вас, і ви зможете успішно використовувати ErrorBoundary у своїх проектах.