Description
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
SDK Setup
//entry.server.tsx
export function handleError(error, { request }) {
Sentry.captureRemixServerException(error, 'remix.server', request);
}
Sentry.init({
dsn: "https://[email protected]/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://[email protected]/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
Metadata
Metadata
Assignees
Type
Projects
Status