import React, { Suspense } from 'react';

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

function App() {
 return (
 Loading...

In dit voorbeeld:

• React.lazy wordt gebruikt om MyComponent 'lazy' te laden.
• Suspense wikkelt LazyComponent in.
• De fallback-prop biedt een terugval-UI (een laadindicator) die wordt weergegeven terwijl MyComponent laadt.

Error Boundaries Implementeren

Terwijl Suspense laadstatussen afhandelt, zijn Error Boundaries React-componenten die JavaScript-fouten overal in hun onderliggende componentenboom opvangen, deze fouten loggen en een terugval-UI weergeven in plaats van de hele componentenboom te laten crashen.

Hoe Error Boundaries Werken

Error Boundaries zijn klassecomponenten die de volgende lifecycle-methoden definiëren:

• static getDerivedStateFromError(error): Deze methode wordt aangeroepen nadat een fout is opgetreden in een onderliggend component. Het ontvangt de opgetreden fout als argument en moet een waarde retourneren om de state bij te werken.
• componentDidCatch(error, info): Deze methode wordt aangeroepen nadat een fout is opgetreden in een onderliggend component. Het ontvangt de fout en een info-object met informatie over welk component de fout heeft veroorzaakt. Dit is de ideale plek om de fout te loggen naar een service zoals Sentry of Bugsnag.

Belangrijk: Error Boundaries vangen alleen fouten op in de componenten die zich onder hen in de boom bevinden. Een Error Boundary kan niet een fout binnen zichzelf opvangen.

Voorbeeld: Basisimplementatie van een 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
              
            
          

Om de Error Boundary te gebruiken, wikkelt u elk component in dat mogelijk een fout kan veroorzaken:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Suspense en Error Boundaries Integreren

De ware kracht komt van het combineren van Suspense en Error Boundaries. Dit stelt u in staat om zowel laadstatussen als fouten op een elegante manier binnen uw applicatie af te handelen. De aanbevolen praktijk is om Suspense in een Error Boundary te wikkelen. Op deze manier, als het component dat 'lazy' wordt geladen niet laadt (bijv. een netwerkfout), kan de Error Boundary de fout opvangen en een nuttige melding aan de gebruiker tonen.

Voorbeeld: Suspense en Error Boundaries Combineren

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

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

function App() {
 return (
 
 Loading...