Skip to content

feat(browser): Trace continuation from server-timing headers #18673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
timfish wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat(browser): Trace continuation from server-timing headers #18673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .size-limit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ module.exports = [
import: createImport('init'),
ignore: ['$app/stores'],
gzip: true,
limit: '42 KB',
limit: '42.5 KB',
},
// Node-Core SDK (ESM)
{
Expand Down
16 changes: 16 additions & 0 deletions ...kages/browser-integration-tests/suites/tracing/trace-lifetime/pageload-headers/subject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const errorBtn = document.getElementById('errorBtn');
errorBtn.addEventListener('click', () => {
throw new Error(`Sentry Test Error ${Math.random()}`);
});

const fetchBtn = document.getElementById('fetchBtn');
fetchBtn.addEventListener('click', async () => {
await fetch('http://sentry-test-site.example');
});

const xhrBtn = document.getElementById('xhrBtn');
xhrBtn.addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://sentry-test-site.example');
xhr.send();
});
11 changes: 11 additions & 0 deletions ...es/browser-integration-tests/suites/tracing/trace-lifetime/pageload-headers/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="errorBtn">Throw Error</button>
<button id="fetchBtn">Fetch Request</button>
<button id="xhrBtn">XHR Request</button>
</body>
</html>
85 changes: 85 additions & 0 deletions ...packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload-headers/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { expect } from '@playwright/test';
import { sentryTest } from '../../../../utils/fixtures';
import type { EventAndTraceHeader } from '../../../../utils/helpers';
import {
eventAndTraceHeaderRequestParser,
getFirstSentryEnvelopeRequest,
shouldSkipTracingTest,
} from '../../../../utils/helpers';

const META_TAG_TRACE_ID = '12345678901234567890123456789012';
const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
'sentry-trace_id=12345678901234567890123456789012,sentry-sample_rate=0.2,sentry-sampled=true,sentry-transaction=my-transaction,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod,sentry-sample_rand=0.42';

sentryTest(
'create a new trace for a navigation after the server timing headers',
async ({ getLocalTestUrl, page, enableConsole }) => {
if (shouldSkipTracingTest()) {
sentryTest.skip();
}

enableConsole();

const url = await getLocalTestUrl({
testDir: __dirname,
responseHeaders: {
'Server-Timing': `sentry-trace;desc=${META_TAG_TRACE_ID}-${META_TAG_PARENT_SPAN_ID}-1, baggage;desc="${META_TAG_BAGGAGE}"`,
},
});

const [pageloadEvent, pageloadTraceHeader] = await getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
page,
url,
eventAndTraceHeaderRequestParser,
);
const [navigationEvent, navigationTraceHeader] = await getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
page,
`${url}#foo`,
eventAndTraceHeaderRequestParser,
);

const pageloadTraceContext = pageloadEvent.contexts?.trace;
const navigationTraceContext = navigationEvent.contexts?.trace;

expect(pageloadEvent.type).toEqual('transaction');
expect(pageloadTraceContext).toMatchObject({
op: 'pageload',
trace_id: META_TAG_TRACE_ID,
parent_span_id: META_TAG_PARENT_SPAN_ID,
span_id: expect.stringMatching(/^[\da-f]{16}$/),
});

expect(pageloadTraceHeader).toEqual({
environment: 'prod',
release: '1.0.0',
sample_rate: '0.2',
sampled: 'true',
transaction: 'my-transaction',
public_key: 'public',
trace_id: META_TAG_TRACE_ID,
sample_rand: '0.42',
});

expect(navigationEvent.type).toEqual('transaction');
expect(navigationTraceContext).toMatchObject({
op: 'navigation',
trace_id: expect.stringMatching(/^[\da-f]{32}$/),
span_id: expect.stringMatching(/^[\da-f]{16}$/),
});
// navigation span is head of trace, so there's no parent span:
expect(navigationTraceContext).not.toHaveProperty('parent_span_id');

expect(navigationTraceHeader).toEqual({
environment: 'production',
public_key: 'public',
sample_rate: '1',
sampled: 'true',
trace_id: navigationTraceContext?.trace_id,
sample_rand: expect.any(String),
});

