14 вересня 2025 р.Українська

Вичерпний посібник з розуміння та реалізації меж помилок JavaScript у React для надійної обробки помилок та коректної деградації UI.

Межа помилок JavaScript: Посібник із реалізації обробки помилок у React

У світі розробки на React несподівані помилки можуть призвести до розчарування користувачів та нестабільності застосунку. Добре продумана стратегія обробки помилок є вирішальною для створення надійних та стабільних застосунків. Межі помилок (Error Boundaries) у React надають потужний механізм для коректної обробки помилок, що виникають у вашому дереві компонентів, запобігаючи збою всього застосунку та дозволяючи відображати резервний UI.

Що таке межа помилок (Error Boundary)?

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

Уявляйте межу помилок як блок try...catch для компонентів React. Подібно до того, як блок try...catch дозволяє обробляти винятки в синхронному коді JavaScript, межа помилок дозволяє обробляти помилки, що виникають під час рендерингу ваших компонентів React.

Важливе зауваження: Межі помилок не перехоплюють помилки для:

Обробників подій (дізнайтеся більше в наступних розділах)
Асинхронного коду (наприклад, колбеки setTimeout або requestAnimationFrame)
Рендерингу на стороні сервера
Помилок, що виникають у самій межі помилок (а не в її дочірніх компонентах)

Навіщо використовувати межі помилок?

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

Покращений досвід користувача: Замість відображення білого екрана або незрозумілого повідомлення про помилку, ви можете показати дружній до користувача резервний UI, інформуючи його, що щось пішло не так, і потенційно пропонуючи спосіб відновлення (наприклад, перезавантаження сторінки або перехід до іншого розділу).
Стабільність застосунку: Межі помилок запобігають збою всього застосунку через помилки в одній його частині. Це особливо важливо для складних застосунків з багатьма взаємопов'язаними компонентами.
Централізована обробка помилок: Межі помилок надають централізоване місце для реєстрації помилок та відстеження першопричини проблем. Це спрощує налагодження та обслуговування.
Коректна деградація: Ви можете стратегічно розміщувати межі помилок навколо різних частин вашого застосунку, щоб гарантувати, що навіть якщо деякі компоненти вийдуть з ладу, решта застосунку залишиться функціональною. Це дозволяє забезпечити коректну деградацію в умовах помилок.

Реалізація меж помилок у React

Щоб створити межу помилок, вам потрібно визначити класовий компонент, який реалізує один (або обидва) з наступних методів життєвого циклу:

static getDerivedStateFromError(error): Цей метод життєвого циклу викликається після того, як дочірній компонент згенерував помилку. Він отримує згенеровану помилку як аргумент і повинен повернути значення для оновлення стану компонента, щоб вказати, що сталася помилка (наприклад, встановити прапорець hasError у true).
componentDidCatch(error, info): Цей метод життєвого циклу викликається після того, як дочірній компонент згенерував помилку. Він отримує згенеровану помилку як аргумент, а також об'єкт info, що містить інформацію про те, який компонент згенерував помилку. Ви можете використовувати цей метод для реєстрації помилки в сервісі, такому як Sentry або Bugsnag.

