Error Boundaries are the way you handle errors with React, and Suspense embraces this completely. Let's take a look at how to handle asynchronous errors with Suspense and Error Boundaries.
In previous post, we used React.Suspense with fallback (for loading..), in this post, we will see how to handle error case with ErrorBoundary. https://reactjs.org/docs/error-boundaries.html
NPM module: https://npm.im/react-error-boundary
An ErrorBoundary component:
// utils.js class ErrorBoundary extends React.Component { state = {error: null} static getDerivedStateFromError(error) { return {error} } componentDidCatch() { // log the error to the server } tryAgain = () => this.setState({error: null}) render() { return this.state.error ? ( <div> There was an error. <button onClick={this.tryAgain}>try again</button> <pre style={{whiteSpace: 'normal'}}>{this.state.error.message}</pre> </div> ) : ( this.props.children ) } }
---
import React from 'react' import fetchPokemon from '../fetch-pokemon' import {PokemonDataView, ErrorBoundary} from '../utils' let pokemon let pokemonError let pokemonPromise = fetchPokemon('pikachue').then( p => { console.log('promise resolve') pokemon = p }, e => { pokemonError = e }, ) function PokemonInfo() { console.log('PokemonInfo init') if (pokemonError) { throw pokemonError } if (!pokemon) { throw pokemonPromise // this API might change } return ( <div> <div className="pokemon-info__img-wrapper"> <img src={pokemon.image} alt={pokemon.name} /> </div> <PokemonDataView pokemon={pokemon} /> </div> ) } function App() { return ( <div className="pokemon-info"> <ErrorBoundary> <React.Suspense fallback={ console.log('loading pokemon...') && <div>Loading pokemon...</div> } > <PokemonInfo /> </React.Suspense> </ErrorBoundary> </div> ) } export default App