<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anton Bjorkman</title>
    <description>The latest articles on DEV Community by Anton Bjorkman (@anton_bjorkman).</description>
    <link>https://dev.to/anton_bjorkman</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2954833%2F263c1e0f-a7df-40e4-86bb-7ca3b23e6399.jpg</url>
      <title>DEV Community: Anton Bjorkman</title>
      <link>https://dev.to/anton_bjorkman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/anton_bjorkman"/>
    <language>en</language>
    <item>
      <title>Sentry vs OpenTelemetry: You Don’t Need to Pick One</title>
      <dc:creator>Anton Bjorkman</dc:creator>
      <pubDate>Mon, 22 Jun 2026 21:23:57 +0000</pubDate>
      <link>https://dev.to/sentry/sentry-vs-opentelemetry-you-dont-need-to-pick-one-36ed</link>
      <guid>https://dev.to/sentry/sentry-vs-opentelemetry-you-dont-need-to-pick-one-36ed</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;TL;DR&lt;/strong&gt; — If your backend already uses OpenTelemetry, you can send traces and logs to Sentry by changing a few environment variables. No SDK swap, no instrumentation rewrite. Point your OTLP exporter at Sentry’s endpoint, add the Sentry SDK on the frontend for browser context, and you get one connected trace from click to backend span.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You already instrumented the backend with OpenTelemetry. Your services emit spans. Your teams know the OTel APIs. Maybe you already run a Collector. So when you start evaluating Sentry, the obvious question is:&lt;/p&gt;

&lt;p&gt;Do you need to replace your OpenTelemetry setup with the Sentry SDK?&lt;/p&gt;

&lt;p&gt;No.&lt;/p&gt;

&lt;p&gt;The practical answer is usually: keep OpenTelemetry where it already works, add the Sentry SDK where it gives you more application context, and send OpenTelemetry Protocol (OTLP) events to Sentry. For a web app, that often means using the Sentry SDK on the frontend for browser tracing, errors, &lt;a href="https://sentry.io/product/logs/" rel="noopener noreferrer"&gt;logs&lt;/a&gt;, &lt;a href="https://sentry.io/product/session-replay/" rel="noopener noreferrer"&gt;Session Replay&lt;/a&gt;, and source maps, while keeping OpenTelemetry on the backend for existing service instrumentation.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;One scope note: OTLP can carry traces, logs, and metrics. At this moment, Sentry’s OTLP ingest supports logs and traces, not metrics. We’re considering adding support for them in the future.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The important part is separating two decisions that often get lumped together:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  How traces stay connected across frontend and backend.&lt;/li&gt;
&lt;li&gt;  How backend OTLP events are exported to Sentry.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once you separate those, the architecture gets a lot easier to reason about.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sentry vs OpenTelemetry is the wrong question
&lt;/h2&gt;

&lt;p&gt;The first decision is trace linking. If a user clicks a button in your React app and that click triggers a backend request, the frontend and backend need to agree on the same &lt;a href="https://sentry.io/product/tracing/" rel="noopener noreferrer"&gt;distributed trace&lt;/a&gt; context. In this example, the Sentry frontend SDK sends W3C &lt;code&gt;traceparent&lt;/code&gt; headers (configurable through the &lt;code&gt;propagateTraceparent&lt;/code&gt; option), and the OpenTelemetry backend continues the trace.&lt;/p&gt;

&lt;p&gt;That linking is handled by the frontend SDK configuration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;Sentry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;integrations&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;Sentry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;browserTracingIntegration&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;tracesSampleRate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="c1"&gt;// ensure traceparent headers get sent&lt;/span&gt;
  &lt;span class="na"&gt;propagateTraceparent&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;tracePropagationTargets&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;localhost&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;127.0.0.1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sr"&gt;/^http:&lt;/span&gt;&lt;span class="se"&gt;\/\/&lt;/span&gt;&lt;span class="sr"&gt;localhost:8000&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;api&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sr"&gt;/^http:&lt;/span&gt;&lt;span class="se"&gt;\/\/&lt;/span&gt;&lt;span class="sr"&gt;127&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;0&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;0&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;1:8000&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;api&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="c1"&gt;// your backend endpoint here&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The second decision is export. After your backend creates telemetry, where do those OTLP events go?&lt;/p&gt;

