Provide a way to throw error (maybe asynchronous) that can be handled by componentDidCatch

Do you want to request a feature or report a bug? Feature request.

What is the current behavior? componentDidCatch can only handle synchronous error.

What is the expected behavior? The capability of error boundaries to handle asynchronous error.

The error boundaries example in the docs is very similar with how an asynchronous error is handled in React.

class WithAsyncData extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, value: null };
  }

  // using componentDidMount instead of componentDidCatch
  componentDidMount() {
    doAsynchronousThing()
      .then(value => this.setState({ value }))
      .catch(error => this.setState({ error }))
  }

  render() {
    if (this.state.error) {
      return <h1>An error occured.</h1>;
    }
    return this.props.children;
  }
}

Unfortunately, the new componentDidCatch lifecycle only aware of synchronous error. I think, it will be good to provide a way to throw an error asynchronously, like:

class WithAsyncData extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, value: null };
  }

  componentDidMount() {
    doAsynchronousThing()
      .then(value => this.setState({ value }))
      .catch(error => this.throwError(error)) // throwing error asynchronously
  }

  render() {
    if (this.state.error) {
      return <h1>An error occured.</h1>;
    }
    return this.props.children;
  }
}

With that, a network error can be handled in single place with a NetworkErrorBoundary component for example.

[gaearon]

I think

this.setState(() => { throw err })

might do what you’re looking for

[f-ricci]

@wise-introvert @LinusU

I have found this solution in another issue on this repository but unfortunately cannot remember the author. I’m sorry for that, all credits belong to the original author.

import { useState, useCallback } from 'react'

export function useCrash() {
  const [, setState] = useState()
  return useCallback(
    (err) =>
      setState(() => {
        throw err
      }),
    [],
  )
}