In the early days of the web, the idea of performance was relatively straightforward. Pages were static, and the most dynamic thing you might encounter was a blinking banner ad. But as the web evolved, so did our ambitions. Today it's not just about building web pages anymore; it's about crafting experiences. Load speed time and search engine optimization (SEO) matter just as much as the content on the page. Thus, the choice between React and Next.js is an important one, with real-world implications.

Grafana dashboards enable millions of users to visualize and analyze their data. And working behind the scenes of the widely used open source platform is React, a frontend JavaScript library for building user interfaces. In this post — which was inspired by my recent presentation at React Summit 2023 in Amsterdam — we’ll explore why we chose to use React for Grafana, and the benefits and challenges we’ve seen along the way.

The modern standard for observability in backend systems is: distributed traces with OpenTelemetry, plus dynamic aggregations over these events. This works very well in the world of web servers. But what about the web client? This post describes the state of OpenTelemetry support for React web clients, as of early April 2023.

In your lifetime as a frontend developer that works with React, you must have come across several issues with debugging a containerized React application. I bet you can relate, you’re certainly not alone. Containerization has become an integral part of best practices for software development teams that want to create, test and deploy applications quickly and efficiently. However, despite its advantages, it also comes with new challenges for debugging and troubleshooting applications.

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. React (also known as React.js or ReactJS) is a free and open-source frontend JavaScript library for building user interfaces based on UI components.

As React is the most popular JavaScript framework for creating component-based applications, you have access to a solid ecosystem of tools, resources, and best practices that can help with React debugging when something goes wrong. To create a high-quality React application, you can’t skip over the debugging phase of your software development life cycle including everything from addressing error messages coming up in the development phase to monitoring live errors in production.

In the modern web, code splitting is essential. You want to keep your app slim, with a small bundle size, while having “First Contentful Paint” as fast as possible. But what happens when a dynamic module fails to fetch? In this short article, we’ll see how to overcome such difficulties.

At Sentry, we practice continuous delivery, which means that code can be released as soon as it’s merged into the main branch. This allows us to iterate quickly on our product, making new features, bug fixes, configuration changes, and experiments available in production as frequently as possible. We merge over 700 pull requests a month.