Example Error Boundary

[lstkz]

Description

React supports error handling out of the box since v16 using componentDidCatch. You can create your own Error Boundary and install it after hot has been applied:

Is it possible to provide an example Error Boundary?

I tried to create my own component using the official example with 'redbox-react', but the error is not gone after doing more changes. I keep the error in the state, and the error is never cleared.

Example component

import React from 'react';
import RedBox from 'redbox-react';

export class ErrorBoundary extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: error };
  }

  componentDidCatch(error: Error, info: any) {
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <RedBox error={this.state.hasError} />;
    }

    return this.props.children;
  }
}

How to clear the state if there are any changes?

Expected behavior

Flow should look like this:
edit code -> runtime error -> error boundary (red box) -> edit code again and fix error -> error boundary is hidden.

Actual behavior

edit code -> runtime error -> error boundary (red box) -> edit code again and fix error -> error boundary is still visible.

Environment

React Hot Loader version: 4.5.1

[theKashey]

:nods: It's not easy to catch "update" event and remove error overlay.
@neoziro - I think we have to make ErrorOverlay a part of AppContaner

[theKashey]

Never mind. AppContainer has a prop named errorReporter, you just can`t provide a settings for it :)

[lstkz]

@theKashey

Should I also use<AppContaner />? In readme, it's mentioned to use only hot(..). Here https://github.com/gaearon/react-hot-loader#migrating-from-v3

[theKashey]

In short:

• the feature you are asking for is supported
• you can't use it :)

We have to:

• create a way to specify settings to the AppContainer created inside hot
• probably add one more field to setConfig, as long as your settings should be applied application wide.

[theKashey]

4.6.0 gives you everything.
Check errorReporter and ErrorOverlay options of setConfig

[lstkz]

@theKashey thanks!

One small thing. I can see below error when there is any runtime error. Is it expected or it should be displayed only during hot updates?

[theKashey]

As long as it displays an error - yes.
That is the error it tries to show?

[theKashey]

Should work "right" with the last version.