Use ErrorBoundary together with asynchronous lifecycle-functions

Question

I want to build a React-component which loads the data asynchronously on componentDidMount.

This is what the function currently looks like (written in TypeScript):

async componentDidMount(): Promise<void> {
    try {
        const { props: { teamId }, state: { } } = this;
        const awaitableData = await UrlHelper.getDataAsync("some-fancy-url");

        // ... do something with awaitableData
    } catch(e) {
        console.log("Some error occured");
        throw e;
    }
}

The render-function returns the markup wrapped in a ErrorBoundary component, which has componentDidCatch implemented. However, this is never called/triggered when the awaited call is rejected and I end up in the catch-block.

What am I missing here?

Answer 1

async function is syntactic sugar for a regular function that returns a promise. An error in async function results in rejected promise. Even if rejected promise isn't handled anywhere and results in Uncaught (in promise) error, it is not caught by error boundaries.

As the reference states,

Error boundaries do not catch errors for: <...> Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)

A solution is to change component state on error and handle it on next render. render is the place where error can be re-thrown synchronously.

An example:

  state = { error: null };

  async componentDidMount() {
    try {
      await new Promise(resolve => setTimeout(resolve, 2000));
      throw new Error('Foo error');
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      throw this.state.error;
    }

    return (
      <p>Foo</p>
    );
  }