ref(browser): Refactor type casts of browser metrics#14542

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

Merged
mydea merged 6 commits into from
Dec 11, 2024
Merged

ref(browser): Refactor type casts of browser metrics #14542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f9f278d
ref(browser): Refactor type casts of browser metrics
mydea Dec 2, 2024
6b9240f
small ref to safe bundle size
mydea Dec 6, 2024
f4cc141
small ref
mydea Dec 6, 2024
a958a23
small refs
mydea Dec 6, 2024
7fd8066
default?
mydea Dec 6, 2024
024dd24
fix test
mydea Dec 6, 2024
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
110 changes: 69 additions & 41 deletions packages/browser-utils/src/metrics/browserMetrics.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
const performance = getBrowserPerformanceAPI();
if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
// Gatekeeper if performance API not available
return;
}
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
performanceEntries.slice(_performanceCursor).forEach(entry => {
const startTime = msToSec(entry.startTime);
const duration = msToSec(
// Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

switch (entry.entryType) {
case 'navigation': {
_addNavigationSpans(span, entry, timeOrigin);
_addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
break;
}
case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
break;
}
case 'resource': {
_addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
_addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
break;
}
default:
// Ignore other entry types.
}
});
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
_measurements = {};
}

/** Create measure related spans */
/**
* Create measure related spans.
* Exported only for tests.
*/
export function _addMeasureSpans(
span: Span,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
entry: Record<string, any>,
entry: PerformanceEntry,
startTime: number,
duration: number,
timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
_addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
_addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
_addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
_addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

_addRequest(span, entry, timeOrigin);
}

type StartEventName =
| 'secureConnection'
| 'fetch'
| 'domainLookup'
| 'unloadEvent'
| 'redirect'
| 'connect'
| 'domContentLoadedEvent'
| 'loadEvent';

type EndEventName =
| 'connectEnd'
| 'domainLookupStart'
| 'domainLookupEnd'
| 'unloadEventEnd'
| 'redirectEnd'
| 'connectEnd'
| 'domContentLoadedEventEnd'
| 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
span: Span,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
entry: Record<string, any>,
event: string,
entry: PerformanceNavigationTiming,
event: StartEventName,
timeOrigin: number,
name?: string,
eventEnd?: string,
name: string = event,
): void {
const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
const start = entry[`${event}Start`] as number | undefined;
const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
const end = entry[eventEnd];
const start = entry[`${event}Start`];
if (!start || !end) {
return;
}
startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
op: `browser.${name || event}`,
op: `browser.${name}`,
name: entry.name,
attributes: {
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
},
});
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
if (event === 'secureConnection') {
return 'connectEnd';
}
if (event === 'fetch') {
return 'domainLookupStart';
}
return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
}
}

export interface ResourceEntry extends Record<string, unknown> {
initiatorType?: string;
transferSize?: number;
encodedBodySize?: number;
decodedBodySize?: number;
renderBlockingStatus?: string;
deliveryType?: string;
}

/** Create resource-related spans */
/**
* Create resource-related spans.
* Exported only for tests.
*/
export function _addResourceSpans(
span: Span,
entry: ResourceEntry,
entry: PerformanceResourceTiming,
resourceUrl: string,
startTime: number,
duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

if (entry.deliveryType != null) {
attributes['http.response_delivery_type'] = entry.deliveryType;
// `deliveryType` is experimental and does not exist everywhere
const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
if (deliveryType != null) {
attributes['http.response_delivery_type'] = deliveryType;
}

if ('renderBlockingStatus' in entry) {
attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
// Types do not reflect this property yet
const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
.renderBlockingStatus;
if (renderBlockingStatus) {
attributes['resource.render_blocking_status'] = renderBlockingStatus;
}

if (parsedUrl.protocol) {
attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
}
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
attributes: SpanAttributes,
entry: ResourceEntry,
key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
entry: PerformanceResourceTiming,
key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
const entryVal = entry[key];
Expand Down
49 changes: 29 additions & 20 deletions packages/browser-utils/test/browser/browserMetrics.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
spans.push(span);
});

const entry: Omit<PerformanceMeasure, 'toJSON'> = {
const entry = {
entryType: 'measure',
name: 'measure-1',
duration: 10,
startTime: 12,
detail: undefined,
};
} as PerformanceEntry;

const timeOrigin = 100;
const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
spans.push(span);
});

const entry: ResourceEntry = {
const entry = mockPerformanceResourceTiming({
initiatorType: 'xmlhttprequest',
transferSize: 256,
encodedBodySize: 256,
decodedBodySize: 256,
renderBlockingStatus: 'non-blocking',
};
});
_addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
spans.push(span);
});

const entry: ResourceEntry = {
const entry = mockPerformanceResourceTiming({
initiatorType: 'fetch',
transferSize: 256,
encodedBodySize: 256,
decodedBodySize: 256,
renderBlockingStatus: 'non-blocking',
};
});
_addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
spans.push(span);
});

const entry: ResourceEntry = {
const entry = mockPerformanceResourceTiming({
initiatorType: 'css',
transferSize: 256,
encodedBodySize: 456,
decodedBodySize: 593,
renderBlockingStatus: 'non-blocking',
};
});

const timeOrigin = 100;
const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
];
for (let i = 0; i < table.length; i++) {
const { initiatorType, op } = table[i]!;
const entry: ResourceEntry = {
const entry = mockPerformanceResourceTiming({
initiatorType,
};
});
_addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
spans.push(span);
});

const entry: ResourceEntry = {
const entry = mockPerformanceResourceTiming({
initiatorType: 'css',
transferSize: 0,
encodedBodySize: 0,
decodedBodySize: 0,
renderBlockingStatus: 'non-blocking',
};
});

_addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
spans.push(span);
});

const entry: ResourceEntry = {
const entry = mockPerformanceResourceTiming({
initiatorType: 'css',
transferSize: 2147483647,
encodedBodySize: 2147483647,
decodedBodySize: 2147483647,
};
});

_addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
transferSize: null,
encodedBodySize: null,
decodedBodySize: null,
} as unknown as ResourceEntry;
} as unknown as PerformanceResourceTiming;

_addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

// resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
// i.e. better but not yet widely supported way to check for browser cache hit
it.each(['cache', 'navigational-prefetch', ''])(
it.each(['cache', 'navigational-prefetch', ''] as const)(
'attaches delivery type ("%s") to resource spans if available',
deliveryType => {
const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
spans.push(span);
});

const entry: ResourceEntry = {
const entry = mockPerformanceResourceTiming({
initiatorType: 'css',
transferSize: 0,
encodedBodySize: 0,
decodedBodySize: 0,
deliveryType,
};
});

_addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
ref(browser): Refactor type casts of browser metrics#14542

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

 Merged

mydea
merged 6 commits into

from

Dec 11, 2024
 Merged


ref(browser): Refactor type casts of browser metrics
#14542
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
f9f278d

ref(browser): Refactor type casts of browser metrics


mydea Dec 2, 2024
6b9240f

small ref to safe bundle size


mydea Dec 6, 2024
f4cc141

small ref


mydea Dec 6, 2024
a958a23

small refs


mydea Dec 6, 2024
7fd8066

default?


mydea Dec 6, 2024
024dd24

fix test


mydea Dec 6, 2024

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


110 changes: 69 additions & 41 deletions
packages/browser-utils/src/metrics/browserMetrics.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
 const performance = getBrowserPerformanceAPI();
 if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
 if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
 // Gatekeeper if performance API not available
 return;
 }
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
 performanceEntries.slice(_performanceCursor).forEach(entry => {
 const startTime = msToSec(entry.startTime);
 const duration = msToSec(
 // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 switch (entry.entryType) {
 case 'navigation': {
 _addNavigationSpans(span, entry, timeOrigin);
 _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
 break;
 }
 case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 break;
 }
 case 'resource': {
 _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
 _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
 break;
 }
 default:
 // Ignore other entry types.
 }
 });
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 _measurements = {};
}

/** Create measure related spans */
/**
 * Create measure related spans.
 * Exported only for tests.
 */
export function _addMeasureSpans(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 entry: PerformanceEntry,
 startTime: number,
 duration: number,
 timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
 ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
 _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
 _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

 _addRequest(span, entry, timeOrigin);
}

type StartEventName =
 | 'secureConnection'
 | 'fetch'
 | 'domainLookup'
 | 'unloadEvent'
 | 'redirect'
 | 'connect'
 | 'domContentLoadedEvent'
 | 'loadEvent';

type EndEventName =
 | 'connectEnd'
 | 'domainLookupStart'
 | 'domainLookupEnd'
 | 'unloadEventEnd'
 | 'redirectEnd'
 | 'connectEnd'
 | 'domContentLoadedEventEnd'
 | 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 event: string,
 entry: PerformanceNavigationTiming,
 event: StartEventName,
 timeOrigin: number,
 name?: string,
 eventEnd?: string,
 name: string = event,
): void {
 const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
 const start = entry[`${event}Start`] as number | undefined;
 const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
 const end = entry[eventEnd];
 const start = entry[`${event}Start`];
 if (!start || !end) {
 return;
 }
 startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
 op: `browser.${name || event}`,
 op: `browser.${name}`,
 name: entry.name,
 attributes: {
 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
 },
 });
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
 if (event === 'secureConnection') {
 return 'connectEnd';
 }
 if (event === 'fetch') {
 return 'domainLookupStart';
 }
 return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
 const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
 const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
 const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
 }
}

export interface ResourceEntry extends Record<string, unknown> {
 initiatorType?: string;
 transferSize?: number;
 encodedBodySize?: number;
 decodedBodySize?: number;
 renderBlockingStatus?: string;
 deliveryType?: string;
}

/** Create resource-related spans */
/**
 * Create resource-related spans.
 * Exported only for tests.
 */
export function _addResourceSpans(
 span: Span,
 entry: ResourceEntry,
 entry: PerformanceResourceTiming,
 resourceUrl: string,
 startTime: number,
 duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
 setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
 setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

 if (entry.deliveryType != null) {
 attributes['http.response_delivery_type'] = entry.deliveryType;
 // `deliveryType` is experimental and does not exist everywhere
 const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
 if (deliveryType != null) {
 attributes['http.response_delivery_type'] = deliveryType;
 }

 if ('renderBlockingStatus' in entry) {
 attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
 // Types do not reflect this property yet
 const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
 .renderBlockingStatus;
 if (renderBlockingStatus) {
 attributes['resource.render_blocking_status'] = renderBlockingStatus;
 }

 if (parsedUrl.protocol) {
 attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
 }
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
 attributes: SpanAttributes,
 entry: ResourceEntry,
 key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 entry: PerformanceResourceTiming,
 key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
 const entryVal = entry[key];
Expand Down

49 changes: 29 additions & 20 deletions
packages/browser-utils/test/browser/browserMetrics.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
 spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
 renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
 deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
 data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
 return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
 const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
 spans.push(span);
 });

 const entry: Omit<PerformanceMeasure, 'toJSON'> = {
 const entry = {
 entryType: 'measure',
 name: 'measure-1',
 duration: 10,
 startTime: 12,
 detail: undefined,
 };
 } as PerformanceEntry;

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'xmlhttprequest',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'fetch',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 256,
 encodedBodySize: 456,
 decodedBodySize: 593,
 renderBlockingStatus: 'non-blocking',
 };
 });

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
 ];
 for (let i = 0; i < table.length; i++) {
 const { initiatorType, op } = table[i]!;
 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType,
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

 expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 renderBlockingStatus: 'non-blocking',
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 2147483647,
 encodedBodySize: 2147483647,
 decodedBodySize: 2147483647,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
 transferSize: null,
 encodedBodySize: null,
 decodedBodySize: null,
 } as unknown as ResourceEntry;
 } as unknown as PerformanceResourceTiming;

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

 // resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
 // i.e. better but not yet widely supported way to check for browser cache hit
 it.each(['cache', 'navigational-prefetch', ''])(
 it.each(['cache', 'navigational-prefetch', ''] as const)(
 'attaches delivery type ("%s") to resource spans if available',
 deliveryType => {
 const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 deliveryType,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ref(browser): Refactor type casts of browser metrics#14542

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

 Merged

mydea
merged 6 commits into

from

Dec 11, 2024
 Merged


ref(browser): Refactor type casts of browser metrics
#14542
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
f9f278d

ref(browser): Refactor type casts of browser metrics


mydea Dec 2, 2024
6b9240f

small ref to safe bundle size


mydea Dec 6, 2024
f4cc141

small ref


mydea Dec 6, 2024
a958a23

small refs


mydea Dec 6, 2024
7fd8066

default?


mydea Dec 6, 2024
024dd24

fix test


mydea Dec 6, 2024

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


110 changes: 69 additions & 41 deletions
packages/browser-utils/src/metrics/browserMetrics.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
 const performance = getBrowserPerformanceAPI();
 if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
 if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
 // Gatekeeper if performance API not available
 return;
 }
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
 performanceEntries.slice(_performanceCursor).forEach(entry => {
 const startTime = msToSec(entry.startTime);
 const duration = msToSec(
 // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 switch (entry.entryType) {
 case 'navigation': {
 _addNavigationSpans(span, entry, timeOrigin);
 _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
 break;
 }
 case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 break;
 }
 case 'resource': {
 _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
 _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
 break;
 }
 default:
 // Ignore other entry types.
 }
 });
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 _measurements = {};
}