expect(pageloadTraceContext?.trace_id).not.toEqual(navigationTraceContext?.trace_id);
expect(pageloadTraceHeader?.sample_rand).not.toEqual(navigationTraceHeader?.sample_rand);
},
);
2 changes: 1 addition & 1 deletion dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload-meta/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ sentryTest(
span_id: expect.stringMatching(/^[\da-f]{16}$/),
});
// navigation span is head of trace, so there's no parent span:
expect(navigationTraceContext?.trace_id).not.toHaveProperty('parent_span_id');
Copy link
Collaborator Author

@timfish timfish Jan 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor pointed out that the type/logic was wrong in this expection...

expect(navigationTraceContext).not.toHaveProperty('parent_span_id');

expect(navigationTraceHeader).toEqual({
environment: 'production',
Expand Down
10 changes: 10 additions & 0 deletions ...tegration-tests/suites/tracing/trace-lifetime/tracing-without-performance-headers/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as Sentry from '@sentry/browser';

window.Sentry = Sentry;

Sentry.init({
// in browser TwP means not setting tracesSampleRate but adding browserTracingIntegration,
dsn: 'https://[email protected]/1337',
integrations: [Sentry.browserTracingIntegration()],
tracePropagationTargets: ['http://sentry-test-site.example'],
});
9 changes: 9 additions & 0 deletions ...ion-tests/suites/tracing/trace-lifetime/tracing-without-performance-headers/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="errorBtn">Throw Error</button>
</body>
</html>
51 changes: 51 additions & 0 deletions ...tegration-tests/suites/tracing/trace-lifetime/tracing-without-performance-headers/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { expect } from '@playwright/test';
import { sentryTest } from '../../../../utils/fixtures';
import type { EventAndTraceHeader } from '../../../../utils/helpers';
import {
eventAndTraceHeaderRequestParser,
getFirstSentryEnvelopeRequest,
shouldSkipTracingTest,
} from '../../../../utils/helpers';

const META_TAG_TRACE_ID = '12345678901234567890123456789012';
const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod,sentry-sample_rand=0.42';

sentryTest('error on initial page has traceId from server timing headers', async ({ getLocalTestUrl, page }) => {
if (shouldSkipTracingTest()) {
sentryTest.skip();
}

const url = await getLocalTestUrl({
testDir: __dirname,
responseHeaders: {
'Server-Timing': `sentry-trace;desc=${META_TAG_TRACE_ID}-${META_TAG_PARENT_SPAN_ID}, baggage;desc="${META_TAG_BAGGAGE}"`,
},
});
await page.goto(url);

const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
page,
undefined,
eventAndTraceHeaderRequestParser,
);

await page.locator('#errorBtn').click();
const [errorEvent, errorTraceHeader] = await errorEventPromise;

expect(errorEvent.type).toEqual(undefined);
expect(errorEvent.contexts?.trace).toEqual({
trace_id: META_TAG_TRACE_ID,
parent_span_id: META_TAG_PARENT_SPAN_ID,
span_id: expect.stringMatching(/^[\da-f]{16}$/),
});

expect(errorTraceHeader).toEqual({
environment: 'prod',
public_key: 'public',
release: '1.0.0',
trace_id: META_TAG_TRACE_ID,
sample_rand: '0.42',
});
});
12 changes: 10 additions & 2 deletions packages/browser/src/tracing/browserTracingIntegration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,8 +594,9 @@ export const browserTracingIntegration = ((options: Partial<BrowserTracingOption
}
maybeEndActiveSpan();

const sentryTrace = traceOptions.sentryTrace || getMetaContent('sentry-trace');
const baggage = traceOptions.baggage || getMetaContent('baggage');
const sentryTrace =
traceOptions.sentryTrace || getMetaContent('sentry-trace') || getServerTiming('sentry-trace');
const baggage = traceOptions.baggage || getMetaContent('baggage') || getServerTiming('baggage');

const propagationContext = propagationContextFromHeaders(sentryTrace, baggage);

Expand Down Expand Up @@ -778,6 +779,13 @@ export function getMetaContent(metaName: string): string | undefined {
return metaTag?.getAttribute('content') || undefined;
}

/** Returns the description of a server timing entry */
export function getServerTiming(name: string): string | undefined {
const navigation = WINDOW.performance?.getEntriesByType?.('navigation')[0] as PerformanceNavigationTiming | undefined;
const entry = navigation?.serverTiming?.find(entry => entry.name === name);
return entry?.description;
}

/** Start listener for interaction transactions */
function registerInteractionListener(
client: Client,
Expand Down
Loading
Loading