Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ sentryTest('captures streamed interaction span tree. @firefox', async ({ browser
trace_id: pageloadSpan.trace_id, // same trace id as pageload
});

const loAFSpans = interactionSpanTree.filter(span => getSpanOp(span)?.startsWith('ui.long-animation-frame'));
const loAFSpans = interactionSpanTree.filter(span => getSpanOp(span)?.startsWith('ui.long_animation_frame'));
expect(loAFSpans).toHaveLength(browserName === 'chromium' ? 1 : 0);

const interactionSpan = interactionSpanTree.find(span => getSpanOp(span) === 'ui.interaction.click');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ sentryTest('should capture interaction transaction. @firefox', async ({ browserN
expect(eventData.platform).toBe('javascript');
expect(eventData.type).toBe('transaction');

const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long_animation_frame'));
expect(spans).toHaveLength(1);

const interactionSpan = spans![0];
Expand Down Expand Up @@ -64,7 +64,7 @@ sentryTest(
await page.waitForTimeout(1000);
await page.locator('[data-test-id=interaction-button]').click();
const envelope = await envelopePromise;
const spans = envelope[0].spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
const spans = envelope[0].spans?.filter(span => !span.op?.startsWith('ui.long_animation_frame'));
expect(spans).toHaveLength(1);
}
},
Expand All @@ -91,7 +91,7 @@ sentryTest(
const envelopes = await envelopePromise;
expect(envelopes).toHaveLength(1);
const eventData = envelopes[0];
const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long_animation_frame'));
expect(spans).toHaveLength(1);

const interactionSpan = spans![0];
Expand Down Expand Up @@ -122,7 +122,7 @@ sentryTest(
expect(envelopes).toHaveLength(1);

const eventData = envelopes[0];
const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long_animation_frame'));
expect(spans).toHaveLength(1);

const interactionSpan = spans![0];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ sentryTest(

const spans = await navigationSpansPromise;

const loafSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long-animation-frame'));
const loafSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long_animation_frame'));
expect(loafSpans).toHaveLength(0);
},
);
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ sentryTest(

expect(navigationTransactionEvent.contexts?.trace?.op).toBe('navigation');

const loafSpans = navigationTransactionEvent.spans?.filter(s => s.op?.startsWith('ui.long-animation-frame'));
const loafSpans = navigationTransactionEvent.spans?.filter(s => s.op?.startsWith('ui.long_animation_frame'));

expect(loafSpans?.length).toEqual(0);
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ sentryTest(
const spans = await spansPromise;
const pageloadSpan = spans.find(s => getSpanOp(s) === 'pageload')!;

const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long-animation-frame'));
const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long_animation_frame'));

expect(uiSpans.length).toBeGreaterThanOrEqual(1);

Expand All @@ -45,7 +45,7 @@ sentryTest(
value: 'https://sentry-test-site.example/path/to/script.js',
},
'browser.script.invoker_type': { type: 'string', value: 'classic-script' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long-animation-frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long_animation_frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: { type: 'string', value: 'auto.ui.browser.metrics' },
}),
}),
Expand Down Expand Up @@ -78,7 +78,7 @@ sentryTest('captures long animation frame span for event listener.', async ({ br
const spans = await spansPromise;
const pageloadSpan = spans.find(s => getSpanOp(s) === 'pageload')!;

const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long-animation-frame'));
const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long_animation_frame'));

expect(uiSpans.length).toBeGreaterThanOrEqual(2);

Expand All @@ -94,7 +94,7 @@ sentryTest('captures long animation frame span for event listener.', async ({ br
'browser.script.invoker': { type: 'string', value: 'BUTTON#clickme.onclick' },
'browser.script.invoker_type': { type: 'string', value: 'event-listener' },
'code.filepath': { type: 'string', value: 'https://sentry-test-site.example/path/to/script.js' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long-animation-frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long_animation_frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: { type: 'string', value: 'auto.ui.browser.metrics' },
}),
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ sentryTest(

const eventData = await promise;

const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame'));
const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long_animation_frame'));

expect(uiSpans?.length).toBeGreaterThanOrEqual(1);

Expand All @@ -36,15 +36,15 @@ sentryTest(
)!;
expect(topLevelUISpan).toEqual(
expect.objectContaining({
op: 'ui.long-animation-frame',
op: 'ui.long_animation_frame',
description: 'Main UI thread blocked',
parent_span_id: eventData.contexts?.trace?.span_id,
data: {
'code.filepath': 'https://sentry-test-site.example/path/to/script.js',
'browser.script.source_char_position': 0,
'browser.script.invoker': 'https://sentry-test-site.example/path/to/script.js',
'browser.script.invoker_type': 'classic-script',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long_animation_frame',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
},
}),
Expand Down Expand Up @@ -83,22 +83,22 @@ sentryTest(

const eventData = await promise;

const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame')) || [];
const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long_animation_frame')) || [];

expect(uiSpans.length).toBeGreaterThanOrEqual(2);

const eventListenerUISpan = uiSpans.find(span => span.data['browser.script.invoker'] === 'BUTTON#clickme.onclick')!;

expect(eventListenerUISpan).toEqual(
expect.objectContaining({
op: 'ui.long-animation-frame',
op: 'ui.long_animation_frame',
description: 'Main UI thread blocked',
parent_span_id: eventData.contexts?.trace?.span_id,
data: {
'browser.script.invoker': 'BUTTON#clickme.onclick',
'browser.script.invoker_type': 'event-listener',
'code.filepath': 'https://sentry-test-site.example/path/to/script.js',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long_animation_frame',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
},
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ sentryTest(
const spans = await spansPromise;
const pageloadSpan = spans.find(s => getSpanOp(s) === 'pageload')!;

const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long-animation-frame'));
const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long_animation_frame'));

expect(uiSpans.length).toBeGreaterThanOrEqual(1);

Expand All @@ -47,7 +47,7 @@ sentryTest(
value: 'https://sentry-test-site.example/path/to/script.js',
},
'browser.script.invoker_type': { type: 'string', value: 'classic-script' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long-animation-frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long_animation_frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: { type: 'string', value: 'auto.ui.browser.metrics' },
}),
}),
Expand Down Expand Up @@ -80,7 +80,7 @@ sentryTest('captures long animation frame span for event listener.', async ({ br
const spans = await spansPromise;
const pageloadSpan = spans.find(s => getSpanOp(s) === 'pageload')!;

const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long-animation-frame'));
const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui.long_animation_frame'));

expect(uiSpans.length).toBeGreaterThanOrEqual(2);

Expand All @@ -96,7 +96,7 @@ sentryTest('captures long animation frame span for event listener.', async ({ br
'browser.script.invoker': { type: 'string', value: 'BUTTON#clickme.onclick' },
'browser.script.invoker_type': { type: 'string', value: 'event-listener' },
'code.filepath': { type: 'string', value: 'https://sentry-test-site.example/path/to/script.js' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long-animation-frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: { type: 'string', value: 'ui.long_animation_frame' },
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: { type: 'string', value: 'auto.ui.browser.metrics' },
}),
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ sentryTest(

const eventData = await promise;

const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame'));
const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long_animation_frame'));

expect(uiSpans?.length).toBeGreaterThanOrEqual(1);

Expand All @@ -38,15 +38,15 @@ sentryTest(
)!;
expect(topLevelUISpan).toEqual(
expect.objectContaining({
op: 'ui.long-animation-frame',
op: 'ui.long_animation_frame',
description: 'Main UI thread blocked',
parent_span_id: eventData.contexts?.trace?.span_id,
data: {
'code.filepath': 'https://sentry-test-site.example/path/to/script.js',
'browser.script.source_char_position': 0,
'browser.script.invoker': 'https://sentry-test-site.example/path/to/script.js',
'browser.script.invoker_type': 'classic-script',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long_animation_frame',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
},
}),
Expand Down Expand Up @@ -85,22 +85,22 @@ sentryTest(

const eventData = await promise;

const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame')) || [];
const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long_animation_frame')) || [];

expect(uiSpans.length).toBeGreaterThanOrEqual(2);

const eventListenerUISpan = uiSpans.find(span => span.data['browser.script.invoker'] === 'BUTTON#clickme.onclick')!;

expect(eventListenerUISpan).toEqual(
expect.objectContaining({
op: 'ui.long-animation-frame',
op: 'ui.long_animation_frame',
description: 'Main UI thread blocked',
parent_span_id: eventData.contexts?.trace?.span_id,
data: {
'browser.script.invoker': 'BUTTON#clickme.onclick',
'browser.script.invoker_type': 'event-listener',
'code.filepath': 'https://sentry-test-site.example/path/to/script.js',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long_animation_frame',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
},
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ sentryTest(
const navigationSpan = spans.find(s => getSpanOp(s) === 'navigation');
expect(navigationSpan).toBeDefined();

const longTaskSpans = spans.filter(s => getSpanOp(s) === 'ui.long-task');
const longTaskSpans = spans.filter(s => getSpanOp(s) === 'ui.long_task');
expect(longTaskSpans).toHaveLength(0);
},
);
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ sentryTest(

expect(navigationTransactionEvent.contexts?.trace?.op).toBe('navigation');

const longTaskSpans = navigationTransactionEvent?.spans?.filter(span => span.op === 'ui.long-task');
const longTaskSpans = navigationTransactionEvent?.spans?.filter(span => span.op === 'ui.long_task');
expect(longTaskSpans).toHaveLength(0);
},
);
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ sentryTest('captures long task.', async ({ browserName, getLocalTestUrl, page })
name: 'Main UI thread blocked',
parent_span_id: pageloadSpan.span_id,
attributes: expect.objectContaining({
'sentry.op': { type: 'string', value: 'ui.long-task' },
'sentry.op': { type: 'string', value: 'ui.long_task' },
}),
}),
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ sentryTest('should capture long task.', async ({ browserName, getLocalTestUrl, p
const [firstUISpan] = uiSpans || [];
expect(firstUISpan).toEqual(
expect.objectContaining({
op: 'ui.long-task',
op: 'ui.long_task',
description: 'Main UI thread blocked',
parent_span_id: eventData.contexts?.trace?.span_id,
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ sentryTest('should capture long task.', async ({ browserName, getLocalTestUrl, p
const [firstUISpan] = uiSpans || [];
expect(firstUISpan).toEqual(
expect.objectContaining({
op: 'ui.long-task',
op: 'ui.long_task',
description: 'Main UI thread blocked',
parent_span_id: eventData.contexts?.trace?.span_id,
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ sentryTest('should add browser-related spans to pageload transaction', async ({
const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
const browserSpans = eventData.spans?.filter(({ op }) => op?.startsWith('browser'));

// Spans `domContentLoadedEvent`, `connect`, `cache` and `DNS` are not
// Spans `dom_content_loaded_event`, `connect`, `cache` and `dns` are not
// always inside `pageload` transaction.
expect(browserSpans?.length).toBeGreaterThanOrEqual(4);

['loadEvent', 'request', 'response'].forEach(eventDesc =>
['load_event', 'request', 'response'].forEach(eventDesc =>
expect(browserSpans).toContainEqual(
expect.objectContaining({
op: `browser.${eventDesc}`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ sentryTest('should add browser-related spans to pageload transaction', async ({
const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
const browserSpans = eventData.spans?.filter(({ op }) => op?.startsWith('browser'));

// Spans `domContentLoadedEvent`, `connect`, `cache` and `DNS` are not
// Spans `dom_content_loaded_event`, `connect`, `cache` and `dns` are not
// always inside `pageload` transaction.
expect(browserSpans?.length).toBeGreaterThanOrEqual(4);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ test('Captures a pageload transaction', async ({ page }) => {
expect(transactionEvent.spans).toContainEqual({
data: {
'sentry.origin': 'auto.ui.browser.metrics',
'sentry.op': 'browser.domContentLoadedEvent',
'sentry.op': 'browser.dom_content_loaded_event',
},
description: page.url(),
op: 'browser.domContentLoadedEvent',
op: 'browser.dom_content_loaded_event',
parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
span_id: expect.stringMatching(/[a-f0-9]{16}/),
start_timestamp: expect.any(Number),
Expand Down
18 changes: 10 additions & 8 deletions packages/browser-utils/src/metrics/browserMetrics.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export function startTrackingLongTasks(): void {

startAndEndSpan(parent, startTime, startTime + duration, {
name: 'Main UI thread blocked',
op: 'ui.long-task',
op: 'ui.long_task',

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can those attributes be imported from sentry-conventions/op?

attributes: {
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
},
Expand Down Expand Up @@ -190,7 +190,7 @@ export function startTrackingLongAnimationFrames(): void {

startAndEndSpan(parent, startTime, startTime + duration, {
name: 'Main UI thread blocked',
op: 'ui.long-animation-frame',
op: 'ui.long_animation_frame',

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

same

attributes,
});
}
Expand Down Expand Up @@ -297,7 +297,7 @@ interface AddPerformanceEntriesOptions {
*
* Default: []
*/
ignoreResourceSpans: Array<'resouce.script' | 'resource.css' | 'resource.img' | 'resource.other' | string>;
ignoreResourceSpans: Array<'resource.script' | 'resource.css' | 'resource.img' | 'resource.other' | string>;

/**
* Whether span streaming is enabled.
Expand Down Expand Up @@ -496,12 +496,14 @@ function _addPaintSpan(
* exported only for tests
*/
export function _addNavigationSpans(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
(['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'] as const).forEach(event => {
_addPerformanceNavigationTiming(span, entry, event, timeOrigin);
});
_addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
_addPerformanceNavigationTiming(span, entry, 'unloadEvent', timeOrigin, 'unload_event');
_addPerformanceNavigationTiming(span, entry, 'redirect', timeOrigin, 'redirect');
_addPerformanceNavigationTiming(span, entry, 'domContentLoadedEvent', timeOrigin, 'dom_content_loaded_event');
_addPerformanceNavigationTiming(span, entry, 'loadEvent', timeOrigin, 'load_event');
_addPerformanceNavigationTiming(span, entry, 'connect', timeOrigin, 'connect');
_addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'tls_ssl');
_addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
_addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');
_addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'dns');

_addRequest(span, entry, timeOrigin);
}
Expand Down
Loading
Loading