/** Create measure related spans */
/**
 * Create measure related spans.
 * Exported only for tests.
 */
export function _addMeasureSpans(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 entry: PerformanceEntry,
 startTime: number,
 duration: number,
 timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
 ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
 _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
 _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

 _addRequest(span, entry, timeOrigin);
}

type StartEventName =
 | 'secureConnection'
 | 'fetch'
 | 'domainLookup'
 | 'unloadEvent'
 | 'redirect'
 | 'connect'
 | 'domContentLoadedEvent'
 | 'loadEvent';

type EndEventName =
 | 'connectEnd'
 | 'domainLookupStart'
 | 'domainLookupEnd'
 | 'unloadEventEnd'
 | 'redirectEnd'
 | 'connectEnd'
 | 'domContentLoadedEventEnd'
 | 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 event: string,
 entry: PerformanceNavigationTiming,
 event: StartEventName,
 timeOrigin: number,
 name?: string,
 eventEnd?: string,
 name: string = event,
): void {
 const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
 const start = entry[`${event}Start`] as number | undefined;
 const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
 const end = entry[eventEnd];
 const start = entry[`${event}Start`];
 if (!start || !end) {
 return;
 }
 startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
 op: `browser.${name || event}`,
 op: `browser.${name}`,
 name: entry.name,
 attributes: {
 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
 },
 });
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
 if (event === 'secureConnection') {
 return 'connectEnd';
 }
 if (event === 'fetch') {
 return 'domainLookupStart';
 }
 return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
 const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
 const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
 const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
 }
}

export interface ResourceEntry extends Record<string, unknown> {
 initiatorType?: string;
 transferSize?: number;
 encodedBodySize?: number;
 decodedBodySize?: number;
 renderBlockingStatus?: string;
 deliveryType?: string;
}

/** Create resource-related spans */
/**
 * Create resource-related spans.
 * Exported only for tests.
 */
export function _addResourceSpans(
 span: Span,
 entry: ResourceEntry,
 entry: PerformanceResourceTiming,
 resourceUrl: string,
 startTime: number,
 duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
 setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
 setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

 if (entry.deliveryType != null) {
 attributes['http.response_delivery_type'] = entry.deliveryType;
 // `deliveryType` is experimental and does not exist everywhere
 const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
 if (deliveryType != null) {
 attributes['http.response_delivery_type'] = deliveryType;
 }

 if ('renderBlockingStatus' in entry) {
 attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
 // Types do not reflect this property yet
 const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
 .renderBlockingStatus;
 if (renderBlockingStatus) {
 attributes['resource.render_blocking_status'] = renderBlockingStatus;
 }

 if (parsedUrl.protocol) {
 attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
 }
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
 attributes: SpanAttributes,
 entry: ResourceEntry,
 key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 entry: PerformanceResourceTiming,
 key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
 const entryVal = entry[key];
Expand Down

49 changes: 29 additions & 20 deletions
packages/browser-utils/test/browser/browserMetrics.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
 spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
 renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
 deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
 data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
 return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
 const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
 spans.push(span);
 });

 const entry: Omit<PerformanceMeasure, 'toJSON'> = {
 const entry = {
 entryType: 'measure',
 name: 'measure-1',
 duration: 10,
 startTime: 12,
 detail: undefined,
 };
 } as PerformanceEntry;

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'xmlhttprequest',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'fetch',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 256,
 encodedBodySize: 456,
 decodedBodySize: 593,
 renderBlockingStatus: 'non-blocking',
 };
 });

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
 ];
 for (let i = 0; i < table.length; i++) {
 const { initiatorType, op } = table[i]!;
 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType,
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

 expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 renderBlockingStatus: 'non-blocking',
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 2147483647,
 encodedBodySize: 2147483647,
 decodedBodySize: 2147483647,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
 transferSize: null,
 encodedBodySize: null,
 decodedBodySize: null,
 } as unknown as ResourceEntry;
 } as unknown as PerformanceResourceTiming;

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

 // resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
 // i.e. better but not yet widely supported way to check for browser cache hit
 it.each(['cache', 'navigational-prefetch', ''])(
 it.each(['cache', 'navigational-prefetch', ''] as const)(
 'attaches delivery type ("%s") to resource spans if available',
 deliveryType => {
 const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 deliveryType,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ref(browser): Refactor type casts of browser metrics#14542

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

 Merged

mydea
merged 6 commits into

from

Dec 11, 2024
 Merged


ref(browser): Refactor type casts of browser metrics
#14542
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
f9f278d

ref(browser): Refactor type casts of browser metrics


mydea Dec 2, 2024
6b9240f

small ref to safe bundle size


mydea Dec 6, 2024
f4cc141

small ref


mydea Dec 6, 2024
a958a23

small refs


mydea Dec 6, 2024
7fd8066

default?


mydea Dec 6, 2024
024dd24

fix test


mydea Dec 6, 2024

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


110 changes: 69 additions & 41 deletions
packages/browser-utils/src/metrics/browserMetrics.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
 const performance = getBrowserPerformanceAPI();
 if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
 if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
 // Gatekeeper if performance API not available
 return;
 }
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
 performanceEntries.slice(_performanceCursor).forEach(entry => {
 const startTime = msToSec(entry.startTime);
 const duration = msToSec(
 // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 switch (entry.entryType) {
 case 'navigation': {
 _addNavigationSpans(span, entry, timeOrigin);
 _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
 break;
 }
 case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 break;
 }
 case 'resource': {
 _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
 _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
 break;
 }
 default:
 // Ignore other entry types.
 }
 });
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 _measurements = {};
}