&lt;p&gt;There are two common options:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Send OTLP events directly from the backend to Sentry’s OTLP endpoint.&lt;/li&gt;
&lt;li&gt; Send OTLP events to an OpenTelemetry Collector, then have the Collector forward them to Sentry’s OTLP endpoint.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That trace-continuation step is what lets a Sentry-instrumented browser action become the parent of backend OpenTelemetry work, regardless of which OTLP export option you choose.&lt;/p&gt;

&lt;p&gt;If you want the reference docs for these pieces, start with &lt;a href="https://docs.sentry.io/concepts/otlp/sentry-with-otel/" rel="noopener noreferrer"&gt;linking Sentry SDKs with OpenTelemetry SDKs&lt;/a&gt;, &lt;a href="https://docs.sentry.io/concepts/otlp/direct/traces/" rel="noopener noreferrer"&gt;sending OpenTelemetry traces directly to Sentry&lt;/a&gt;, &lt;a href="https://docs.sentry.io/concepts/otlp/direct/logs/" rel="noopener noreferrer"&gt;sending OpenTelemetry logs directly to Sentry&lt;/a&gt;, and &lt;a href="https://docs.sentry.io/concepts/otlp/forwarding/" rel="noopener noreferrer"&gt;forwarding OpenTelemetry data to Sentry&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Direct OTLP vs Collector forwarding
&lt;/h2&gt;

&lt;p&gt;Direct OTLP and Collector forwarding both end at Sentry’s OTLP endpoint. The difference is whether your service talks to Sentry itself or talks to a Collector first.&lt;/p&gt;

&lt;p&gt;Approach&lt;/p&gt;

&lt;p&gt;Use it when&lt;/p&gt;

&lt;p&gt;What you get&lt;/p&gt;

&lt;p&gt;Tradeoff&lt;/p&gt;

&lt;p&gt;Direct OTLP to Sentry&lt;/p&gt;

&lt;p&gt;You have one backend service or project and want the smallest setup&lt;/p&gt;

&lt;p&gt;Fewer moving parts and a short path from service to Sentry&lt;/p&gt;

&lt;p&gt;Less central control over processing, sampling, and routing&lt;/p&gt;

&lt;p&gt;Collector forwarding&lt;/p&gt;

&lt;p&gt;You have multiple services, already run a Collector, need processing, or want multi-vendor routing&lt;/p&gt;

&lt;p&gt;Centralized routing, batching, processing, sampling, and easier vendor evaluation&lt;/p&gt;

&lt;p&gt;Another component to deploy and operate&lt;/p&gt;

&lt;p&gt;Direct OTLP is the simplest path for a single backend project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;OTEL_EXPORTER_OTLP_TRACES_ENDPOINT&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"https://o{ORG_ID}.ingest.sentry.io/api/{PROJECT_ID}/integration/otlp/v1/traces"&lt;/span&gt;
&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;OTEL_EXPORTER_OTLP_LOGS_ENDPOINT&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"https://o{ORG_ID}.ingest.sentry.io/api/{PROJECT_ID}/integration/otlp/v1/logs"&lt;/span&gt;
&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;OTEL_EXPORTER_OTLP_TRACES_HEADERS&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"x-sentry-auth=sentry sentry_key={PUBLIC_KEY}"&lt;/span&gt;
&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;OTEL_EXPORTER_OTLP_LOGS_HEADERS&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"x-sentry-auth=sentry sentry_key={PUBLIC_KEY}"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Collector forwarding is the better fit when your observability setup is already more than one app talking to one destination. It gives you one place to receive telemetry from many services, batch it, process it, and send it to one or more backends.&lt;/p&gt;

&lt;p&gt;That last part matters when you are evaluating Sentry. You can keep routing telemetry to an existing vendor while also forwarding a copy to Sentry, then compare the debugging experience without rewriting backend instrumentation.&lt;/p&gt;

