[React] Handle React Suspense Errors with an Error Boundary

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