import React, { Suspense } from 'react';

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

function App() {
 return (
 Loading...

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

• React.lazy се използва за мързеливо зареждане на MyComponent.
• Suspense обвива LazyComponent.
• Пропът fallback предоставя резервен потребителски интерфейс (индикатор за зареждане), който се показва, докато MyComponent се зарежда.

Имплементиране на Error Boundaries

Докато Suspense обработва състояния на зареждане, Error Boundaries са React компоненти, които прихващат JavaScript грешки навсякъде в своето дърво от дочерни компоненти, регистрират тези грешки и показват резервен потребителски интерфейс, вместо да сриват цялото дърво от компоненти.

Как работят Error Boundaries

Error Boundaries са класови компоненти, които дефинират следните методи на жизнения цикъл:

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

Важно: Error Boundaries прихващат грешки само в компонентите под тях в дървото. Един Error Boundary не може да прихване грешка в себе си.

Пример: Основна имплементация на Error Boundary

            
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
              
            
          

За да използвате Error Boundary, обвийте всеки компонент, който може да изхвърли грешка:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Интегриране на Suspense и Error Boundaries

Истинската мощ идва от комбинирането на Suspense и Error Boundaries. Това ви позволява да обработвате както състояния на зареждане, така и грешки грациозно във вашето приложение. Препоръчителната практика е да обвиете Suspense с Error Boundary. По този начин, ако мързеливо зареденият компонент не успее да се зареди (напр. мрежова грешка), Error Boundary може да прихване грешката и да покаже полезно съобщение на потребителя.

Пример: Комбиниране на Suspense и Error Boundaries

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

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

function App() {
 return (
 
 Loading...