Connecting Frontend to Backend for Distributed Tracing

Review how trace propagation works

This is the use case we discussed earlier where we incorporate distributed tracing between the frontend and backend, in our case a Sentry Frontend + OTEL Backend. We will be using the propagateTraceparent configuration in our Sentry SDK to enable this.

propagateTraceparent

The traceparent header contains the same information (Trace ID, Parent Span ID, flags), just in a standardized format that OpenTelemetry can read.

When enabled, Sentry’s SDK sends all three headers:

fetch('http://localhost:3000/api/orders', {
  headers: {
    'sentry-trace': '4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-1',
    'baggage': 'sentry-trace_id=4bf92f3577b34da6a3ce929d0e0e4736,sentry-environment=production',
    'traceparent': '00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01', // OpenTelemetry expects this W3C standard header
  }
})

Now your OpenTelemetry backend can:

1. Extract the traceparent header
2. Continue the same trace with the same Trace ID
3. Create backend spans as children of frontend spans
4. Send everything to Sentry via OTLP

The result is a unified trace that flows from browser → React → API → Database, all visible in Sentry’s trace view.

Setting Up Your Sentry Project

Before connecting the frontend, you’ll need a Sentry project to send data to. If you already have a project set up, you can skip to the next section.

Tip

Using separate projects allows you to:

• Set different alert rules for frontend vs backend issues
• Filter traces by project in the Explore > Traces view
• Track error budgets and performance metrics separately

1. Create a new Sentry project

   1. Log in to sentry.io
   2. Navigate to Projects in the main navigation
   3. Click Create Project in the top right
   4. Select React as the platform (for the frontend)
   5. Set Alert Frequency to your preference (we recommend “Alert me on every new issue” for this workshop)
   6. Give your project a name like otel-workshop-frontend
   7. Choose or create a Team to own this project
   8. Click Create Project

2. Copy your DSN

   After creating the project, Sentry will show you the DSN (Data Source Name). This is the URL that tells the Sentry SDK where to send data. You can always find it later in: Settings > Projects > [Your Project] > Client Keys (DSN)

3. Upload sourcemaps to Sentry (recommended)

   Sourcemaps are used to map compiled code back to the original source files, allowing Sentry to show you the correct line of code in the error stack trace.

   npx @sentry/wizard@latest -i sourcemaps

Configuring the Frontend

Now that you have a Sentry project and DSN, let’s configure the React frontend.

Switch Back to Direct Mode

If you’re still running the backend in collector mode from the previous lesson, stop it now and switch back to direct mode:

# Stop the collector mode (Ctrl+C in the terminal running it)
# Then start direct mode:
npm run demo:direct

1. Add your Sentry DSN to environment variables

   The frontend is already set up - just add your DSN to the frontend/.env file:

   Add your Sentry DSN:

   VITE_API_URL=http://localhost:3000/api
   VITE_SENTRY_DSN=<paste React project DSN>

2. Verify the Sentry configuration

   Open frontend/instrument-sentry.js and verify it has the correct trace propagation settings:

   Sentry.init({
     dsn: import.meta.env.VITE_SENTRY_DSN,
     environment: import.meta.env.MODE || "development",
     sendDefaultPii: true,
     integrations: [
       Sentry.browserTracingIntegration(),
       Sentry.replayIntegration(),
     ],
   
     // Session Replay settings
     replaysSessionSampleRate: 0.1,
     replaysOnErrorSampleRate: 1.0,
   
     tracesSampleRate: 1.0,
   
    // Control for which URLs trace propagation should be enabled
    // Accepts strings or regex
    tracePropagationTargets: [
      "localhost",
      "/api",
    ],
   
     // 👉 IMPORTANT: Enable trace propagation between frontend and backend
     propagateTraceparent: true,
   
   });

3. Start the frontend

   npm run dev:frontend

   The frontend will be available at http://localhost:5173 (or 5174 if 5173 is taken)

4. Test the full flow

   1. Open http://localhost:5173 in your browser
   2. Open Browser DevTools (F12 or right-click > Inspect)
   3. Go to the Network tab
   4. Click on any product to view details
   5. Look for the API request to localhost:3000/api/products/1
   6. Click on the request and view the Request Headers

   You should see these headers:

   sentry-trace: 4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-1
   baggage: sentry-trace_id=4bf92f3577b34da6a3ce929d0e0e4736,...
   traceparent: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01

5. Generate real traffic

   Browse the app:

   • View multiple products
   • Add items to cart
   • Go through checkout
   • Place an order

6. Verify in Sentry

   1. Go to your Sentry project
   2. Navigate to Explore > Traces
   3. Find a recent trace
   4. Click to open the trace details

   The frontend and backend spans are in the same trace!

What You Should See in Sentry

Frontend Transactions

• pageload - Initial page load
• navigation - Client-side navigation
• http.client spans for API calls

Backend Transactions

• http.server - Incoming API requests
• db.query spans for database operations
• cache.get/cache.set spans for Redis
• Custom spans like payment.process

Connected Spans

All spans with the same Trace ID are grouped together in one view!