/** Create measure related spans */
/**
 * Create measure related spans.
 * Exported only for tests.
 */
export function _addMeasureSpans(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 entry: PerformanceEntry,
 startTime: number,
 duration: number,
 timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
 ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
 _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
 _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

 _addRequest(span, entry, timeOrigin);
}

type StartEventName =
 | 'secureConnection'
 | 'fetch'
 | 'domainLookup'
 | 'unloadEvent'
 | 'redirect'
 | 'connect'
 | 'domContentLoadedEvent'
 | 'loadEvent';

type EndEventName =
 | 'connectEnd'
 | 'domainLookupStart'
 | 'domainLookupEnd'
 | 'unloadEventEnd'
 | 'redirectEnd'
 | 'connectEnd'
 | 'domContentLoadedEventEnd'
 | 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 event: string,
 entry: PerformanceNavigationTiming,
 event: StartEventName,
 timeOrigin: number,
 name?: string,
 eventEnd?: string,
 name: string = event,
): void {
 const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
 const start = entry[`${event}Start`] as number | undefined;
 const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
 const end = entry[eventEnd];
 const start = entry[`${event}Start`];
 if (!start || !end) {
 return;
 }
 startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
 op: `browser.${name || event}`,
 op: `browser.${name}`,
 name: entry.name,
 attributes: {
 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
 },
 });
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
 if (event === 'secureConnection') {
 return 'connectEnd';
 }
 if (event === 'fetch') {
 return 'domainLookupStart';
 }
 return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
 const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
 const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
 const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
 }
}

export interface ResourceEntry extends Record<string, unknown> {
 initiatorType?: string;
 transferSize?: number;
 encodedBodySize?: number;
 decodedBodySize?: number;
 renderBlockingStatus?: string;
 deliveryType?: string;
}

/** Create resource-related spans */
/**
 * Create resource-related spans.
 * Exported only for tests.
 */
export function _addResourceSpans(
 span: Span,
 entry: ResourceEntry,
 entry: PerformanceResourceTiming,
 resourceUrl: string,
 startTime: number,
 duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
 setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
 setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

 if (entry.deliveryType != null) {
 attributes['http.response_delivery_type'] = entry.deliveryType;
 // `deliveryType` is experimental and does not exist everywhere
 const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
 if (deliveryType != null) {
 attributes['http.response_delivery_type'] = deliveryType;
 }

 if ('renderBlockingStatus' in entry) {
 attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
 // Types do not reflect this property yet
 const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
 .renderBlockingStatus;
 if (renderBlockingStatus) {
 attributes['resource.render_blocking_status'] = renderBlockingStatus;
 }

 if (parsedUrl.protocol) {
 attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
 }
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
 attributes: SpanAttributes,
 entry: ResourceEntry,
 key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 entry: PerformanceResourceTiming,
 key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
 const entryVal = entry[key];
Expand Down

49 changes: 29 additions & 20 deletions
packages/browser-utils/test/browser/browserMetrics.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
 spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
 renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
 deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
 data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
 return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
 const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
 spans.push(span);
 });

 const entry: Omit<PerformanceMeasure, 'toJSON'> = {
 const entry = {
 entryType: 'measure',
 name: 'measure-1',
 duration: 10,
 startTime: 12,
 detail: undefined,
 };
 } as PerformanceEntry;

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'xmlhttprequest',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'fetch',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 256,
 encodedBodySize: 456,
 decodedBodySize: 593,
 renderBlockingStatus: 'non-blocking',
 };
 });

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
 ];
 for (let i = 0; i < table.length; i++) {
 const { initiatorType, op } = table[i]!;
 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType,
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

 expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 renderBlockingStatus: 'non-blocking',
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 2147483647,
 encodedBodySize: 2147483647,
 decodedBodySize: 2147483647,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
 transferSize: null,
 encodedBodySize: null,
 decodedBodySize: null,
 } as unknown as ResourceEntry;
 } as unknown as PerformanceResourceTiming;

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

 // resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
 // i.e. better but not yet widely supported way to check for browser cache hit
 it.each(['cache', 'navigational-prefetch', ''])(
 it.each(['cache', 'navigational-prefetch', ''] as const)(
 'attaches delivery type ("%s") to resource spans if available',
 deliveryType => {
 const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 deliveryType,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
ref(browser): Refactor type casts of browser metrics#14542

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

 Merged

mydea
merged 6 commits into

from

Dec 11, 2024
 Merged


ref(browser): Refactor type casts of browser metrics
#14542
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
f9f278d

ref(browser): Refactor type casts of browser metrics


mydea Dec 2, 2024
6b9240f

small ref to safe bundle size


mydea Dec 6, 2024
f4cc141

small ref


mydea Dec 6, 2024
a958a23

small refs


mydea Dec 6, 2024
7fd8066

default?


mydea Dec 6, 2024
024dd24

fix test


mydea Dec 6, 2024

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


110 changes: 69 additions & 41 deletions
packages/browser-utils/src/metrics/browserMetrics.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
 const performance = getBrowserPerformanceAPI();
 if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
 if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
 // Gatekeeper if performance API not available
 return;
 }
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
 performanceEntries.slice(_performanceCursor).forEach(entry => {
 const startTime = msToSec(entry.startTime);
 const duration = msToSec(
 // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 switch (entry.entryType) {
 case 'navigation': {
 _addNavigationSpans(span, entry, timeOrigin);
 _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
 break;
 }
 case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 break;
 }
 case 'resource': {
 _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
 _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
 break;
 }
 default:
 // Ignore other entry types.
 }
 });
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 _measurements = {};
}

