[React] Handle React Suspense Errors with an Error Boundary

// 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