16 серпня 2025 р.Українська

Опануйте React Suspense та Error Boundaries для надійного керування завантаженням та помилками. Створюйте стійкі та зручні для користувача додатки.

React Suspense та Error Boundaries: Розширена обробка завантаження та помилок

React Suspense та Error Boundaries — це потужні функції, які дозволяють розробникам створювати більш стійкі та зручні для користувача додатки. Вони надають декларативний спосіб обробки станів завантаження та несподіваних помилок, покращуючи загальний досвід користувача та спрощуючи процес розробки. Ця стаття є вичерпним посібником з ефективного використання React Suspense та Error Boundaries, що охоплює все, від базових концепцій до передових технік.

Розуміння React Suspense

React Suspense — це механізм для «призупинення» рендерингу компонента доти, доки не буде виконана певна умова, зазвичай — доступність даних від асинхронної операції. Це дозволяє вам відображати запасний інтерфейс (fallback UI), наприклад, індикатори завантаження, поки ви чекаєте на дані. Suspense спрощує керування станами завантаження, усуваючи необхідність у ручному умовному рендерингу та покращуючи читабельність коду.

Ключові концепції Suspense

Межі Suspense (Suspense Boundaries): Це компоненти React, які обгортають компоненти, що можуть призупинятися. Вони визначають запасний UI для відображення, поки обгорнуті компоненти призупинені.
Запасний UI (Fallback UI): Інтерфейс, який відображається, поки компонент призупинений. Зазвичай це індикатор завантаження або плейсхолдер.
Асинхронне отримання даних: Suspense бездоганно працює з бібліотеками для асинхронного отримання даних, такими як `fetch`, `axios` або власними рішеннями.
Розділення коду (Code Splitting): Suspense також можна використовувати для відкладання завантаження модулів коду, що дозволяє реалізувати розділення коду та покращити продуктивність початкового завантаження сторінки.

Базова реалізація Suspense

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


import React, { Suspense } from 'react';

// Симуляція отримання даних (наприклад, з API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Створення ресурсу, який може використовувати Suspense
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Компонент, який читає дані з ресурсу
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Ім'я: {data.name}
      Вік: {data.age}
    
  );
};

const App = () => {
  return (
    Завантаження даних користувача...

}>
      
    
  );
};

export default App;

У цьому прикладі:

`fetchData` симулює асинхронну операцію отримання даних.
`createResource` створює ресурс, який Suspense може використовувати для відстеження стану завантаження даних.
`UserProfile` читає дані з ресурсу за допомогою методу `read`. Якщо дані ще недоступні, він кидає проміс, що призупиняє компонент.
Компонент `Suspense` обгортає `UserProfile` і надає проп `fallback`, який вказує, який UI відображати, поки компонент призупинений.

Suspense з розділенням коду

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


import React, { Suspense, lazy } from 'react';

// Ліниве завантаження компонента MyComponent
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Завантаження компонента...}>
      
    
  );
};

export default App;

У цьому прикладі:

`React.lazy` використовується для лінивого завантаження компонента `MyComponent`.
Компонент `Suspense` обгортає `MyComponent` і надає проп `fallback`, який вказує, який UI відображати під час завантаження компонента.

Розуміння Error Boundaries

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

Ключові концепції Error Boundaries

Перехоплення помилок: Error Boundaries перехоплюють помилки під час рендерингу, у методах життєвого циклу та в конструкторах усього дерева компонентів під ними.
Запасний UI: Інтерфейс, який відображається у разі виникнення помилки. Зазвичай це повідомлення про помилку або плейсхолдер.
Логування помилок: Error Boundaries дозволяють логувати помилки в сервіс або консоль для цілей налагодження.
Ізоляція дерева компонентів: Error Boundaries ізолюють помилки в певних частинах дерева компонентів, запобігаючи збою всього додатка.

Базова реалізація Error Boundaries

Ось простий приклад створення Error Boundary:


import React, { Component } from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    // Ви також можете логувати помилку в сервіс звітування про помилки
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Ви можете відрендерити будь-який власний запасний UI
      return Щось пішло не так.;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

У цьому прикладі:

Компонент `ErrorBoundary` визначає методи `getDerivedStateFromError` та `componentDidCatch`.
`getDerivedStateFromError` викликається, коли в дочірньому компоненті виникає помилка. Він оновлює стан, щоб вказати, що сталася помилка.
`componentDidCatch` викликається після того, як помилка була перехоплена. Він дозволяє вам залогувати помилку в сервіс або консоль.
Метод `render` перевіряє стан `hasError` і відображає запасний UI, якщо сталася помилка.

Використання Error Boundaries

Щоб використовувати компонент `ErrorBoundary`, просто обгорніть ним компоненти, які ви хочете захистити:


import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // Симуляція помилки
  throw new Error('Сталася помилка!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

У цьому прикладі, якщо в `MyComponent` виникне помилка, компонент `ErrorBoundary` перехопить її та відобразить запасний UI.

Поєднання Suspense та Error Boundaries

Suspense та Error Boundaries можна поєднувати для створення надійної та комплексної стратегії обробки помилок для асинхронних операцій. Обгортаючи компоненти, які можуть призупинятися, одночасно Suspense та Error Boundaries, ви можете витончено обробляти як стани завантаження, так і несподівані помилки.

Приклад поєднання Suspense та Error Boundaries


import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Симуляція отримання даних (наприклад, з API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Симуляція успішного отримання даних
      // resolve({ name: 'John Doe', age: 30 });

      // Симуляція помилки під час отримання даних
      reject(new Error('Не вдалося завантажити дані користувача'));

    }, 2000);
  });
};

