Оволодіння Error Boundaries в React

Створення додатків на React може бути складним, особливо коли виникають несподівані помилки. Без належного оброблення ці помилки можуть зламати ваш UI і залишити користувачів, які дивляться на розчаровуючий білий екран. Але не переживайте — Error Boundaries в React можуть виручити, перехоплюючи помилки і граційно відображаючи контент за замовчуванням. Давайте детально розглянемо, як вони працюють, їх обмеження та як ефективно їх використовувати.

Що таке Error Boundary?

Подумайте про Error Boundary як про страховку. Коли виникає помилка в компоненті React, цей інструмент забезпечує, щоб ваш додаток не зламався повністю. Замість того, щоб показувати зламаний UI або порожній екран, він відображає користувацький UI за замовчуванням, забезпечуючи більш плавний досвід для ваших користувачів.

Чому нам потрібні Error Boundaries?

До того, як React представив Error Boundaries (в React 16), помилки в компонентах могли поширюватися по додатку, що призводило до поломки всього UI. Це викликало:

• Поганий досвід користувача.
• Порожні або неактивні сторінки.

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

Як працюють Error Boundaries?

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

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

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

 componentDidCatch(error, info) {  
 console.error("Виникла помилка:", error, info); // Логування деталей помилки.  
 }  

 render() {  
 if (this.state.hasError) {  
 return this.props.fallback || 
Щось пішло не так.
;    }    return this.props.children; // Рендеримо дочірні компоненти, якщо немає помилки.    }   } ```  Обгорніть ваші компоненти таким чином:  ``` Oops! Щось пішло не так.}>        ```  ## Що не можуть робити Error Boundaries  Хоча вони потужні, Error Boundaries мають деякі обмеження:  1. Вони **не можуть перехоплювати помилки** у:  - Обробниках подій (для цього вам потрібно використовувати блок `try-catch`). - Асинхронному коді (наприклад, API-запитах або `setTimeout`). - Рендерингу на сервері. - Помилки в самій Error Boundary.  2. Вони працюють тільки з **класовими компонентами**, а не з функціональними.  ## Кращі Error Boundaries: `react-error-boundary`  Щоб подолати ці обмеження, була створена бібліотека `react-error-boundary`. Вона покращує традиційні Error Boundaries з додатковими функціями, такими як:  - Сумісність з функціональними компонентами. - Спрощене оброблення помилок для подій та асинхронного коду. - Більша гнучкість у відображенні UI за замовчуванням.  Ось як почати:  ``` npm install react-error-boundary ```  Обгорніть ваші компоненти за допомогою бібліотеки:  ``` import { ErrorBoundary } from "react-error-boundary";      const App = () => (    Щось пішло не так!}>           ); ```  ## Розширене використання `react-error-boundary`  **1. Показати детальні повідомлення про помилки**   Хочете показати конкретні деталі помилки в UI за замовчуванням? Використовуйте власний компонент для UI за замовчуванням:  ``` import { ErrorBoundary } from "react-error-boundary";      function FallbackUI({ error }) {    return (    
Упс, сталася помилка:
{error.message}
    );   }      const App = () => (               ); ```  **2.
**Логування помилок**  
Ви можете логувати помилки в зовнішній сервіс, використовуючи зворотний виклик `onError`:

import { ErrorBoundary } from "react-error-boundary";

function logErrorToService(error, info) {
console.error("Логування помилки:", error, info);
}

const App = () => (

);
```

3. Обробка помилок в обробниках подій або асинхронному коді
Для обробників подій і асинхронних помилок ви можете використовувати хук useErrorBoundary:

import { useErrorBoundary } from "react-error-boundary";  

function MyComponent() {  
 const { showBoundary } = useErrorBoundary();  

 async function fetchData() {  
 try {  
 const response = await fetch("/api/data");  
 // Обробка відповіді...  
 } catch (error) {  
 showBoundary(error); // Активуємо обробку помилки.  
 }  
 }  

 React.useEffect(() => {  
 fetchData();  
 }, []);  

 return 
Дані завантажуються...
;   } ```  ## Ключові моменти  - **ErrorBoundary працює тільки на стороні клієнта.** Використовуйте його з пропсами, які можна серіалізувати (перетворити в JSON). - Для сучасних додатків React, що використовують функціональні компоненти, бібліотека `react-error-boundary` є кращим вибором.  ## Висновок  Error Boundaries забезпечують функціональність вашого додатку навіть тоді, коли виникають несподівані помилки. Чи використовуєте ви вбудовану функцію, чи розширюєте її за допомогою `react-error-boundary`, освоєння обробки помилок є необхідним для створення надійних додатків на React.  Для детальнішої інформації ознайомтесь з **офіційною документацією React** або бібліотекою `react-error-boundary`[посилання](https://github.com/bvaughn/react-error-boundary).  Щасливого кодування! 🚀



Перекладено з: [Mastering Error Boundaries in React](https://medium.com/@jeslurrahman/mastering-error-boundaries-in-react-d6d61a89ce33)