/** Create measure related spans */
/**
 * Create measure related spans.
 * Exported only for tests.
 */
export function _addMeasureSpans(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 entry: PerformanceEntry,
 startTime: number,
 duration: number,
 timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
 ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
 _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
 _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

 _addRequest(span, entry, timeOrigin);
}

type StartEventName =
 | 'secureConnection'
 | 'fetch'
 | 'domainLookup'
 | 'unloadEvent'
 | 'redirect'
 | 'connect'
 | 'domContentLoadedEvent'
 | 'loadEvent';

type EndEventName =
 | 'connectEnd'
 | 'domainLookupStart'
 | 'domainLookupEnd'
 | 'unloadEventEnd'
 | 'redirectEnd'
 | 'connectEnd'
 | 'domContentLoadedEventEnd'
 | 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 event: string,
 entry: PerformanceNavigationTiming,
 event: StartEventName,
 timeOrigin: number,
 name?: string,
 eventEnd?: string,
 name: string = event,
): void {
 const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
 const start = entry[`${event}Start`] as number | undefined;
 const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
 const end = entry[eventEnd];
 const start = entry[`${event}Start`];
 if (!start || !end) {
 return;
 }
 startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
 op: `browser.${name || event}`,
 op: `browser.${name}`,
 name: entry.name,
 attributes: {
 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
 },
 });
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
 if (event === 'secureConnection') {
 return 'connectEnd';
 }
 if (event === 'fetch') {
 return 'domainLookupStart';
 }
 return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
 const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
 const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
 const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
 }
}

export interface ResourceEntry extends Record<string, unknown> {
 initiatorType?: string;
 transferSize?: number;
 encodedBodySize?: number;
 decodedBodySize?: number;
 renderBlockingStatus?: string;
 deliveryType?: string;
}

/** Create resource-related spans */
/**
 * Create resource-related spans.
 * Exported only for tests.
 */
export function _addResourceSpans(
 span: Span,
 entry: ResourceEntry,
 entry: PerformanceResourceTiming,
 resourceUrl: string,
 startTime: number,
 duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
 setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
 setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

 if (entry.deliveryType != null) {
 attributes['http.response_delivery_type'] = entry.deliveryType;
 // `deliveryType` is experimental and does not exist everywhere
 const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
 if (deliveryType != null) {
 attributes['http.response_delivery_type'] = deliveryType;
 }

 if ('renderBlockingStatus' in entry) {
 attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
 // Types do not reflect this property yet
 const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
 .renderBlockingStatus;
 if (renderBlockingStatus) {
 attributes['resource.render_blocking_status'] = renderBlockingStatus;
 }

 if (parsedUrl.protocol) {
 attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
 }
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
 attributes: SpanAttributes,
 entry: ResourceEntry,
 key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 entry: PerformanceResourceTiming,
 key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
 const entryVal = entry[key];
Expand Down

49 changes: 29 additions & 20 deletions
packages/browser-utils/test/browser/browserMetrics.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
 spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
 renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
 deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
 data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
 return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
 const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
 spans.push(span);
 });

 const entry: Omit<PerformanceMeasure, 'toJSON'> = {
 const entry = {
 entryType: 'measure',
 name: 'measure-1',
 duration: 10,
 startTime: 12,
 detail: undefined,
 };
 } as PerformanceEntry;

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'xmlhttprequest',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'fetch',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 256,
 encodedBodySize: 456,
 decodedBodySize: 593,
 renderBlockingStatus: 'non-blocking',
 };
 });

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
 ];
 for (let i = 0; i < table.length; i++) {
 const { initiatorType, op } = table[i]!;
 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType,
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

 expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 renderBlockingStatus: 'non-blocking',
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 2147483647,
 encodedBodySize: 2147483647,
 decodedBodySize: 2147483647,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
 transferSize: null,
 encodedBodySize: null,
 decodedBodySize: null,
 } as unknown as ResourceEntry;
 } as unknown as PerformanceResourceTiming;

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

 // resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
 // i.e. better but not yet widely supported way to check for browser cache hit
 it.each(['cache', 'navigational-prefetch', ''])(
 it.each(['cache', 'navigational-prefetch', ''] as const)(
 'attaches delivery type ("%s") to resource spans if available',
 deliveryType => {
 const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 deliveryType,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ref(browser): Refactor type casts of browser metrics#14542

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

 Merged

mydea
merged 6 commits into

from

Dec 11, 2024
 Merged


ref(browser): Refactor type casts of browser metrics
#14542
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
f9f278d

ref(browser): Refactor type casts of browser metrics


mydea Dec 2, 2024
6b9240f

small ref to safe bundle size


mydea Dec 6, 2024
f4cc141

small ref


mydea Dec 6, 2024
a958a23

small refs


mydea Dec 6, 2024
7fd8066

default?


mydea Dec 6, 2024
024dd24

fix test


mydea Dec 6, 2024

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


110 changes: 69 additions & 41 deletions
packages/browser-utils/src/metrics/browserMetrics.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
 const performance = getBrowserPerformanceAPI();
 if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
 if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
 // Gatekeeper if performance API not available
 return;
 }
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
 performanceEntries.slice(_performanceCursor).forEach(entry => {
 const startTime = msToSec(entry.startTime);
 const duration = msToSec(
 // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 switch (entry.entryType) {
 case 'navigation': {
 _addNavigationSpans(span, entry, timeOrigin);
 _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
 break;
 }
 case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 break;
 }
 case 'resource': {
 _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
 _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
 break;
 }
 default:
 // Ignore other entry types.
 }
 });
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 _measurements = {};
}

/** Create measure related spans */
/**
 * Create measure related spans.
 * Exported only for tests.
 */
export function _addMeasureSpans(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 entry: PerformanceEntry,
 startTime: number,
 duration: number,
 timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
 ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
 _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
 _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

 _addRequest(span, entry, timeOrigin);
}