&lt;p&gt;There is one important Sentry-specific detail for larger setups: a generic OTLP HTTP exporter points at one Sentry project endpoint with one project key. If you send every service through that one exporter, every service lands in the same Sentry project. For multi-project routing, use the &lt;a href="https://docs.sentry.io/concepts/otlp/forwarding/pipelines/sentry-exporter/" rel="noopener noreferrer"&gt;Sentry exporter&lt;/a&gt;. It can route OTLP events to projects based on a resource attribute like &lt;code&gt;service.name&lt;/code&gt;, and it can auto-create missing projects when configured with the right Sentry API permissions.&lt;/p&gt;

&lt;h2&gt;
  
  
  A demo architecture
&lt;/h2&gt;

&lt;p&gt;Let’s check out a &lt;a href="https://github.com/nikolovlazar/sentry-otel/tree/bf5e026c4923483e3d148d9fd30ead4d1540c774" rel="noopener noreferrer"&gt;demo project&lt;/a&gt; that uses the Collector forwarding path:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React + @sentry/react
  -&amp;gt; fetch with traceparent
  -&amp;gt; FastAPI + OpenTelemetry
  -&amp;gt; OpenTelemetry Collector
  -&amp;gt; Sentry OTLP endpoint
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The frontend lives in &lt;code&gt;frontend/&lt;/code&gt;. It is a React + Vite app using &lt;code&gt;@sentry/react&lt;/code&gt;. The backend lives in &lt;code&gt;backend/&lt;/code&gt;. It is a FastAPI service using the OpenTelemetry SDK, FastAPI instrumentation, SQLAlchemy instrumentation, manual spans, and standard logging in checkout logic. The Collector lives in &lt;code&gt;collector/&lt;/code&gt; and forwards those OTLP events to Sentry.&lt;/p&gt;

&lt;p&gt;The point of the demo is not that every layer uses the same SDK. The point is that every layer participates in the same trace, with backend logs attached to that debugging context.&lt;/p&gt;

&lt;h3&gt;
  
  
  The frontend uses the Sentry SDK
&lt;/h3&gt;

&lt;p&gt;The Sentry setup is in &lt;a href="https://github.com/nikolovlazar/sentry-otel/blob/bf5e026c4923483e3d148d9fd30ead4d1540c774/frontend/src/instrument.ts" rel="noopener noreferrer"&gt;&lt;code&gt;frontend/src/instrument.ts&lt;/code&gt;&lt;/a&gt;. It enables browser tracing, Session Replay, logs, and trace propagation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;Sentry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;dsn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;meta&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;VITE_SENTRY_DSN&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;environment&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;meta&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MODE&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;sendDefaultPii&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;integrations&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;Sentry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;browserTracingIntegration&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
    &lt;span class="nx"&gt;Sentry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replayIntegration&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;maskAllText&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;blockAllMedia&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;}),&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;enableLogs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;tracesSampleRate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;propagateTraceparent&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;tracePropagationTargets&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;localhost&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;127.0.0.1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sr"&gt;/^http:&lt;/span&gt;&lt;span class="se"&gt;\/\/&lt;/span&gt;&lt;span class="sr"&gt;localhost:8000&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;api&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sr"&gt;/^http:&lt;/span&gt;&lt;span class="se"&gt;\/\/&lt;/span&gt;&lt;span class="sr"&gt;127&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;0&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;0&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;1:8000&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;api&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;replaysSessionSampleRate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;replaysOnErrorSampleRate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The frontend checkout flow is in &lt;a href="https://github.com/nikolovlazar/sentry-otel/blob/bf5e026c4923483e3d148d9fd30ead4d1540c774/frontend/src/hooks/useCheckoutLab.ts#L98-L107" rel="noopener noreferrer"&gt;&lt;code&gt;frontend/src/hooks/useCheckoutLab.ts&lt;/code&gt;&lt;/a&gt;. It creates Sentry spans for user-facing work, logs useful state changes, and captures unexpected errors:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;Sentry&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startSpan&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Run checkout scenario&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;op&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ui.checkout&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;attributes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;scenario&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="nx"&gt;itemCount&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="nx"&gt;totalCents&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;order&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;createCheckout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cart&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;scenario&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nf"&gt;setLastOrder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;order&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The actual request is a normal &lt;code&gt;fetch&lt;/code&gt; call:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;API_BASE_URL&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/api/checkout`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;content-type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;application/json&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;scenario&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There is no manual trace header code in that request. The Sentry browser tracing integration handles the propagation as long as the destination matches &lt;code&gt;tracePropagationTargets&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  The backend keeps OpenTelemetry
