No app is perfect. Even if we try our best to test all possible cases, sometimes things will go wrong. It only takes one failing request to get you in trouble. It’s how we handle it that makes the difference between an application crash and a graceful fail. In this article, we’ll cover the basics of error and exception handling in React apps. We’ll also explore different kinds of errors and best practices for recovering from them in a user-friendly way.

Logging is an essential part of development. While working on React projects, logging provides a way to get feedback and information about what’s happening within the running code. However, once an app or website is deployed into production, the default console provides no way to continue benefiting from logs.

Hydration failed because the initial ui does not match what was rendered on the server. Don’t you just love hate it when that happens?

In this guide, you’ll gather how to identify and solve the most common bugs and performance issues. We’ll cover debugging client-side React, if you have a React app that uses server-side rendering, you can also look at our Node.js debugging guide or on-demand workshop. In the below sections you’ll learn.

OpenTelemetry can be used to trace React applications for performance issues and bugs. You can trace user requests from your frontend web application to your downstream services. OpenTelemetry is an open-source project under the Cloud Native Computing Foundation (CNCF) that aims to standardize the generation and collection of telemetry data. Using OpenTelemetry Web libraries, you can instrument your React apps to generate tracing data.

Fetch Waterfalls are scenarios where multiple fetch requests are invoked in a sequential manner, not in parallel. This leads to some serious performance degradation. Here’s how they look: In this case, the second and third requests can be fetched in parallel, which will improve the page load and data display by 4.053 seconds. The negative performance impact with fetch waterfalls is also stacking - meaning the more requests there are, the worse the performance impact is going to be.

React is an open source JavaScript library known for its simplicity and incredible performance when creating an interactive user interface. React has gained wide adoption from web developers and reputable companies. While there are other frameworks in the JavaScript ecosystem, React is often the first choice when it comes to user interface and frontend business logic.