// Створення ресурсу, який може використовувати Suspense
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Компонент, який читає дані з ресурсу
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Ім'я: {data.name}
      Вік: {data.age}
    
  );
};

const App = () => {
  return (
    
      Завантаження даних користувача...}>
        
      
    
  );
};

export default App;

У цьому прикладі:

Компонент `ErrorBoundary` обгортає компонент `Suspense`.
Компонент `Suspense` обгортає компонент `UserProfile`.
Якщо функція `fetchData` відхиляє проміс з помилкою, компонент `Suspense` перехопить відхилення промісу, а `ErrorBoundary` перехопить помилку, кинуту Suspense.
Тоді `ErrorBoundary` відобразить запасний UI.
Якщо дані завантажуються успішно, компонент `Suspense` відобразить компонент `UserProfile`.

Передові техніки та найкращі практики

Оптимізація продуктивності Suspense

Використовуйте мемоізацію: Мемоізуйте компоненти, які рендеряться в межах Suspense, щоб запобігти непотрібним повторним рендерам.
Уникайте глибоких дерев Suspense: Зберігайте дерево Suspense неглибоким, щоб мінімізувати вплив на продуктивність рендерингу.
Попередньо завантажуйте дані: Завантажуйте дані заздалегідь, щоб зменшити ймовірність призупинення.

Кастомні Error Boundaries

Ви можете створювати власні Error Boundaries для обробки конкретних типів помилок або для надання більш інформативних повідомлень про помилки. Наприклад, ви можете створити Error Boundary, який відображає різний запасний UI залежно від типу помилки, що сталася.

Серверний рендеринг (SSR) із Suspense

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

Обробка різних сценаріїв помилок

Розгляньте ці різні сценарії помилок і способи їх обробки:

Мережеві помилки: Витончено обробляйте мережеві помилки, відображаючи інформативне повідомлення для користувача.
Помилки API: Обробляйте помилки API, відображаючи повідомлення про помилку, специфічне для помилки, що сталася.
Несподівані помилки: Обробляйте несподівані помилки, логуючи помилку та відображаючи загальне повідомлення про помилку для користувача.

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

Впровадьте глобальний механізм обробки помилок для перехоплення помилок, які не були перехоплені Error Boundaries. Це можна зробити за допомогою глобального обробника помилок або обгортаючи весь додаток в Error Boundary.

Приклади з реального світу та випадки використання

Додаток для електронної комерції

У додатку для електронної комерції Suspense можна використовувати для відображення індикаторів завантаження під час отримання даних про товари, а Error Boundaries — для обробки помилок, що виникають під час оформлення замовлення. Наприклад, уявіть собі користувача з Японії, який переглядає інтернет-магазин, розташований у Сполучених Штатах. Завантаження зображень та описів товарів може зайняти деякий час. Suspense може відображати просту анімацію завантаження, поки ці дані отримуються з сервера, що, можливо, знаходиться на іншому кінці світу. Якщо платіжний шлюз виходить з ладу через тимчасову проблему з мережею (що часто трапляється в різних інтернет-інфраструктурах по всьому світу), Error Boundary може відобразити зручне для користувача повідомлення з проханням спробувати ще раз пізніше.

Платформа соціальних мереж

На платформі соціальних мереж Suspense можна використовувати для відображення індикаторів завантаження під час отримання профілів користувачів та дописів, а Error Boundaries — для обробки помилок, що виникають під час завантаження зображень або відео. Користувач, що переглядає з Індії, може зіткнутися з повільнішим завантаженням медіа, розміщеного на серверах у Європі. Suspense може показувати плейсхолдер до повного завантаження контенту. Якщо дані профілю певного користувача пошкоджені (рідко, але можливо), Error Boundary може запобігти збою всієї стрічки соціальної мережі, відобразивши замість цього просте повідомлення про помилку, наприклад, «Неможливо завантажити профіль користувача».

Дашборд-додаток

У дашборд-додатку Suspense можна використовувати для відображення індикаторів завантаження під час отримання даних з кількох джерел, а Error Boundaries — для обробки помилок, що виникають під час завантаження діаграм або графіків. Фінансовий аналітик у Лондоні, який отримує доступ до глобального інвестиційного дашборду, може завантажувати дані з кількох бірж по всьому світу. Suspense може надавати індикатори завантаження для кожного джерела даних. Якщо API однієї з бірж не працює, Error Boundary може відобразити повідомлення про помилку спеціально для даних цієї біржі, запобігаючи тому, щоб весь дашборд став непридатним для використання.

Висновок

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

Оскільки React продовжує розвиватися, Suspense та Error Boundaries, ймовірно, відіграватимуть все більш важливу роль у створенні сучасних веб-додатків. Опанувавши ці функції, ви зможете залишатися на крок попереду та забезпечувати винятковий досвід для користувачів.