&lt;/h3&gt;

&lt;p&gt;The backend does not install or initialize the Sentry SDK. Its OpenTelemetry setup is in &lt;a href="https://github.com/nikolovlazar/sentry-otel/blob/bf5e026c4923483e3d148d9fd30ead4d1540c774/backend/app/core/observability.py" rel="noopener noreferrer"&gt;&lt;code&gt;backend/app/core/observability.py&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;It creates an OpenTelemetry &lt;code&gt;TracerProvider&lt;/code&gt;, attaches service resource attributes, exports spans over OTLP HTTP, and registers W3C trace-context propagation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;resource&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Resource&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="o"&gt;**&lt;/span&gt;&lt;span class="nf"&gt;parse_resource_attributes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;otel_resource_attributes&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;service.name&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;otel_service_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;deployment.environment&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;app_environment&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;provider&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;TracerProvider&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;resource&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;resource&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;otel_exporter_otlp_traces_endpoint&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;exporter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;OTLPSpanExporter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;endpoint&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;otel_exporter_otlp_traces_endpoint&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;provider&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add_span_processor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;BatchSpanProcessor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;exporter&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

&lt;span class="n"&gt;trace&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set_tracer_provider&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;provider&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;propagate&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set_global_textmap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nc"&gt;CompositePropagator&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;[&lt;/span&gt;
            &lt;span class="nc"&gt;TraceContextTextMapPropagator&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
            &lt;span class="nc"&gt;W3CBaggagePropagator&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
        &lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It also configures OTLP log export. The backend creates a &lt;code&gt;LoggerProvider&lt;/code&gt;, attaches an &lt;code&gt;OTLPLogExporter&lt;/code&gt;, and adds an OpenTelemetry &lt;code&gt;LoggingHandler&lt;/code&gt; to the app logger:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;provider&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;LoggerProvider&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;resource&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nf"&gt;build_resource&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="n"&gt;exporter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;OTLPLogExporter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;endpoint&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;otel_exporter_otlp_logs_endpoint&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;provider&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add_log_record_processor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;BatchLogRecordProcessor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;exporter&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="nf"&gt;set_logger_provider&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;provider&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;otel_handler&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;LoggingHandler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;level&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;logging&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;INFO&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;logger_provider&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;provider&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;app_logger&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;logging&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getLogger&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;checkout_trace_lab&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;app_logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addHandler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;otel_handler&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;app_logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setLevel&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;logging&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;INFO&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The default backend endpoints are local:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight conf"&gt;&lt;code&gt;&lt;span class="n"&gt;OTEL_EXPORTER_OTLP_TRACES_ENDPOINT&lt;/span&gt;=&lt;span class="n"&gt;http&lt;/span&gt;://&lt;span class="n"&gt;localhost&lt;/span&gt;:&lt;span class="m"&gt;4318&lt;/span&gt;/&lt;span class="n"&gt;v1&lt;/span&gt;/&lt;span class="n"&gt;traces&lt;/span&gt;
&lt;span class="n"&gt;OTEL_EXPORTER_OTLP_LOGS_ENDPOINT&lt;/span&gt;=&lt;span class="n"&gt;http&lt;/span&gt;://&lt;span class="n"&gt;localhost&lt;/span&gt;:&lt;span class="m"&gt;4318&lt;/span&gt;/&lt;span class="n"&gt;v1&lt;/span&gt;/&lt;span class="n"&gt;logs&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That means the backend exports OTLP traces and logs to the Collector, not directly to Sentry.&lt;/p&gt;

