Rendering a fallback UI is a valuable upgrade to the user experience. However, when an error occurs, it’s important for developers (and those brave users who submit bug reports) to be able to see the error information and make a plan for preventing those errors from happening again.

Error logging is implemented in an ErrorBoundary component using the componentDidCatch() lifecycle method:

componentDidCatch(error, errorInfo) {
  console.log(error);
  console.log(errorInfo.componentStack); 
}

This lifecycle method is called by React after an error has been thrown by one of its descendants. When called, it receives an error object representing the thrown error. It also receives an errorInfo object with a .componentStack property. This property is incredibly useful as it contains a stack trace showing the history of rendered components that led to the error.

Error: Why do we even have this switch?
in LightSwitch (created by App)
in ErrorBoundary (created by App)
in div (created by App)
in App

By logging this stack trace, we can more accurately hunt down the source of the error.

How your team decides to use the componentDidCatch() method to log the error information can vary widely. When testing out this feature, you may decide to simply print the error to the console. However, in production applications, this info is often sent to a server for monitoring, alerting, and debugging.

Now it’s your turn to try!