How to handle errors in ReactJS


Graceful error handling is an essential element of well designed software. This is true of front-end JavaScript user interfaces, and ReactJS provides specialized error handling for dealing with render-time errors. This article offers an overview for dealing with errors in ReactJS applications.

[ ]

We can divide errors broadly into two types, and error handling into two aspects.

The two error types:

  1. JavaScript errors
  2. Render errors

JavaScript errors are those which occur in the code and can be handled with standard try/catch blocks, while render errors occur in the view templates and are handled by React error boundaries.

The two aspects of error handling:

  1. Displaying information to the user
  2. Providing information to the developer

In general, you want to show only the minimum amount of error information to users, and you want to reveal the maximum amount of information to developers, both at development time and at other times like test and production.

(derived from the example found in the ). You might also find it useful to check out of error boundaries in React 16.

Copyright © 2021 IDG Communications, Inc.