React is one of the most versatile and powerful frameworks available today for building web and mobile apps. With all this new functionality comes the need to adjust how you think about handling errors in your React apps. New concepts like state, components, and boundaries mean you might need additional strategies for handling and reporting errors for faster resolution.
Much of the error handling on the server side related to React has to do with monitoring build processes. Additional tools like friendly WebPack errors might help further understand any build issues, and understanding how to do error handling in Express may be of use, depending on what you’re using. Any AJAX or server requests from a React app can be monitored and handled like any other requests. Using a log aggregation or backend logging tool can help keep track of any issues.
Much of the consequences for improperly handling React errors is on the application side, meaning your React code. Even worse, the majority of these errors are not only visible to the end user, but can severely impact the end-user’s experience. There are a number of strategies to handle errors in React that will reduce the likelihood of this occurring.
The first and potentially most important is to leverage error boundaries. In short, React includes a componentDidCatch() lifecycle event which wraps around components. If there is a throwable error in a component, rather than crashing the entire app, just the component will break and you can choose what behavior you would like to occur. This is available in React 16+ and you can read more about it here.
While capabilities like componentDidCatch() handle the what around a given React error, they seldom provide any insight as to why the error occured. That’s where LogRocket gives invaluable information as to what a user’s environment is and more importantly, what they did that led to a React-related error. You can send an event to LogRocket whenever a user clicks on a specific component in React. Being able to filter on those events, LogRocket can then narrow down errors on a granular level. Once an error has been identified, LogRocket provides pixel-perfect session replay paired with all available technical telemetry so you can push fixes to React errors faster. Get a free trial today.
