javascript error handling

In the ReactJS, javascript error handling is not an easy job. There is not a consistent way to handle the error in ReactJs. Right now in React 15 or in the past the JavaScript errors inside the component corrupt the internal state and break the whole UI of the application, Means in React 15 or past, every time on getting errors to unmount the whole application.

To overcome the issue of error handling, React 16 introduced a new feature called Error Boundaries.

Javascript error handling feature: Error boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree.

So instead of unmounting the whole application, we can replace the part of UI where we got an error with some other fallback UI with proper error messages.

Again one more important feature of error boundaries is in your production app you can report errors to reporting services. If you catch errors with error boundaries, you can report them with more contextual information which will help to you find and fix issues quicker.

Only class components can be error boundary if it defines a new lifecycle method called componentDidCatch(error, info). We can not make the error boundary to functional components.

 

How to create Error boundary component for javascript error handling?

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  //This is the lifecycle method of ReactJS which wil called if there will be any js error in child component. It won't called if the error is inside the same components, In our case lets say in ErrorBoundary.
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

 

How to use Error boundary component for javascript error handling?

<ErrorBoundary>
  <UsersList />
</ErrorBoundary>

 

The componentDidCatch() method works like a JavaScript catch {} block, but for components. Only class components can be error boundaries. Note that error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself. If an error boundary fails to try to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.

 

Looking for ReactJS Development Company, hire our dedicated developers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.