Getting Started Tutorial
Follow this step-by-step tutorial to set up Sentry error monitoring and distributed tracing for a sample fullstack JavaScript app. You'll learn how to trace errors from your frontend through to your backend, see readable stack traces, and pinpoint the commit that caused them.
By the end of this tutorial, you'll be able to:
- See errors as they happen in both apps and get notified about them.
- Follow a single error across the network boundary from frontend to backend in one distributed trace.
- Read un-minified stack traces that point to the exact line of source code that caused an error.
Time to complete
This tutorial takes about 45 minutes. Steps 1–4 set up distributed tracing across your stack (roughly 30 minutes). Step 5 is optional and builds on that foundation.
You'll start with two sample apps — one frontend, one backend — and instrument the Sentry SDK into each. You'll then trigger an error from the UI that fails on the backend, and watch Sentry stitch both halves of the failure into a single distributed trace.
This tutorial uses a sample React app on the frontend and a sample Express API on the backend. Some familiarity with JavaScript will help you follow along. You can also apply the same steps to your own project, as long as you're running React on the frontend and Express on the backend.
- A Sentry account — sign up if you don't have one
- A GitHub account — sign up if you don't have one
- Node 18+
- Create Frontend and Backend Sentry Projects
- Add the Sentry SDK to Your Frontend Project
- Add the Sentry SDK to Your Backend Project
- Capture Your First Distributed Tracing Error
- Enable Readable Stack Traces (optional)
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").