React Router 7 Framework distributed tracing | Sentry Community | Page 1

shut vigil Jul 20, 2025, 3:39 PM

#

I am struggling getting distributed tracing to work with React Router Framework.

I definitely have the spans for everything that's client side (asets etc), however I don't see any spans for my loaders.
I only see browser.request and browser.fetch spans and nothing inside.

I tried asking the AI but it did not solve my issue so far:
https://discord.com/channels/621778831602221064/1396502446037143622

Any idea what I could be missing ?

Here are my attempts so far:

// shared\sentry\initClient.ts
Sentry.init({
  dsn: sentryConfig.dsn,
  environment: appConfig.environment,

  sendDefaultPii: true,

  skipOpenTelemetrySetup: true,

  integrations: [Sentry.reactRouterTracingIntegration()],

  _experiments: { enableLogs: true },

  tracesSampleRate: 1.0,
  profilesSampleRate: 1.0,
});

// shared\sentry\initClient.server.ts
Sentry.init({
  // ...
  integrations: [nodeProfilingIntegration()],
  // ...
});

// shared\sentry\initTracerProvider.server.ts
const sentryClient = Sentry.getClient();
if (!sentryClient) {
  throw new Error("Sentry client not found");
}

const provider = new NodeTracerProvider({
  sampler: new SentryOpenTelemetry.SentrySampler(sentryClient),
  spanProcessors: [new SentryOpenTelemetry.SentrySpanProcessor()],
});

provider.register({
  propagator: new SentryOpenTelemetry.SentryPropagator(),
  contextManager: new Sentry.SentryContextManager(),
});

Sentry.validateOpenTelemetrySetup();

// web\entry.client.tsx
import "@local/shared/sentry/initClient";
// ...

// web\entry.server.tsx
const handleRequest = Sentry.createSentryHandleRequest({
  ServerRouter,
  renderToPipeableStream,
  createReadableStreamFromReadable,
});

export { handleRequest };

export default handleRequest;

export const handleError: HandleErrorFunction = (error, { request }) => {
  // React Router may abort some interrupted requests, don't log those
  if (!request.signal.aborted) {
    Sentry.captureException(error);
    // optionally log the error so you can see it
    console.error(error);
  }
};

// web\root.tsx
// ...
export const loader = Sentry.wrapServerLoader(
  {
    name: "root",
  },
  async ({ context }: Route.LoaderArgs) => {
    // ...

    const sentryTraceData = Sentry.getTraceData();

    return {
      // ...
    };
  },
);

function RootLayout({ children }: RootLayoutProps) {
  // ...

  <meta name="sentry-trace" content={sentryTraceData["sentry-trace"]} />
  <meta name="baggage" content={sentryTraceData.baggage} />

  // ...
}
// ...

Then in a route loader

export const loader = Sentry.wrapServerLoader(
  { name: "app/_layout" },
  async ({ context, request }: Route.LoaderArgs) => {
    // ...

    const shop = await Sentry.startSpan({ name: "app/_layout" }, async () => {
      return await queryClient.fetchQuery(ShopQueryServer(shopId));
    });

    // ...
  },
);

shut vigil Jul 20, 2025, 5:21 PM

#

When triggering a test error I definitely get the error in both the server and client.

#

But it seems I don't have the server side spans

shut vigil Jul 20, 2025, 5:38 PM

#

This is driving me crazy 🥲

#

Like even when doing :

import * as Sentry from "@sentry/react-router";

export const loader = async () => {
  Sentry.logger.trace("Sandbox loading...");

  await Sentry.startSpan({ name: "sleep" }, async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000));

    Sentry.logger.trace("Awake");

    Sentry.startSpan({ name: "awaken" }, () => {
      throw new Error("Failed while awakening");
    });
  });
};

export default function ExamplePage() {
  return <div>Loading this page will throw an error</div>;
}

The errors are definitely appearing in the dashboard, but none of the server spans are to be found

odd ruin Jul 21, 2025, 12:33 PM

#

if you add debug: true to your Sentry.init calls, what gets logged out?

#

also, do your logs get sent to sentry?

shut vigil Jul 21, 2025, 1:14 PM

#

Hello Abhi I am still in the process of trying to make this work lol. Regarding your questions:

My logs are sent to Sentry
My errors are sent to Sentry
My client-side traces are sent to Sentry

For this app I am using a platform/framework called Gadget.dev.
They provide a backend using their own framework based on Fastify, but a bit opaque.
The client is now based on React Router 7 Framework mode.

So I also tried to setup tracing for the fastify part, and I had the exact same issue. No automated instrumentation (even using fastify plugin) nor manual spans were visible. But the errors were sent.

So I think the issue does not come from the Sentry React Router config nor from a distributed tracing misconfiguration.

I think there is something off either with how the platfomr work, or with how I am trying to set things up.

If you have any idea I'm open to it, but I tend to think that you won't be able to help me out on this given the current constraints aha

#React Router 7 Framework distributed tracing