Ось базовий приклад компонента межі помилок:


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

  static getDerivedStateFromError(error) {
    // Оновлюємо стан, щоб наступний рендер показав резервний UI.
    return {
      hasError: true,
      error: error
    };
  }

  componentDidCatch(error, info) {
    // Приклад "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in MyErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    console.error("Caught an error:", error, info);
    this.setState({
        errorInfo: info.componentStack
    });
    // Ви також можете зареєструвати помилку в сервісі звітування про помилки
    //logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Ви можете відрендерити будь-який власний резервний UI
      return (
        <div>
          <h2>Щось пішло не так.</h2>
          <p>Помилка: {this.state.error ? this.state.error.message : "Сталася невідома помилка."}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Щоб використовувати межу помилок, просто оберніть дерево компонентів, яке ви хочете захистити:


<ErrorBoundary>
  <MyComponentThatMightThrow/>
</ErrorBoundary>

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

Розглянемо деякі практичні сценарії, де межі помилок можуть бути особливо корисними:

1. Обробка помилок API

Під час отримання даних з API можуть виникати помилки через проблеми з мережею, сервером або недійсні дані. Ви можете обернути компонент, який отримує та відображає дані, межею помилок, щоб коректно обробити ці помилки.


function UserProfile() {
  const [user, setUser] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/user');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (error) {
        // Помилка буде перехоплена межею помилок
        throw error; 
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Завантаження профілю користувача...</p>;
  }

  if (!user) {
    return <p>Дані користувача недоступні.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <UserProfile />
    </ErrorBoundary>
  );
}

У цьому прикладі, якщо виклик API не вдається або повертає помилку, межа помилок перехопить її та відобразить резервний UI (визначений у методі render межі помилок). Це запобігає збою всього застосунку та надає користувачеві більш інформативне повідомлення. Ви можете розширити резервний UI, щоб надати можливість повторити запит.

2. Обробка помилок сторонніх бібліотек

При використанні сторонніх бібліотек можливо, що вони можуть генерувати несподівані помилки. Обертання компонентів, які використовують ці бібліотеки, межами помилок може допомогти вам коректно обробити ці помилки.

Розглянемо гіпотетичну бібліотеку для діаграм, яка іноді генерує помилки через невідповідність даних або інші проблеми. Ви можете обернути компонент діаграми наступним чином:


function MyChartComponent() {
  try {
    // Рендеримо діаграму за допомогою сторонньої бібліотеки
    return <Chart data={data} />;
  } catch (error) {
    // Цей блок catch не буде ефективним для помилок життєвого циклу компонента React
    // Він призначений переважно для синхронних помилок у межах цієї конкретної функції.
    console.error("Error rendering chart:", error);
    // Розгляньте можливість кинути помилку, щоб її перехопила межа помилок
    throw error; // Повторне генерування помилки
  }
}

function App() {
  return (
    <ErrorBoundary>
      <MyChartComponent />
    </ErrorBoundary>
  );
}

Якщо компонент Chart генерує помилку, межа помилок перехопить її та відобразить резервний UI. Зауважте, що try/catch у MyChartComponent перехопить лише помилки в синхронній функції, а не в життєвому циклі компонента. Тому межа помилок тут є критично важливою.

3. Обробка помилок рендерингу

Помилки можуть виникати під час процесу рендерингу через недійсні дані, неправильні типи пропсів або інші проблеми. Межі помилок можуть перехоплювати ці помилки та запобігати збою застосунку.


function DisplayName({ name }) {
  if (typeof name !== 'string') {
    throw new Error('Name must be a string');
  }

  return <h2>Привіт, {name}!</h2>;
}

function App() {
  return (
    <ErrorBoundary>
      <DisplayName name={123} />  <!-- Неправильний тип пропса -->
    </ErrorBoundary>
  );
}

У цьому прикладі компонент DisplayName очікує, що пропс name буде рядком. Якщо замість цього передати число, буде згенеровано помилку, і межа помилок перехопить її та відобразить резервний UI.

Межі помилок та обробники подій

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

Для обробки помилок в обробниках подій вам потрібно використовувати традиційний блок try...catch усередині функції обробника подій.


function MyComponent() {
  const handleClick = () => {
    try {
      // Деякий код, який може згенерувати помилку
      throw new Error('An error occurred in the event handler');
    } catch (error) {
      console.error('Перехоплено помилку в обробнику подій:', error);
      // Обробляємо помилку (наприклад, показуємо повідомлення про помилку користувачеві)
    }
  };

  return <button onClick={handleClick}>Натисни мене</button>;
}

Глобальна обробка помилок

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

Для обробки таких типів помилок можна використовувати обробник подій window.onerror.


window.onerror = function(message, source, lineno, colno, error) {
  console.error('Глобальний обробник помилок:', message, source, lineno, colno, error);
  // Зареєструйте помилку в сервісі, такому як Sentry або Bugsnag
  // Відобразіть глобальне повідомлення про помилку користувачеві (необов'язково)
  return true; // Запобігаємо стандартній поведінці обробки помилок
};

Обробник подій window.onerror викликається щоразу, коли виникає неперехоплена помилка JavaScript. Ви можете використовувати його для реєстрації помилки, відображення глобального повідомлення про помилку користувачеві або вжиття інших заходів для обробки помилки.

Важливо: Повернення true з обробника подій window.onerror запобігає відображенню браузером стандартного повідомлення про помилку. Однак пам'ятайте про досвід користувача; якщо ви приховуєте стандартне повідомлення, переконайтеся, що надаєте чітку та інформативну альтернативу.

Найкращі практики використання меж помилок

Ось кілька найкращих практик, про які варто пам'ятати при використанні меж помилок:

Розміщуйте межі помилок стратегічно: Обертайте різні частини вашого застосунку межами помилок, щоб ізолювати помилки та запобігти їх каскадному поширенню. Розгляньте можливість обгортання цілих маршрутів або основних розділів вашого UI.
Надавайте інформативний резервний UI: Резервний UI повинен інформувати користувача про те, що сталася помилка, і потенційно пропонувати спосіб відновлення. Уникайте відображення загальних повідомлень про помилки, таких як "Щось пішло не так".
Реєструйте помилки: Використовуйте метод життєвого циклу componentDidCatch для реєстрації помилок у сервісі, такому як Sentry або Bugsnag. Це допоможе вам відстежити першопричину проблем та підвищити стабільність вашого застосунку.
Не використовуйте межі помилок для очікуваних помилок: Межі помилок призначені для обробки несподіваних помилок. Для очікуваних помилок (наприклад, помилок валідації, помилок API) використовуйте більш специфічні механізми обробки помилок, такі як блоки try...catch або власні компоненти для обробки помилок.
Розгляньте можливість використання кількох рівнів меж помилок: Ви можете вкладати межі помилок для забезпечення різних рівнів обробки помилок. Наприклад, у вас може бути глобальна межа помилок, яка перехоплює будь-які необроблені помилки та відображає загальне повідомлення про помилку, і більш специфічні межі помилок, які перехоплюють помилки в конкретних компонентах і відображають більш детальні повідомлення про помилки.
Не забувайте про рендеринг на стороні сервера: Якщо ви використовуєте рендеринг на стороні сервера, вам також потрібно буде обробляти помилки на сервері. Межі помилок працюють на сервері, але вам може знадобитися використовувати додаткові механізми обробки помилок для перехоплення помилок, що виникають під час початкового рендерингу.

Просунуті техніки меж помилок

1. Використання рендер-пропа

Замість рендерингу статичного резервного UI, ви можете використовувати рендер-проп для більшої гнучкості в обробці помилок. Рендер-проп — це проп-функція, яку компонент використовує для рендерингу чогось.


class ErrorBoundary extends React.Component {
  // ... (так само, як і раніше)

  render() {
    if (this.state.hasError) {
      // Використовуємо рендер-проп для рендерингу резервного UI
      return this.props.fallbackRender(this.state.error, this.state.errorInfo);
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary fallbackRender={(error, errorInfo) => (
      <div>
        <h2>Щось пішло не так!</h2>
        <p>Помилка: {error.message}</p>
        <details style={{ whiteSpace: 'pre-wrap' }}>
          {errorInfo.componentStack}
        </details>
      </div>
    )}>
      <MyComponentThatMightThrow/>
    </ErrorBoundary>
  );
}

Це дозволяє вам налаштовувати резервний UI для кожної межі помилок окремо. Рендер-проп fallbackRender отримує помилку та інформацію про неї як аргументи, що дозволяє відображати більш конкретні повідомлення про помилки або виконувати інші дії на основі помилки.

2. Межа помилок як компонент вищого порядку (HOC)

Ви можете створити компонент вищого порядку (HOC), який обертає інший компонент межею помилок. Це може бути корисно для застосування меж помилок до кількох компонентів без необхідності повторювати один і той же код.


function withErrorBoundary(WrappedComponent) {
  return class WithErrorBoundary extends React.Component {
    render() {
      return (
        <ErrorBoundary>
          <WrappedComponent {...this.props} />
        </ErrorBoundary>
      );
    }
  };
}

// Використання:
const MyComponentWithErrorHandling = withErrorBoundary(MyComponentThatMightThrow);

Функція withErrorBoundary приймає компонент як аргумент і повертає новий компонент, який обертає оригінальний компонент межею помилок. Це дозволяє легко додавати обробку помилок до будь-якого компонента у вашому застосунку.

Тестування меж помилок

Важливо тестувати ваші межі помилок, щоб переконатися, що вони працюють правильно. Ви можете використовувати бібліотеки для тестування, такі як Jest та React Testing Library, для тестування ваших меж помилок.

Ось приклад того, як тестувати межу помилок за допомогою React Testing Library:


import { render, screen, fireEvent } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
  throw new Error('This component throws an error');
}

test('рендерить резервний UI, коли виникає помилка', () => {
  render(
    <ErrorBoundary>
      <ComponentThatThrows />
    </ErrorBoundary>
  );

  expect(screen.getByText('Щось пішло не так.')).toBeInTheDocument();
});

Цей тест рендерить компонент ComponentThatThrows, який генерує помилку. Потім тест перевіряє, що відображається резервний UI, відрендерений межею помилок.

Межі помилок та серверні компоненти (React 18+)

З появою серверних компонентів у React 18 і пізніших версіях межі помилок продовжують відігравати життєво важливу роль в обробці помилок. Серверні компоненти виконуються на сервері та надсилають клієнту лише відрендерений результат. Хоча основні принципи залишаються незмінними, є кілька нюансів, які варто враховувати:

Реєстрація помилок на стороні сервера: Переконайтеся, що ви реєструєте помилки, які виникають у серверних компонентах, на сервері. Це може вимагати використання серверного фреймворку для логування або надсилання помилок до сервісу відстеження помилок.
Резервний UI на стороні клієнта: Навіть якщо серверні компоненти рендеряться на сервері, вам все одно потрібно надавати резервний UI на стороні клієнта на випадок помилок. Це забезпечує послідовний досвід користувача, навіть якщо сервер не зміг відрендерити компонент.
Стрімінговий SSR: При використанні стрімінгового рендерингу на стороні сервера (SSR) помилки можуть виникати під час процесу стрімінгу. Межі помилок можуть допомогти вам коректно обробити ці помилки, відрендеривши резервний UI для відповідного потоку.

Обробка помилок у серверних компонентах — це сфера, що розвивається, тому важливо бути в курсі останніх найкращих практик та рекомендацій.

Поширені помилки, яких слід уникати

Надмірна залежність від меж помилок: Не використовуйте межі помилок як заміну належній обробці помилок у ваших компонентах. Завжди намагайтеся писати надійний та стабільний код, який коректно обробляє помилки.
Ігнорування помилок: Переконайтеся, що ви реєструєте помилки, перехоплені межами помилок, щоб ви могли відстежити першопричину проблем. Не просто відображайте резервний UI та ігноруйте помилку.
Використання меж помилок для помилок валідації: Межі помилок не є правильним інструментом для обробки помилок валідації. Замість цього використовуйте більш специфічні техніки валідації.
Не тестування меж помилок: Тестуйте ваші межі помилок, щоб переконатися, що вони працюють правильно.

Висновок

Межі помилок — це потужний інструмент для створення надійних та стабільних застосунків на React. Розуміючи, як ефективно реалізовувати та використовувати межі помилок, ви можете покращити досвід користувача, запобігти збоям застосунку та спростити налагодження. Не забувайте стратегічно розміщувати межі помилок, надавати інформативний резервний UI, реєструвати помилки та ретельно тестувати ваші межі помилок.

Дотримуючись рекомендацій та найкращих практик, викладених у цьому посібнику, ви можете забезпечити стійкість ваших застосунків на React до помилок та надати позитивний досвід для ваших користувачів.