type StartEventName =
 | 'secureConnection'
 | 'fetch'
 | 'domainLookup'
 | 'unloadEvent'
 | 'redirect'
 | 'connect'
 | 'domContentLoadedEvent'
 | 'loadEvent';

type EndEventName =
 | 'connectEnd'
 | 'domainLookupStart'
 | 'domainLookupEnd'
 | 'unloadEventEnd'
 | 'redirectEnd'
 | 'connectEnd'
 | 'domContentLoadedEventEnd'
 | 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 event: string,
 entry: PerformanceNavigationTiming,
 event: StartEventName,
 timeOrigin: number,
 name?: string,
 eventEnd?: string,
 name: string = event,
): void {
 const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
 const start = entry[`${event}Start`] as number | undefined;
 const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
 const end = entry[eventEnd];
 const start = entry[`${event}Start`];
 if (!start || !end) {
 return;
 }
 startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
 op: `browser.${name || event}`,
 op: `browser.${name}`,
 name: entry.name,
 attributes: {
 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
 },
 });
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
 if (event === 'secureConnection') {
 return 'connectEnd';
 }
 if (event === 'fetch') {
 return 'domainLookupStart';
 }
 return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
 const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
 const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
 const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
 }
}

export interface ResourceEntry extends Record<string, unknown> {
 initiatorType?: string;
 transferSize?: number;
 encodedBodySize?: number;
 decodedBodySize?: number;
 renderBlockingStatus?: string;
 deliveryType?: string;
}

/** Create resource-related spans */
/**
 * Create resource-related spans.
 * Exported only for tests.
 */
export function _addResourceSpans(
 span: Span,
 entry: ResourceEntry,
 entry: PerformanceResourceTiming,
 resourceUrl: string,
 startTime: number,
 duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
 setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
 setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

 if (entry.deliveryType != null) {
 attributes['http.response_delivery_type'] = entry.deliveryType;
 // `deliveryType` is experimental and does not exist everywhere
 const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
 if (deliveryType != null) {
 attributes['http.response_delivery_type'] = deliveryType;
 }

 if ('renderBlockingStatus' in entry) {
 attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
 // Types do not reflect this property yet
 const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
 .renderBlockingStatus;
 if (renderBlockingStatus) {
 attributes['resource.render_blocking_status'] = renderBlockingStatus;
 }

 if (parsedUrl.protocol) {
 attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
 }
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
 attributes: SpanAttributes,
 entry: ResourceEntry,
 key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 entry: PerformanceResourceTiming,
 key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
 const entryVal = entry[key];
Expand Down

49 changes: 29 additions & 20 deletions
packages/browser-utils/test/browser/browserMetrics.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
 spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
 renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
 deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
 data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
 return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
 const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
 spans.push(span);
 });

 const entry: Omit<PerformanceMeasure, 'toJSON'> = {
 const entry = {
 entryType: 'measure',
 name: 'measure-1',
 duration: 10,
 startTime: 12,
 detail: undefined,
 };
 } as PerformanceEntry;

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'xmlhttprequest',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'fetch',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 256,
 encodedBodySize: 456,
 decodedBodySize: 593,
 renderBlockingStatus: 'non-blocking',
 };
 });

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
 ];
 for (let i = 0; i < table.length; i++) {
 const { initiatorType, op } = table[i]!;
 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType,
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

 expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 renderBlockingStatus: 'non-blocking',
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 2147483647,
 encodedBodySize: 2147483647,
 decodedBodySize: 2147483647,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
 transferSize: null,
 encodedBodySize: null,
 decodedBodySize: null,
 } as unknown as ResourceEntry;
 } as unknown as PerformanceResourceTiming;

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

 // resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
 // i.e. better but not yet widely supported way to check for browser cache hit
 it.each(['cache', 'navigational-prefetch', ''])(
 it.each(['cache', 'navigational-prefetch', ''] as const)(
 'attaches delivery type ("%s") to resource spans if available',
 deliveryType => {
 const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 deliveryType,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ref(browser): Refactor type casts of browser metrics#14542

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

 Merged

mydea
merged 6 commits into

from

Dec 11, 2024
 Merged


ref(browser): Refactor type casts of browser metrics
#14542
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
f9f278d

ref(browser): Refactor type casts of browser metrics


mydea Dec 2, 2024
6b9240f

small ref to safe bundle size


mydea Dec 6, 2024
f4cc141

small ref


mydea Dec 6, 2024
a958a23

small refs


mydea Dec 6, 2024
7fd8066

default?


mydea Dec 6, 2024
024dd24

fix test


mydea Dec 6, 2024

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


110 changes: 69 additions & 41 deletions
packages/browser-utils/src/metrics/browserMetrics.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
 const performance = getBrowserPerformanceAPI();
 if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
 if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
 // Gatekeeper if performance API not available
 return;
 }
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
 performanceEntries.slice(_performanceCursor).forEach(entry => {
 const startTime = msToSec(entry.startTime);
 const duration = msToSec(
 // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 switch (entry.entryType) {
 case 'navigation': {
 _addNavigationSpans(span, entry, timeOrigin);
 _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
 break;
 }
 case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 break;
 }
 case 'resource': {
 _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
 _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
 break;
 }
 default:
 // Ignore other entry types.
 }
 });
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 _measurements = {};
}

/** Create measure related spans */
/**
 * Create measure related spans.
 * Exported only for tests.
 */
export function _addMeasureSpans(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 entry: PerformanceEntry,
 startTime: number,
 duration: number,
 timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
 ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
 _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
 _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

 _addRequest(span, entry, timeOrigin);
}

type StartEventName =
 | 'secureConnection'
 | 'fetch'
 | 'domainLookup'
 | 'unloadEvent'
 | 'redirect'
 | 'connect'
 | 'domContentLoadedEvent'
 | 'loadEvent';

