[Remix] Traces that start in the backend do not end after the interaction that caused them when using Meta helper

[souredoutlook]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

latest

Framework Version

Remix v2

Link to Sentry event

https://meisen-haus-3.sentry.io/discover/remix:fcccc9dbacd1499385106cc753c6b547/?field=title&field=event.type&field=project&field=user.display&field=timestamp&field=replayId&homepage=true&name=All+Events&project=4506384513368064&query=&sort=-timestamp&statsPeriod=14d&yAxis=count%28%29

SDK Setup

//entry.server.tsx

export function handleError(error, { request }) {
  Sentry.captureRemixServerException(error, 'remix.server', request);
}

Sentry.init({
    dsn: "https://c8f0b4c1af5ed393c9b73d4cdab42b0a@o1280942.ingest.sentry.io/4506384513368064",
    tracesSampleRate: 1,
    release: "test3"
})

//root.tsx

export const ErrorBoundary = () => {
  const error = useRouteError();
  captureRemixErrorBoundaryError(error);
  return <div>Something went wrong</div>;
};

// Sentry provides a type for Remix v2 MetaFunction parameters
// so you can access `data.sentryTrace` and `data.sentryBaggage` alongside other data from loader.
import type { SentryMetaArgs } from "@sentry/remix";

export const meta = ({ data }: SentryMetaArgs<MetaFunction<typeof loader>>) => {
  return [
    {
      name: "sentry-trace",
      content: data.sentryTrace,
    },
    {
      name: "baggage",
      content: data.sentryBaggage,
    },
  ];
};

// entry.client.tsx

Sentry.init({
    dsn: "https://c8f0b4c1af5ed393c9b73d4cdab42b0a@o1280942.ingest.sentry.io/4506384513368064",
    tracesSampleRate: 1,
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1,

    integrations: [new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.remixRouterInstrumentation(useEffect, useLocation, useMatches)
    }), new Sentry.Replay()],
    release: "test3"
})

...

export default withSentry(App)

Steps to Reproduce

with a route like:

//routes/_index.tsx

export default function Index() {
  
  const data = useLoaderData()
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
          <Link to="/dashboard">Dashboard</Link>;
      <ul>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
      {JSON.stringify(data)}
    </div>
  );

When I load this route and then navigate to /dashboard I get a trace like this: https://meisen-haus-3.sentry.io/performance/trace/20adc19248fd425a8834433de7e6aa68/?limit=100&pageEnd=2023-12-14T01%3A44%3A01.521&pageStart=2023-12-13T01%3A43%3A56.416

Expected Result

I would expect two traces

one that includes a pageload and http.server transaction

another that includes a navigation and http.server transaction

Actual Result

I get two traces but one contains a pageload and two http.server events (that are not really related) https://meisen-haus-3.sentry.io/performance/trace/20adc19248fd425a8834433de7e6aa68/?limit=100&pageEnd=2023-12-14T01%3A44%3A01.521&pageStart=2023-12-13T01%3A43%3A56.416

The other contains a navigation event https://meisen-haus-3.sentry.io/discover/remix:fcccc9dbacd1499385106cc753c6b547/?field=title&field=event.type&field=project&field=user.display&field=timestamp&field=replayId&homepage=true&name=All+Events&project=4506384513368064&query=&sort=-timestamp&statsPeriod=14d&yAxis=count%28%29

[onurtemizkan]

I can confirm that this happens and should be fixed, tried some potential solutions in #10029, but looks like we need to have a broader refactor through trace propagation in Remix SDK.

I'll revisit this issue after we decide on a strategy for a new trace propagation logic.

[onurtemizkan]

@souredoutlook, this issue should be resolved by #12110, which is released with 8.10.0