&lt;p&gt;The FastAPI app also allows the browser trace headers through CORS:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;allow_headers&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;content-type&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;sentry-trace&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;baggage&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;traceparent&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;tracestate&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is easy to miss. If your browser is making cross-origin requests and CORS blocks the propagation headers, your frontend and backend traces can split apart even if both sides are instrumented correctly.&lt;/p&gt;

&lt;h3&gt;
  
  
  The checkout flow adds manual OTel spans and logs
&lt;/h3&gt;

&lt;p&gt;The backend service code in &lt;a href="https://github.com/nikolovlazar/sentry-otel/blob/bf5e026c4923483e3d148d9fd30ead4d1540c774/backend/app/services/checkout.py" rel="noopener noreferrer"&gt;&lt;code&gt;backend/app/services/checkout.py&lt;/code&gt;&lt;/a&gt; models a checkout workflow. It creates manual OpenTelemetry spans for business operations:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;validate_cart&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;engine&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Engine&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;CheckoutRequest&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;ProductRow&lt;/span&gt;&lt;span class="p"&gt;]:&lt;/span&gt;
    &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;tracer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;start_as_current_span&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;checkout.validate_cart&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;span&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;requested_ids&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;product_id&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;item&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;items&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
        &lt;span class="n"&gt;span&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set_attribute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;cart.item_count&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;items&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
        &lt;span class="bp"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The checkout path includes spans for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;checkout.validate_cart&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;checkout.reserve_inventory&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;checkout.calculate_tax&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;checkout.payment&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;checkout.write_order&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;checkout.send_confirmation&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It also emits backend logs for the same business steps, such as &lt;code&gt;checkout.started&lt;/code&gt;, &lt;code&gt;checkout.cart_validated&lt;/code&gt;, &lt;code&gt;checkout.inventory_reserved&lt;/code&gt;, &lt;code&gt;checkout.payment_approved&lt;/code&gt;, &lt;code&gt;checkout.order_written&lt;/code&gt;, and &lt;code&gt;checkout.completed&lt;/code&gt;. Those logs go through Python’s standard &lt;code&gt;logging&lt;/code&gt; API, then the OpenTelemetry &lt;code&gt;LoggingHandler&lt;/code&gt; exports them through OTLP.&lt;/p&gt;

&lt;p&gt;This is the part OTel-first teams care about most. Those spans and logs stay in the OpenTelemetry pipeline. You do not need to rewrite them with &lt;code&gt;Sentry.startSpan()&lt;/code&gt; or Sentry logging APIs just to view the trace and related logs in Sentry.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Collector forwards OTLP to Sentry
&lt;/h3&gt;

&lt;p&gt;The Collector config is in &lt;a href="https://github.com/nikolovlazar/sentry-otel/blob/bf5e026c4923483e3d148d9fd30ead4d1540c774/collector/otel-collector.yaml" rel="noopener noreferrer"&gt;&lt;code&gt;collector/otel-collector.yaml&lt;/code&gt;&lt;/a&gt;. It receives OTLP over gRPC and HTTP:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;receivers&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;otlp&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;protocols&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;grpc&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="na"&gt;endpoint&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;0.0.0.0:4317&lt;/span&gt;
      &lt;span class="na"&gt;http&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="na"&gt;endpoint&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;0.0.0.0:4318&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It batches the data:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;processors&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;batch&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;send_batch_size&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1024&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then it forwards to Sentry with the OTLP HTTP exporter:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;exporters&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;debug&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;verbosity&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;basic&lt;/span&gt;
  &lt;span class="na"&gt;otlphttp/sentry&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;endpoint&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${env:SENTRY_OTLP_ENDPOINT}&lt;/span&gt;
    &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;x-sentry-auth&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;sentry&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;sentry_key=${env:SENTRY_OTLP_PUBLIC_KEY}"&lt;/span&gt;
    &lt;span class="na"&gt;compression&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;gzip&lt;/span&gt;
    &lt;span class="na"&gt;encoding&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;proto&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Reminder: this demo uses generic &lt;code&gt;otlphttp&lt;/code&gt; for a single Sentry project. For multi-project routing or automatic project creation, swap it for the &lt;a href="https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/exporter/sentryexporter" rel="noopener noreferrer"&gt;&lt;code&gt;sentry&lt;/code&gt; exporter&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The configured pipelines send to both the debug exporter and Sentry:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;service&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;pipelines&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;traces&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;receivers&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;otlp&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
      &lt;span class="na"&gt;processors&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;batch&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
      &lt;span class="na"&gt;exporters&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;debug&lt;/span&gt;&lt;span class="pi"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;otlphttp/sentry&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
    &lt;span class="na"&gt;logs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;receivers&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;otlp&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
      &lt;span class="na"&gt;processors&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;batch&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
      &lt;span class="na"&gt;exporters&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;debug&lt;/span&gt;&lt;span class="pi"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;otlphttp/sentry&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is the Collector forwarding pattern: the backend sends OTLP events to one local endpoint, and the Collector decides where that telemetry goes next.&lt;/p&gt;

