DEV Community

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

Posted on

1

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay