Ошибки в React

Все темы React Developer

Как обрабатывать ошибки в React-приложении с помощью Error Boundary?

Error Boundary — это компонент, который отлавливает ошибки в дочерних компонентах и предотвращает их распространение на всю иерархию.

Основные шаги:

1. Создание Error Boundary:

   • Создайте классовый компонент с методами componentDidCatch и getDerivedStateFromError.

   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 caught by ErrorBoundary:", error, errorInfo);
     }
   
     render() {
       if (this.state.hasError) {
         // Рендер запасного UI при ошибке
         return <h1>Something went wrong.</h1>;
       }
   
       return this.props.children;
     }
   }
   
   export default ErrorBoundary;

2. Использование Error Boundary:

   • Оберните компоненты, которые могут вызвать ошибки, в Error Boundary.

   import React from 'react';
   import ErrorBoundary from './ErrorBoundary';
   import MyComponent from './MyComponent';
   
   const App = () => (
     <ErrorBoundary>
       <MyComponent />
     </ErrorBoundary>
   );
   
   export default App;

Error Boundary позволяет обрабатывать ошибки в React-приложении, предотвращая их распространение и предоставляя возможность отображения запасного UI, обеспечивая более стабильное приложение.

Как обрабатывать ошибки в React-коде с хуками?

Ошибки синхронного рендера дочернего дерева перехватывает Error Boundary. Он не перехватывает ошибки обработчиков событий и отклонённые промисы из обычного асинхронного кода.

В эффекте или пользовательском хуке оборачивайте сам await в try/catch, проверяйте response.ok и сохраняйте ошибку в состоянии либо передавайте её библиотеке запросов. Отменяйте запрос в cleanup, если компонент может размонтироваться или параметры запроса измениться. Ошибку из обработчика события обрабатывайте в этом же обработчике.

Ограничения Error Boundary описаны в документации React.