[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

 

One important thing to note is that our error boundary can only handle certain errors, specifically errors that are happening within the React call stack.

It won't handle errors that are happening in event handlers or if there's an error in an asynchronous callback, like a promise handler. It will only handle errors that happen within a React call stack, like the render method or a React useEffect callback.

 

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