DEV Community 👩‍💻👨‍💻

Cover image for How-To: Tracing React + Node in under 50 lines of code!
austin for Lightstep

Posted on

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!

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.