type EndEventName =
 | 'connectEnd'
 | 'domainLookupStart'
 | 'domainLookupEnd'
 | 'unloadEventEnd'
 | 'redirectEnd'
 | 'connectEnd'
 | 'domContentLoadedEventEnd'
 | 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 event: string,
 entry: PerformanceNavigationTiming,
 event: StartEventName,
 timeOrigin: number,
 name?: string,
 eventEnd?: string,
 name: string = event,
): void {
 const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
 const start = entry[`${event}Start`] as number | undefined;
 const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
 const end = entry[eventEnd];
 const start = entry[`${event}Start`];
 if (!start || !end) {
 return;
 }
 startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
 op: `browser.${name || event}`,
 op: `browser.${name}`,
 name: entry.name,
 attributes: {
 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
 },
 });
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
 if (event === 'secureConnection') {
 return 'connectEnd';
 }
 if (event === 'fetch') {
 return 'domainLookupStart';
 }
 return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
 const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
 const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
 const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
 }
}

export interface ResourceEntry extends Record<string, unknown> {
 initiatorType?: string;
 transferSize?: number;
 encodedBodySize?: number;
 decodedBodySize?: number;
 renderBlockingStatus?: string;
 deliveryType?: string;
}

/** Create resource-related spans */
/**
 * Create resource-related spans.
 * Exported only for tests.
 */
export function _addResourceSpans(
 span: Span,
 entry: ResourceEntry,
 entry: PerformanceResourceTiming,
 resourceUrl: string,
 startTime: number,
 duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
 setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
 setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

 if (entry.deliveryType != null) {
 attributes['http.response_delivery_type'] = entry.deliveryType;
 // `deliveryType` is experimental and does not exist everywhere
 const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
 if (deliveryType != null) {
 attributes['http.response_delivery_type'] = deliveryType;
 }

 if ('renderBlockingStatus' in entry) {
 attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
 // Types do not reflect this property yet
 const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
 .renderBlockingStatus;
 if (renderBlockingStatus) {
 attributes['resource.render_blocking_status'] = renderBlockingStatus;
 }

 if (parsedUrl.protocol) {
 attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
 }
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
 attributes: SpanAttributes,
 entry: ResourceEntry,
 key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 entry: PerformanceResourceTiming,
 key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
 const entryVal = entry[key];
Expand Down

49 changes: 29 additions & 20 deletions
packages/browser-utils/test/browser/browserMetrics.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
 spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
 renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
 deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
 data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
 return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
 const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
 spans.push(span);
 });

 const entry: Omit<PerformanceMeasure, 'toJSON'> = {
 const entry = {
 entryType: 'measure',
 name: 'measure-1',
 duration: 10,
 startTime: 12,
 detail: undefined,
 };
 } as PerformanceEntry;

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'xmlhttprequest',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'fetch',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 256,
 encodedBodySize: 456,
 decodedBodySize: 593,
 renderBlockingStatus: 'non-blocking',
 };
 });

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
 ];
 for (let i = 0; i < table.length; i++) {
 const { initiatorType, op } = table[i]!;
 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType,
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

 expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 renderBlockingStatus: 'non-blocking',
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 2147483647,
 encodedBodySize: 2147483647,
 decodedBodySize: 2147483647,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
 transferSize: null,
 encodedBodySize: null,
 decodedBodySize: null,
 } as unknown as ResourceEntry;
 } as unknown as PerformanceResourceTiming;

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

 // resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
 // i.e. better but not yet widely supported way to check for browser cache hit
 it.each(['cache', 'navigational-prefetch', ''])(
 it.each(['cache', 'navigational-prefetch', ''] as const)(
 'attaches delivery type ("%s") to resource spans if available',
 deliveryType => {
 const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 deliveryType,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
ref(browser): Refactor type casts of browser metrics#14542

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

 Merged

mydea
merged 6 commits into

from

Dec 11, 2024
 Merged


ref(browser): Refactor type casts of browser metrics
#14542
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
f9f278d

ref(browser): Refactor type casts of browser metrics


mydea Dec 2, 2024
6b9240f

small ref to safe bundle size


mydea Dec 6, 2024
f4cc141

small ref


mydea Dec 6, 2024
a958a23

small refs


mydea Dec 6, 2024
7fd8066

default?


mydea Dec 6, 2024
024dd24

fix test


mydea Dec 6, 2024

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


110 changes: 69 additions & 41 deletions
packages/browser-utils/src/metrics/browserMetrics.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -300,7 +300,7 @@ interface AddPerformanceEntriesOptions {
/** Add performance related spans to a transaction */
export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
 const performance = getBrowserPerformanceAPI();
 if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
 if (!performance || !performance.getEntries || !browserPerformanceTimeOrigin) {
 // Gatekeeper if performance API not available
 return;
 }
Expand All@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 const { op, start_timestamp: transactionStartTime } = spanToJSON(span);

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
 performanceEntries.slice(_performanceCursor).forEach(entry => {
 const startTime = msToSec(entry.startTime);
 const duration = msToSec(
 // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
Expand All@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries

 switch (entry.entryType) {
 case 'navigation': {
 _addNavigationSpans(span, entry, timeOrigin);
 _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
 break;
 }
 case 'mark':
Expand All@@ -350,10 +349,9 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 break;
 }
 case 'resource': {
 _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
 _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
 break;
 }
 default:
 // Ignore other entry types.
 }
 });
Expand DownExpand Up@@ -411,11 +409,13 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 _measurements = {};
}

/** Create measure related spans */
/**
 * Create measure related spans.
 * Exported only for tests.
 */
export function _addMeasureSpans(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 entry: PerformanceEntry,
 startTime: number,
 duration: number,
 timeOrigin: number,
Expand DownExpand Up@@ -454,44 +454,72 @@ export function _addMeasureSpans(
}

/** Instrument navigation entries */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
 ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
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', 'connectEnd');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
 _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
 _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
 _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');

 _addRequest(span, entry, timeOrigin);
}

type StartEventName =
 | 'secureConnection'
 | 'fetch'
 | 'domainLookup'
 | 'unloadEvent'
 | 'redirect'
 | 'connect'
 | 'domContentLoadedEvent'
 | 'loadEvent';

type EndEventName =
 | 'connectEnd'
 | 'domainLookupStart'
 | 'domainLookupEnd'
 | 'unloadEventEnd'
 | 'redirectEnd'
 | 'connectEnd'
 | 'domContentLoadedEventEnd'
 | 'loadEventEnd';

/** Create performance navigation related spans */
function _addPerformanceNavigationTiming(
 span: Span,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 entry: Record<string, any>,
 event: string,
 entry: PerformanceNavigationTiming,
 event: StartEventName,
 timeOrigin: number,
 name?: string,
 eventEnd?: string,
 name: string = event,
): void {
 const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
 const start = entry[`${event}Start`] as number | undefined;
 const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;
 const end = entry[eventEnd];
 const start = entry[`${event}Start`];
 if (!start || !end) {
 return;
 }
 startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
 op: `browser.${name || event}`,
 op: `browser.${name}`,
 name: entry.name,
 attributes: {
 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
 },
 });
}

function _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {
 if (event === 'secureConnection') {
 return 'connectEnd';
 }
 if (event === 'fetch') {
 return 'domainLookupStart';
 }
 return `${event}End`;
}

/** Create request and response related spans */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
 const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
 const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
 const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
Expand All@@ -518,19 +546,13 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
 }
}

