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.

Jonathan Irwin · Accepted Answer · 2020-12-09 09:39:47Z

4

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.

edited Dec 9, 2020 at 9:39

answered Dec 8, 2020 at 7:33

Jonathan Irwin

5,8672 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Subrato Pattanaik Over a year ago

This is the intended behavior of error boundary during the development and during production, the error message will display instead of the completely white screen. When we hit the X close button the actual fallback error message is displayed.

Jonathan Irwin Over a year ago

Thanks - your comment was written more clearly than my answer was. I have updated my answer to match.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related