import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

В этом примере:

• React.lazy используется для ленивой загрузки MyComponent.
• Suspense оборачивает LazyComponent.
• Свойство fallback предоставляет резервный пользовательский интерфейс (индикатор загрузки), который отображается во время загрузки MyComponent.

Реализация границ ошибок

В то время как Suspense обрабатывает состояния загрузки, Границы ошибок — это компоненты React, которые перехватывают ошибки JavaScript в любом месте дерева дочерних компонентов, регистрируют эти ошибки и отображают резервный пользовательский интерфейс вместо сбоя всего дерева компонентов.

Как работают границы ошибок

Границы ошибок — это классовые компоненты, которые определяют следующие методы жизненного цикла:

• static getDerivedStateFromError(error): Этот метод вызывается после того, как дочерний компонент выбросил ошибку. Он получает ошибку, которая была выброшена, в качестве аргумента и должен возвращать значение для обновления состояния.
• componentDidCatch(error, info): Этот метод вызывается после того, как дочерний компонент выбросил ошибку. Он получает ошибку и информационный объект, содержащий информацию о том, какой компонент выбросил ошибку. Это идеальное место для регистрации ошибки в такой службе, как Sentry или Bugsnag.

Важно: Границы ошибок перехватывают ошибки только в компонентах, расположенных ниже их в дереве. Граница ошибок не может перехватить ошибку внутри себя.

Пример: Базовая реализация границы ошибок

            
import React, { Component } from 'react';

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

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Чтобы использовать границу ошибок, оберните любой компонент, который может выбросить ошибку:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Интеграция Suspense и границ ошибок

Истинная сила заключается в объединении Suspense и границ ошибок. Это позволяет вам корректно обрабатывать как состояния загрузки, так и ошибки в вашем приложении. Рекомендуется оборачивать Suspense границей ошибок. Таким образом, если компонент, загружаемый с отложенной загрузкой, не сможет загрузиться (например, ошибка сети), граница ошибок может перехватить ошибку и отобразить полезное сообщение для пользователя.

Пример: Объединение Suspense и границ ошибок

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

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...