export interface ResourceEntry extends Record<string, unknown> {
 initiatorType?: string;
 transferSize?: number;
 encodedBodySize?: number;
 decodedBodySize?: number;
 renderBlockingStatus?: string;
 deliveryType?: string;
}

/** Create resource-related spans */
/**
 * Create resource-related spans.
 * Exported only for tests.
 */
export function _addResourceSpans(
 span: Span,
 entry: ResourceEntry,
 entry: PerformanceResourceTiming,
 resourceUrl: string,
 startTime: number,
 duration: number,
Expand All@@ -551,13 +573,19 @@ export function _addResourceSpans(
 setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
 setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');

 if (entry.deliveryType != null) {
 attributes['http.response_delivery_type'] = entry.deliveryType;
 // `deliveryType` is experimental and does not exist everywhere
 const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
 if (deliveryType != null) {
 attributes['http.response_delivery_type'] = deliveryType;
 }

 if ('renderBlockingStatus' in entry) {
 attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
 // Types do not reflect this property yet
 const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
 .renderBlockingStatus;
 if (renderBlockingStatus) {
 attributes['resource.render_blocking_status'] = renderBlockingStatus;
 }

 if (parsedUrl.protocol) {
 attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
 }
Expand DownExpand Up@@ -655,8 +683,8 @@ function _setWebVitalAttributes(span: Span): void {

function setResourceEntrySizeData(
 attributes: SpanAttributes,
 entry: ResourceEntry,
 key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 entry: PerformanceResourceTiming,
 key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
 dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
): void {
 const entryVal = entry[key];
Expand Down

49 changes: 29 additions & 20 deletions
packages/browser-utils/test/browser/browserMetrics.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,6 @@ import {
 spanToJSON,
} from '@sentry/core';
import type { Span } from '@sentry/core';
import type { ResourceEntry } from '../../src/metrics/browserMetrics';
import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
import { WINDOW } from '../../src/types';
import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
Expand All@@ -31,6 +30,17 @@ const originalLocation = WINDOW.location;

const resourceEntryName = 'https://example.com/assets/to/css';

interface AdditionalPerformanceResourceTiming {
 renderBlockingStatus?: 'non-blocking' | 'blocking' | '';
 deliveryType?: 'cache' | 'navigational-prefetch' | '';
}

function mockPerformanceResourceTiming(
 data: Partial<PerformanceResourceTiming> & AdditionalPerformanceResourceTiming,
): PerformanceResourceTiming & AdditionalPerformanceResourceTiming {
 return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
}

describe('_addMeasureSpans', () => {
 const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });

Expand All@@ -54,13 +64,12 @@ describe('_addMeasureSpans', () => {
 spans.push(span);
 });

 const entry: Omit<PerformanceMeasure, 'toJSON'> = {
 const entry = {
 entryType: 'measure',
 name: 'measure-1',
 duration: 10,
 startTime: 12,
 detail: undefined,
 };
 } as PerformanceEntry;

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -116,13 +125,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'xmlhttprequest',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, resourceEntryName, 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -135,13 +144,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'fetch',
 transferSize: 256,
 encodedBodySize: 256,
 decodedBodySize: 256,
 renderBlockingStatus: 'non-blocking',
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 456, 100);

 expect(spans).toHaveLength(0);
Expand All@@ -154,13 +163,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 256,
 encodedBodySize: 456,
 decodedBodySize: 593,
 renderBlockingStatus: 'non-blocking',
 };
 });

 const timeOrigin = 100;
 const startTime = 23;
Expand DownExpand Up@@ -222,9 +231,9 @@ describe('_addResourceSpans', () => {
 ];
 for (let i = 0; i < table.length; i++) {
 const { initiatorType, op } = table[i]!;
 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType,
 };
 });
 _addResourceSpans(span, entry, 'https://example.com/assets/to/me', 123, 234, 465);

 expect(spans).toHaveLength(i + 1);
Expand All@@ -239,13 +248,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 renderBlockingStatus: 'non-blocking',
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -274,12 +283,12 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 2147483647,
 encodedBodySize: 2147483647,
 decodedBodySize: 2147483647,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand DownExpand Up@@ -316,7 +325,7 @@ describe('_addResourceSpans', () => {
 transferSize: null,
 encodedBodySize: null,
 decodedBodySize: null,
 } as unknown as ResourceEntry;
 } as unknown as PerformanceResourceTiming;

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand All@@ -341,7 +350,7 @@ describe('_addResourceSpans', () => {

 // resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
 // i.e. better but not yet widely supported way to check for browser cache hit
 it.each(['cache', 'navigational-prefetch', ''])(
 it.each(['cache', 'navigational-prefetch', ''] as const)(
 'attaches delivery type ("%s") to resource spans if available',
 deliveryType => {
 const spans: Span[] = [];
Expand All@@ -350,13 +359,13 @@ describe('_addResourceSpans', () => {
 spans.push(span);
 });

 const entry: ResourceEntry = {
 const entry = mockPerformanceResourceTiming({
 initiatorType: 'css',
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 deliveryType,
 };
 });

 _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);

Expand Down