&lt;h2&gt;
  
  
  What each layer is responsible for
&lt;/h2&gt;

&lt;p&gt;The cleanest way to understand this architecture is by ownership.&lt;/p&gt;

&lt;p&gt;The frontend Sentry SDK owns browser-specific debugging context:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Browser spans and frontend transactions&lt;/li&gt;
&lt;li&gt;  Frontend errors and React error boundaries&lt;/li&gt;
&lt;li&gt;  Session Replay&lt;/li&gt;
&lt;li&gt;  Frontend logs&lt;/li&gt;
&lt;li&gt;  Source maps through the Sentry Vite plugin&lt;/li&gt;
&lt;li&gt;  Trace propagation to the backend&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The backend OpenTelemetry SDK owns backend instrumentation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  FastAPI request spans&lt;/li&gt;
&lt;li&gt;  SQLAlchemy spans&lt;/li&gt;
&lt;li&gt;  HTTPX spans if the backend calls other services&lt;/li&gt;
&lt;li&gt;  Manual checkout spans&lt;/li&gt;
&lt;li&gt;  Backend logs exported with OpenTelemetry&lt;/li&gt;
&lt;li&gt;  Resource attributes such as &lt;code&gt;service.name&lt;/code&gt; and &lt;code&gt;deployment.environment&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  OTLP export to the Collector&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The Collector owns routing and processing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Receiving OTLP on &lt;code&gt;4317&lt;/code&gt; and &lt;code&gt;4318&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;  Batching telemetry&lt;/li&gt;
&lt;li&gt;  Printing debug output locally&lt;/li&gt;
&lt;li&gt;  Forwarding to Sentry’s OTLP endpoint&lt;/li&gt;
&lt;li&gt;  Providing the place to add sampling, transforms, filters, or multi-vendor routing later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is why Sentry and OpenTelemetry are not competing choices here. They are doing different jobs in the same observability pipeline.&lt;/p&gt;

&lt;h2&gt;
  
  
  What you can see in Sentry
&lt;/h2&gt;

