For bunpkg, I use a Wizard component to display a series of steps to generate UNPKG links.

When a request to Web API fails, an error is caught with an Error Boundary component and display an error message in ErrorBoundary.FallbackComponent (from react-error-boundary
, a simple but better implementation found on React documentation).

But the error boundary wasn't reset when a user moved onto a different step in the wizard.

I would like to share my failed attempt and the proper workaround to reset Error Boundary components.

But this can apply to your custom ErrorBoundary component.

😪 TL;DR

Update Error Boundary key props to let React reset the error state.

ℹ About Demo

The following demo has a component that randomly throws an error and the error boundary shows the error message caught.

Credit: the demo program is created by Brian Vaugn on CodeSandBox.

Error Boundary Reset Demo

🙅‍♂️ First attempt (bad workaround)

react-error-boundary provides only following props (leaving out children) and no way to clear the error caught.

• FallbackComponent -  A component to display in case of error
• onError - A callback triggered on error

Following is how ErrorBoundary.render is implemented.

https://gist.github.com/dance2die/b2af474fc9b7398b0f5f33f8ae35dfb2

FallbackComponent is displayed if an error exists.

So my first attempt was to create a reference (this.errorBoundary) and directly manipulate it as it is a 3rd party component.

Yes, stupid of me to even attempt to directly manipulate the state even without using setState...

https://gist.github.com/dance2die/602254e2f6389e2a9f06f6c7d4185334

🙆 Proper Workaround

I knew that the workaround was just so hacky that I created a request ticket on react-error-boundary GitHub repository,  requesting to provide a way/prop to clear the error.

And Brian has replied with a proper React-way of resetting error boundary - provide a key to an instance of ErrorBoundary component to reset the instant.error in the next render phase.

View this gist on GitHub

https://gist.github.com/dance2die/ebff548c1c4253f5c14349b3d6004a72

You can see that as you click on reset error boundary button, it updates the key on ErrorBoundary component (
<ErrorBoundary key={this.state.errorBoundaryKey}>) using handleResetButtonClick method, which will clear the internal error state by increasing errorBoundaryKey by one every time forcing a re-render.

😞 Failures

I was just too obsessed with "making things work" and overused Refs (even though ReactJS clearly recommends you not to).

Second of all, I didn't even consider using setState but directly manipulated the error state (this.errorBoundary.current.state.error = null).

👋 Parting Words

Many thanks to Brian for react-error-boundary, helping me realize the mistake and providing the workaround.

I hope the post help you should you run into the situation where an error boundary need to be reset & not go through the same bad practice/failures I mentioned above.

Lastly,  Bunpkg uses the workaround suggested.