Capture Your First Distributed Tracing Error

Step 4 of 5

Now that the sample apps are up and running on your local environment and integrated with the Sentry SDKs, you're ready to generate the first error. Please ensure you have BOTH apps running (on http://localhost:3000 and http://localhost:3001).

You should see the 'One-Stop Shop' site running on http://localhost:3000. Clicking View details on any product card triggers a call to the backend for that product's info. As long as your Express server is running, you should see a title, image, and description for each product.

1. Trigger an Error

To start using Sentry's error monitoring feature, you need some errors first. Let's add in an obvious error that will be easy to see in Sentry.

If you're using your own source code, skip this step. Instead, select your platform and follow its Verify step inside the Getting Started guide to introduce an error.

1. In the tracing-tutorial-frontend repo, open src/App.jsx and find the Nonfat Water product card. Update its onClick handler by replacing the string passed to the getProduct() function from nonfat-water to debug-sentry.

   JSX

   src/App.jsx

   Copied

       <article className="product-card">
         <div className="product-thumb">🤡</div>
         <h3 className="product-name">Clown Shoes</h3>
         <button className="btn" onClick={() => getProduct("clown-shoes")}>
           View details
         </button>
       </article>
       <article className="product-card">
         <div className="product-thumb">💧</div>
         <h3 className="product-name">Nonfat Water</h3>
   -      <button className="btn" onClick={() => getProduct("nonfat-water")}>
   +      <button className="btn" onClick={() => getProduct("debug-sentry")}>
           View details
         </button>
       </article>
   

   There's a middleware function handling the /products/debug-sentry route in the server.js file of the tracing-tutorial-backend repo that throws a sample error:

   JavaScript

   server.js

   Copied

   app.get("/products/debug-sentry", (req, res) => {
     console.log("Sentry Error thrown!");
     throw new Error("My first Sentry error!");
   });
   

2. Save the file.

3. Go back to the browser window and click the View details button on the Nonfat Water card again. You'll no longer see the expected product information — instead the request fails with a 500 error.

4. Open the terminal window that's running the tracing-tutorial-backend server. Here, you'll see a log letting you know that an error has occurred:

   Bash

   Copied

   Sentry Error thrown!
   

This confirms that the error we just produced on the frontend has triggered a corresponding error on the backend.

2. View the Error in Sentry

Now that you've triggered an error, let's see what it looks like in Sentry.

1. Open the Traces page in Sentry.io. Make sure one (or both) of the projects you're using for this tutorial is selected in the projects dropdown.

2. You should see a trace that shows both the React and Express icons, indicating that this trace traverses both projects. Click on the blue trace ID on the left to see the Trace View.

3. On the Trace View page, you can see every span that happened within this trace. You can see the error on the React app that directly triggered the error on the Express app.

UI Walkthrough

The interactive demo below walks through how to view a distributed trace in Sentry.

Next

Congrats — you've set up Sentry with distributed tracing across your frontend and backend. That's the core of this tutorial.

There's one optional step that will let Sentry identify the exact line of code where something broke:

• Enable Readable Stack Traces — the frontend error's stack trace is currently minified and barely readable. Upload source maps so Sentry shows you exactly which line in which file caused the error.

To go deeper, explore:

• Suspect commits & stack trace linking — connect the GitHub integration so Sentry can point to the commit that likely caused an error and link each stack frame straight to your source on GitHub.
• Seer — Sentry's AI debugging agent. Connect your GitHub or GitLab repo and Seer can analyze issues, find the root cause, and even open a pull request with a fix. (Seer is a paid add-on; see Seer pricing.)
• Session Replay — see a video-like reproduction of what the user did before the error
• Alerts — get notified in Slack or Discord about the issues you care about
• Dashboards — track error and performance trends across your services
• Releases — monitor release health over time

To set up Sentry on a project that isn't the sample app, head to the Platforms page and pick your stack.