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

[Все темы React Developer](/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. [Обрабатываем ошибки в React](https://medium.com/nuances-of-programming/%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC-%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B8-%D0%B2-react-%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-17a520b83ea9)
   :::

---

## <strong>Как обрабатывать ошибки при использовании хуков (</strong><code>hooks</code><strong>) в React?</strong> [#q-14bee738d69b817587a0fb5be5a399e2]

Для обработки ошибок при использовании хуков в React можно использовать блоки <code>try&#46;&#46;&#46;catch</code> внутри эффектов или пользовательских хуков.

#### Основные способы&#58;

{/* prettier-ignore */}
1. <strong>Обработка ошибок в</strong> <code>useEffect</code>&#58;

    - Используйте блок <code>try&#46;&#46;&#46;catch</code> внутри эффекта.

    ```jsx
    import React, { useEffect, useState } from 'react';

    const MyComponent = () => {
      const [data, setData] = useState(null);
      const [error, setError] = useState(null);

      useEffect(() => {
        const fetchData = async () => {
          try {
            const response = await fetch('https://api.example.com/data');
            const result = await response.json();
            setData(result);
          } catch (err) {
            setError(err);
          }
        };

        fetchData();
      }, []);

      if (error) {
        return <div>Error: {error.message}</div>;
      }

      return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
    };

    export default MyComponent;
    ```

1. <strong>Обработка ошибок в пользовательских хуках</strong>&#58;

    - Создайте пользовательский хук, который включает обработку ошибок.

    ```javascript
    import { useState, useEffect } from 'react';

    const useFetch = (url) => {
      const [data, setData] = useState(null);
      const [error, setError] = useState(null);

      useEffect(() => {
        const fetchData = async () => {
          try {
            const response = await fetch(url);
            const result = await response.json();
            setData(result);
          } catch (err) {
            setError(err);
          }
        };

        fetchData();
      }, [url]);

      return { data, error };
    };

    export default useFetch;
    ```

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

    - Error Boundary перехватывает ошибки рендера дочерних компонентов. Ошибки обработчиков событий и отклонения обычных асинхронных запросов обрабатывайте отдельно через try/catch или catch; само наличие хуков не делает их защищёнными.

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

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

    export default App;
    ```

Для обработки ошибок при использовании хуков в React применяйте блоки <code>try&#46;&#46;&#46;catch</code> внутри эффектов и пользовательских хуков, а также используйте Error Boundary для защиты компонентов от неожиданных ошибок.

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

1. [Обрабатываем ошибки в React](https://medium.com/nuances-of-programming/%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC-%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B8-%D0%B2-react-%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-17a520b83ea9)
   :::