score:31

Accepted answer

You can't catch compile-time errors, the Error Boundaries are for run-time errors within the UI.

Refer to Compile time vs run time errors.

Moreover, you have to use getDerivedStateFromError in order to add additional render on fall back UI:

class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
    error: { message: '', stack: '' },
    info: { componentStack: '' }
  };

  static getDerivedStateFromError = error => {
    return { hasError: true };
  };

  componentDidCatch = (error, info) => {
    this.setState({ error, info });
  };

  render() {
    const { hasError, error, info } = this.state;
    const { children } = this.props;

    return hasError ? <ErrorComponent/> : children;
  }
}

For checking your ErrorBoundary, throw an error from a reachable section in the component tree which is not:

  • Event handlers
  • Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
  • Server side rendering
  • Errors thrown in the error boundary itself (rather than its children)
const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

Note: In development env you will always see the error overlay unless you turn it off or close it with the X button.


Full example:

const ErrorComponent = () => {
  return <h1>Something went wrong</h1>;
};

class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
    error: { message: "", stack: "" },
    info: { componentStack: "" }
  };

  static getDerivedStateFromError = error => {
    return { hasError: true };
  };

  componentDidCatch = (error, info) => {
    this.setState({ error, info });
  };

  render() {
    const { hasError, error, info } = this.state;
    console.log(error, info);
    const { children } = this.props;

    return hasError ? <ErrorComponent /> : children;
  }
}

const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <ButtonComponent />
    </ErrorBoundary>
  );
};

Edit Error-Boundary Example

score:1

The thing is: the nice fallback UI you can see in the React docs example only appears in production. So you have to run the suggested by create-react-app (id you use it) command:

npm run build
# wait for it to finish
serve -s build

Then open localhost:5000 in your browser (if you see this address in the terminal mentioned). This way the React docs example works fine.


Related Query

More Query from same tag