How to use react-error-boundary properly in react?

Question

I have implemented one example of the react-error-boundary npm library. But it didn't seem to work properly.

import * as React from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: 'red' }}>{error.message}</pre>
    </div>
  );
}

function Greeting({ subject }) {
  return <div>Hello {subject.toUpperCase()}</div>;
}

function Farewell({ subject }) {
  return <div>Goodbye {subject.toUpperCase()}</div>;
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Greeting />
      <Farewell />
    </ErrorBoundary>
  );
}

export default App;

The error message is shown below:

It seems that the ErrorFallback component is not rendering. I think I am doing something wrong which breaks the code.

Answer 1

This is the intended behaviour of error boundary during development. Press the close (X) button at the top right to hide the error stack and you will see the Error Boundary Fallback

In production the error stack will not be shown and users will only see the Error Boundary Fallback.