&lt;p&gt;In the demo, I ran the checkout scenarios from the same frontend session. In Sentry, they show up as one connected trace that starts in React and continues through the FastAPI backend. You can see the normal checkout, slow payment, inventory miss, payment declined, and backend crash work in the same distributed trace instead of jumping between separate tools.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.sentry.io%2F_vercel%2Fimage%3Furl%3D_astro%252Fsentry-otel-trace-view.BW5GyfwG.jpg%26w%3D1920%26q%3D100" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.sentry.io%2F_vercel%2Fimage%3Furl%3D_astro%252Fsentry-otel-trace-view.BW5GyfwG.jpg%26w%3D1920%26q%3D100" alt="Sentry trace view showing the frontend checkout flow and backend OpenTelemetry spans for normal checkout, slow payment, inventory miss, payment declined, and backend crash." width="1920" height="1280"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The backend logs are associated with that trace too. Logs like &lt;code&gt;checkout.started&lt;/code&gt;, &lt;code&gt;checkout.inventory_reserved&lt;/code&gt;, &lt;code&gt;checkout.payment_slow_path&lt;/code&gt;, and &lt;code&gt;checkout.completed&lt;/code&gt; come from Python’s standard logging API, get exported through OTLP, and land in Sentry attached to the same debugging context as the spans.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.sentry.io%2F_vercel%2Fimage%3Furl%3D_astro%252Fsentry-otel-logs-view.B4AoIDV_.jpg%26w%3D1920%26q%3D100" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.sentry.io%2F_vercel%2Fimage%3Furl%3D_astro%252Fsentry-otel-logs-view.B4AoIDV_.jpg%26w%3D1920%26q%3D100" alt="Sentry trace-associated logs showing backend OpenTelemetry logs along with frontend Sentry logs for the checkout flow." width="1920" height="1280"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That is the useful part of the setup: the frontend SDK gives you browser context, the backend keeps its OpenTelemetry spans and logs, and Sentry gives you one place to inspect the full request path.&lt;/p&gt;

&lt;h2&gt;
  
  
  A decision tree for your own app
&lt;/h2&gt;

&lt;p&gt;Use direct OTLP to Sentry when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  You have one backend service or one project.&lt;/li&gt;
&lt;li&gt;  You want the fewest moving parts.&lt;/li&gt;
&lt;li&gt;  You do not need central processing or multi-destination routing yet.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use Collector forwarding when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  You already run an OpenTelemetry Collector.&lt;/li&gt;
&lt;li&gt;  You have multiple backend services.&lt;/li&gt;
&lt;li&gt;  You need services to land in separate Sentry projects.&lt;/li&gt;
&lt;li&gt;  You need sampling, filtering, transforms, or batching outside the app process.&lt;/li&gt;
&lt;li&gt;  You want to send telemetry to Sentry and another vendor while evaluating Sentry.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Add the Sentry backend SDK later when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  You need error monitoring. OpenTelemetry does not capture and send errors to Sentry—only the Sentry SDK can capture backend exceptions and link them to the trace, so you can jump from an error to the full request path and inspect the related logs, spans, and context.&lt;/li&gt;
&lt;li&gt;  You want profiling.&lt;/li&gt;
&lt;li&gt;  You want &lt;a href="https://docs.sentry.io/product/metrics/" rel="noopener noreferrer"&gt;Sentry’s Application Metrics&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;  You want other Sentry features that are not represented by your current OpenTelemetry data.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last step is optional, not a prerequisite. You can start with Sentry on the frontend and OpenTelemetry on the backend, then decide later whether adding the backend Sentry SDK is worth it for your services.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with the smallest change that preserves your trace
&lt;/h2&gt;

&lt;p&gt;If your backend already uses OpenTelemetry, do not start by rewriting instrumentation. Start by deciding where OTLP events should go.&lt;/p&gt;

&lt;p&gt;For a single backend, direct OTLP to Sentry is usually enough.&lt;/p&gt;

&lt;p&gt;For multiple services, vendor evaluation, or anything that needs routing and processing, put a Collector in the middle.&lt;/p&gt;

&lt;p&gt;Then link your frontend Sentry SDK to your backend OTel SDK with W3C &lt;code&gt;traceparent&lt;/code&gt; propagation. That gives you the useful part first: one trace that starts where the user action starts and continues through the backend code you already instrumented.&lt;/p&gt;

&lt;p&gt;You do not need to pick Sentry or OpenTelemetry. Use both where they fit.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;This article was originally published on the &lt;a href="https://blog.sentry.io/sentry-opentelemetry-work-together/" rel="noopener noreferrer"&gt;Sentry Blog&lt;/a&gt; by &lt;a href="https://blog.sentry.io/authors/lazar-nikolov/" rel="noopener noreferrer"&gt;Lazar Nikolov&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>webperf</category>
      <category>sentry</category>
      <category>automation</category>
    </item>
  </channel>
</rss>
