react-hot-loader + error boundaries: how to clear error after hot update?

Question

Here's my error boundary:

export default class ErrorBoundary extends React.Component<Props> {

    state: State = {error: null, errorInfo: null};

    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        this.setState({
            error: error,
            errorInfo: errorInfo
        })
    }

    render() {
        if (this.state.errorInfo) {
            return (
                <ErrorContainer>
                    <Title>Runtime Error</Title>
                    <ErrorMessage>{String(this.state.error)}</ErrorMessage>
                </ErrorContainer>
            );
        }

        return this.props.children;
    }
}

When my app crashes, it looks like this:

The problem is when I fix that error, the message never goes away.

It's pretty easy to see why: I've copied the error into the state. The state is never cleared during a hot reload.

My question is: how can I clear the error state when there's a hot-reload?

Ideally, it'd only clear the state when a child/descendent is reloaded, but that might be too difficult to determine, so I'd settle for it clearing whenever any component reloads. Likely it will just catch again if the error wasn't fixed.

---

Hot reloading is configured using the recommended approach:

const App = () => (
    <ErrorBoundary>
        <BrowserRouter>
            <ScrollTop>
                <Container>
                    /* blah blah */

                    <TabContent>
                        <ErrorBoundary>
                            /* blah */
                        </ErrorBoundary>
                    </TabContent>
                </Container>
            </ScrollTop>
        </BrowserRouter>
    </ErrorBoundary>

)

export default hot(module)(App)