How-To: Tracing React + Node in under 50 lines of code!

austinlparker

austin

Posted on June 23, 2020

How-To: Tracing React + Node in under 50 lines of code!

When you're building a React app, it can be difficult to know what's going on behind the scenes in terms of performance. When something's slow, how do you figure out why? There could be a hundred things at fault -- a bug in your reducer, a slow API, problems with the database, a network failure -- and tracking down these problems can be extremely time-consuming and frustrating.

What if there was an easier way to get answers? OpenTelemetry to the rescue! In less than 50 lines of code, you can trace every step in a request - from your React code, down to your database - in production with little additional overhead. In this video, I'll show you how to integrate OpenTelemetry into a React SPA and a Node.JS server built on Express, how to deal with common configuration problems, and how to verify that everything is working.

Next time, we'll look at some deployment options for our application and explore building custom metrics in React. Join me then!

💖 💪 🙅 🚩
austinlparker
austin

Posted on June 23, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related