---
title: Ошибки в React
seo:
  description: >-
    Тема «Ошибки в React» для собеседования React Developer. Как обрабатывать
    ошибки в React-приложении с помощью Error Boundary? Как обрабатывать ошибки
    при использовании хуков (hooks) в React?
  title: Ошибки в React — React Developer
---

[Все темы React Developer](/prep/react-developer)

## <strong>Как обрабатывать ошибки в React-приложении с помощью</strong> <code>Error Boundary</code><strong>?</strong> [#q-14bee738d69b8112aaeacd256ae9cad3]

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

#### Основные шаги&#58;

{/* prettier-ignore */}
1. <strong>Создание Error Boundary</strong>&#58;

    - Создайте классовый компонент с методами <code>componentDidCatch</code> и <code>getDerivedStateFromError</code>.

    ```jsx
    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;
    ```

1. <strong>Использование Error Boundary</strong>&#58;

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

    ```jsx
    import React from 'react';
    import ErrorBoundary from './ErrorBoundary';
    import MyComponent from './MyComponent';

    const App = () => (
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    );

    export default App;
    ```

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

:::note[Ссылки для изучения]

1. [Граница ошибок: запасной интерфейс и регистрация ошибки](https://reactdev.ru/reference/react/Component/)
   :::

---

## Как обрабатывать ошибки в React-коде с хуками? [#q-14bee738d69b817587a0fb5be5a399e2]

<span id="q-14bee738d69b81f1b46fe9ef80405166"></span>

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

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

[Ограничения Error Boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) описаны в документации React.

:::note[Ссылки для изучения]

1. [Error Boundaries в React: препарируем лягушку](https://habr.com/ru/companies/2gis/articles/583894/)
1. [Нужен ли здесь useEffect? Раздел «Загрузка серверных данных»](https://habr.com/ru/articles/1055486/)
   :::