fix(replay): Convert performance entries against the origin they were observed with#23068

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

Draft
Lms24 wants to merge 1 commit into from
+111 −15
Draft

fix(replay): Convert performance entries against the origin they were observed with #23068

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

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/replay-internal/src/coreHandlers/performanceObserver.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
getCumulativeLayoutShift,
getInteractionToNextPaint,
getLargestContentfulPaint,
rememberEntryTimeOrigin,
webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
function addPerformanceEntry(entry: PerformanceEntry): void {
// It is possible for entries to come up multiple times
if (!replay.performanceEntries.includes(entry)) {
// Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
// is currently in effect has to be captured now.
rememberEntryTimeOrigin(entry);
replay.performanceEntries.push(entry);
}
}
Expand Down
58 changes: 44 additions & 14 deletions packages/replay-internal/src/util/createPerformanceEntries.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
string,
(entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
(entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
// @ts-expect-error TODO: entry type does not fit the create* functions entry type
resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
* The time origin that was in effect when an entry was observed.
*
* Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
* clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
* were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
* buffered entry by the drift.
*/
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
* Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
*/
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
const timeOrigin = correctedPerformanceTimeOrigin();
if (timeOrigin !== undefined) {
ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
}
}

/**
* Create replay performance entries from the browser performance entries.
*/
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
return null;
}

return entryType(entry);
return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
// The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
// convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
// exist, but this is already checked by this integration.
return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
// correctedPerformanceTimeOrigin can be undefined if `performance` or
// `performance.now` doesn't exist, but this is already checked by this integration
return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
const { duration, entryType, name, startTime } = entry;

const start = getAbsoluteTime(startTime);
const start = getAbsoluteTime(startTime, timeOrigin);
return {
type: entryType,
name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
};
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
entry: PerformanceNavigationTiming,
timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
const {
entryType,
name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

return {
type: `${entryType}.${type}`,
start: getAbsoluteTime(startTime),
end: getAbsoluteTime(domComplete),
start: getAbsoluteTime(startTime, timeOrigin),
end: getAbsoluteTime(domComplete, timeOrigin),
name,
data: {
size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
entry: ExperimentalPerformanceResourceTiming,
timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
const {
entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

return {
type: `${entryType}.${initiatorType}`,
start: getAbsoluteTime(startTime),
end: getAbsoluteTime(responseEnd),
start: getAbsoluteTime(startTime, timeOrigin),
end: getAbsoluteTime(responseEnd, timeOrigin),
name,
data: {
size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
const value = metric.value;
const rating = metric.rating;

const end = getAbsoluteTime(value);
// Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

return {
type: 'web-vital',
Expand Down
64 changes: 63 additions & 1 deletion packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
createPerformanceEntries,
getCumulativeLayoutShift,
getInteractionToNextPaint,
getLargestContentfulPaint,
rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
});

beforeEach(function () {
vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

if (!WINDOW.performance.getEntriesByType) {
WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
expect(createPerformanceEntries([data])).toEqual([]);
});

describe('time origin stamping', () => {
const TIME_ORIGIN = new Date('2023-01-01').getTime();
// A sleep long enough for `timestampInSeconds` to re-derive its time origin.
const DRIFT_MS = 360_000;

function resourceEntry(): PerformanceEntry {
return {
name: 'https://example.com/script.js',
entryType: 'resource',
startTime: 1_000,
duration: 100,
initiatorType: 'script',
responseEnd: 1_100,
transferSize: 0,
encodedBodySize: 0,
decodedBodySize: 0,
} as unknown as PerformanceEntry;
}

it('converts a stamped entry against the origin from when it was observed', () => {
const entry = resourceEntry();

rememberEntryTimeOrigin(entry);

// The origin is corrected after the entry was observed but before it is flushed.
vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

const [replayEntry] = createPerformanceEntries([entry]);

expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
});

it('falls back to the current origin for an entry that was never stamped', () => {
vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

const [replayEntry] = createPerformanceEntries([resourceEntry()]);

expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
});

it('stamps each entry with the origin in effect when it was observed', () => {
const early = resourceEntry();
rememberEntryTimeOrigin(early);

vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
const late = resourceEntry();
rememberEntryTimeOrigin(late);

const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

// Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
// wall clock time even though they were observed on either side of a correction.
expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
});
});

describe('getLargestContentfulPaint', () => {
it('works with an LCP metric', async () => {
const metric = {
Expand Down
Loading
, '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
fix(replay): Convert performance entries against the origin they were observed with#23068

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

 Draft

Lms24
wants to merge
1
commit into

from


+111

−15

 Draft


fix(replay): Convert performance entries against the origin they were observed with
#23068
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
packages/replay-internal/src/coreHandlers/performanceObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
 webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
 function addPerformanceEntry(entry: PerformanceEntry): void {
 // It is possible for entries to come up multiple times
 if (!replay.performanceEntries.includes(entry)) {
 // Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
 // is currently in effect has to be captured now.
 rememberEntryTimeOrigin(entry);
 replay.performanceEntries.push(entry);
 }
 }
Expand Down

58 changes: 44 additions & 14 deletions
packages/replay-internal/src/util/createPerformanceEntries.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
 string,
 (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 (entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
 // @ts-expect-error TODO: entry type does not fit the create* functions entry type
 resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
 return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
 * The time origin that was in effect when an entry was observed.
 *
 * Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
 * clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
 * were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
 * buffered entry by the drift.
 */
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
 * Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
 */
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
 const timeOrigin = correctedPerformanceTimeOrigin();
 if (timeOrigin !== undefined) {
 ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
 }
}

/**
 * Create replay performance entries from the browser performance entries.
 */
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 return null;
 }

 return entryType(entry);
 return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
 // The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
 // convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
 // exist, but this is already checked by this integration.
 return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
 // correctedPerformanceTimeOrigin can be undefined if `performance` or
 // `performance.now` doesn't exist, but this is already checked by this integration
 return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
 return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
 const { duration, entryType, name, startTime } = entry;

 const start = getAbsoluteTime(startTime);
 const start = getAbsoluteTime(startTime, timeOrigin);
 return {
 type: entryType,
 name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
 };
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
 entry: PerformanceNavigationTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
 const {
 entryType,
 name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

 return {
 type: `${entryType}.${type}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(domComplete),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(domComplete, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
 entry: ExperimentalPerformanceResourceTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
 const {
 entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

 return {
 type: `${entryType}.${initiatorType}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(responseEnd),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(responseEnd, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
 const value = metric.value;
 const rating = metric.rating;

 const end = getAbsoluteTime(value);
 // Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
 const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

 return {
 type: 'web-vital',
Expand Down

64 changes: 63 additions & 1 deletion
packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
 createPerformanceEntries,
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
 ...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
 });

 beforeEach(function () {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

 if (!WINDOW.performance.getEntriesByType) {
 WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
 if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
 expect(createPerformanceEntries([data])).toEqual([]);
 });

 describe('time origin stamping', () => {
 const TIME_ORIGIN = new Date('2023-01-01').getTime();
 // A sleep long enough for `timestampInSeconds` to re-derive its time origin.
 const DRIFT_MS = 360_000;

 function resourceEntry(): PerformanceEntry {
 return {
 name: 'https://example.com/script.js',
 entryType: 'resource',
 startTime: 1_000,
 duration: 100,
 initiatorType: 'script',
 responseEnd: 1_100,
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 } as unknown as PerformanceEntry;
 }

 it('converts a stamped entry against the origin from when it was observed', () => {
 const entry = resourceEntry();

 rememberEntryTimeOrigin(entry);

 // The origin is corrected after the entry was observed but before it is flushed.
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([entry]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
 });

 it('falls back to the current origin for an entry that was never stamped', () => {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([resourceEntry()]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });

 it('stamps each entry with the origin in effect when it was observed', () => {
 const early = resourceEntry();
 rememberEntryTimeOrigin(early);

 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
 const late = resourceEntry();
 rememberEntryTimeOrigin(late);

 const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

 // Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
 // wall clock time even though they were observed on either side of a correction.
 expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });
 });

 describe('getLargestContentfulPaint', () => {
 it('works with an LCP metric', async () => {
 const metric = {
Expand Down
Loading

, '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
fix(replay): Convert performance entries against the origin they were observed with#23068

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

 Draft

Lms24
wants to merge
1
commit into

from


+111

−15

 Draft


fix(replay): Convert performance entries against the origin they were observed with
#23068
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
packages/replay-internal/src/coreHandlers/performanceObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
 webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
 function addPerformanceEntry(entry: PerformanceEntry): void {
 // It is possible for entries to come up multiple times
 if (!replay.performanceEntries.includes(entry)) {
 // Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
 // is currently in effect has to be captured now.
 rememberEntryTimeOrigin(entry);
 replay.performanceEntries.push(entry);
 }
 }
Expand Down

58 changes: 44 additions & 14 deletions
packages/replay-internal/src/util/createPerformanceEntries.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
 string,
 (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 (entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
 // @ts-expect-error TODO: entry type does not fit the create* functions entry type
 resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
 return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
 * The time origin that was in effect when an entry was observed.
 *
 * Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
 * clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
 * were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
 * buffered entry by the drift.
 */
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
 * Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
 */
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
 const timeOrigin = correctedPerformanceTimeOrigin();
 if (timeOrigin !== undefined) {
 ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
 }
}

/**
 * Create replay performance entries from the browser performance entries.
 */
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 return null;
 }

 return entryType(entry);
 return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
 // The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
 // convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
 // exist, but this is already checked by this integration.
 return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
 // correctedPerformanceTimeOrigin can be undefined if `performance` or
 // `performance.now` doesn't exist, but this is already checked by this integration
 return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
 return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
 const { duration, entryType, name, startTime } = entry;

 const start = getAbsoluteTime(startTime);
 const start = getAbsoluteTime(startTime, timeOrigin);
 return {
 type: entryType,
 name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
 };
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
 entry: PerformanceNavigationTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
 const {
 entryType,
 name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

 return {
 type: `${entryType}.${type}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(domComplete),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(domComplete, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
 entry: ExperimentalPerformanceResourceTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
 const {
 entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

 return {
 type: `${entryType}.${initiatorType}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(responseEnd),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(responseEnd, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
 const value = metric.value;
 const rating = metric.rating;

 const end = getAbsoluteTime(value);
 // Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
 const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

 return {
 type: 'web-vital',
Expand Down

64 changes: 63 additions & 1 deletion
packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
 createPerformanceEntries,
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
 ...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
 });

 beforeEach(function () {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

 if (!WINDOW.performance.getEntriesByType) {
 WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
 if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
 expect(createPerformanceEntries([data])).toEqual([]);
 });

 describe('time origin stamping', () => {
 const TIME_ORIGIN = new Date('2023-01-01').getTime();
 // A sleep long enough for `timestampInSeconds` to re-derive its time origin.
 const DRIFT_MS = 360_000;

 function resourceEntry(): PerformanceEntry {
 return {
 name: 'https://example.com/script.js',
 entryType: 'resource',
 startTime: 1_000,
 duration: 100,
 initiatorType: 'script',
 responseEnd: 1_100,
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 } as unknown as PerformanceEntry;
 }

 it('converts a stamped entry against the origin from when it was observed', () => {
 const entry = resourceEntry();

 rememberEntryTimeOrigin(entry);

 // The origin is corrected after the entry was observed but before it is flushed.
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([entry]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
 });

 it('falls back to the current origin for an entry that was never stamped', () => {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([resourceEntry()]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });

 it('stamps each entry with the origin in effect when it was observed', () => {
 const early = resourceEntry();
 rememberEntryTimeOrigin(early);

 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
 const late = resourceEntry();
 rememberEntryTimeOrigin(late);

 const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

 // Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
 // wall clock time even though they were observed on either side of a correction.
 expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });
 });

 describe('getLargestContentfulPaint', () => {
 it('works with an LCP metric', async () => {
 const metric = {
Expand Down
Loading

, '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
fix(replay): Convert performance entries against the origin they were observed with#23068

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

 Draft

Lms24
wants to merge
1
commit into

from


+111

−15

 Draft


fix(replay): Convert performance entries against the origin they were observed with
#23068
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
packages/replay-internal/src/coreHandlers/performanceObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
 webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
 function addPerformanceEntry(entry: PerformanceEntry): void {
 // It is possible for entries to come up multiple times
 if (!replay.performanceEntries.includes(entry)) {
 // Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
 // is currently in effect has to be captured now.
 rememberEntryTimeOrigin(entry);
 replay.performanceEntries.push(entry);
 }
 }
Expand Down

58 changes: 44 additions & 14 deletions
packages/replay-internal/src/util/createPerformanceEntries.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
 string,
 (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 (entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
 // @ts-expect-error TODO: entry type does not fit the create* functions entry type
 resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
 return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
 * The time origin that was in effect when an entry was observed.
 *
 * Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
 * clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
 * were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
 * buffered entry by the drift.
 */
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
 * Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
 */
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
 const timeOrigin = correctedPerformanceTimeOrigin();
 if (timeOrigin !== undefined) {
 ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
 }
}

/**
 * Create replay performance entries from the browser performance entries.
 */
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 return null;
 }

 return entryType(entry);
 return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
 // The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
 // convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
 // exist, but this is already checked by this integration.
 return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
 // correctedPerformanceTimeOrigin can be undefined if `performance` or
 // `performance.now` doesn't exist, but this is already checked by this integration
 return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
 return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
 const { duration, entryType, name, startTime } = entry;

 const start = getAbsoluteTime(startTime);
 const start = getAbsoluteTime(startTime, timeOrigin);
 return {
 type: entryType,
 name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
 };
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
 entry: PerformanceNavigationTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
 const {
 entryType,
 name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

 return {
 type: `${entryType}.${type}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(domComplete),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(domComplete, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
 entry: ExperimentalPerformanceResourceTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
 const {
 entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

 return {
 type: `${entryType}.${initiatorType}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(responseEnd),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(responseEnd, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
 const value = metric.value;
 const rating = metric.rating;

 const end = getAbsoluteTime(value);
 // Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
 const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

 return {
 type: 'web-vital',
Expand Down

64 changes: 63 additions & 1 deletion
packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
 createPerformanceEntries,
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
 ...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
 });

 beforeEach(function () {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

 if (!WINDOW.performance.getEntriesByType) {
 WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
 if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
 expect(createPerformanceEntries([data])).toEqual([]);
 });

 describe('time origin stamping', () => {
 const TIME_ORIGIN = new Date('2023-01-01').getTime();
 // A sleep long enough for `timestampInSeconds` to re-derive its time origin.
 const DRIFT_MS = 360_000;

 function resourceEntry(): PerformanceEntry {
 return {
 name: 'https://example.com/script.js',
 entryType: 'resource',
 startTime: 1_000,
 duration: 100,
 initiatorType: 'script',
 responseEnd: 1_100,
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 } as unknown as PerformanceEntry;
 }

 it('converts a stamped entry against the origin from when it was observed', () => {
 const entry = resourceEntry();

 rememberEntryTimeOrigin(entry);

 // The origin is corrected after the entry was observed but before it is flushed.
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([entry]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
 });

 it('falls back to the current origin for an entry that was never stamped', () => {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([resourceEntry()]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });

 it('stamps each entry with the origin in effect when it was observed', () => {
 const early = resourceEntry();
 rememberEntryTimeOrigin(early);

 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
 const late = resourceEntry();
 rememberEntryTimeOrigin(late);

 const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

 // Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
 // wall clock time even though they were observed on either side of a correction.
 expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });
 });

 describe('getLargestContentfulPaint', () => {
 it('works with an LCP metric', async () => {
 const metric = {
Expand Down
Loading

, '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
fix(replay): Convert performance entries against the origin they were observed with#23068

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

 Draft

Lms24
wants to merge
1
commit into

from


+111

−15

 Draft


fix(replay): Convert performance entries against the origin they were observed with
#23068
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
packages/replay-internal/src/coreHandlers/performanceObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
 webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
 function addPerformanceEntry(entry: PerformanceEntry): void {
 // It is possible for entries to come up multiple times
 if (!replay.performanceEntries.includes(entry)) {
 // Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
 // is currently in effect has to be captured now.
 rememberEntryTimeOrigin(entry);
 replay.performanceEntries.push(entry);
 }
 }
Expand Down

58 changes: 44 additions & 14 deletions
packages/replay-internal/src/util/createPerformanceEntries.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
 string,
 (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 (entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
 // @ts-expect-error TODO: entry type does not fit the create* functions entry type
 resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
 return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
 * The time origin that was in effect when an entry was observed.
 *
 * Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
 * clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
 * were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
 * buffered entry by the drift.
 */
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
 * Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
 */
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
 const timeOrigin = correctedPerformanceTimeOrigin();
 if (timeOrigin !== undefined) {
 ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
 }
}

/**
 * Create replay performance entries from the browser performance entries.
 */
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 return null;
 }

 return entryType(entry);
 return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
 // The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
 // convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
 // exist, but this is already checked by this integration.
 return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
 // correctedPerformanceTimeOrigin can be undefined if `performance` or
 // `performance.now` doesn't exist, but this is already checked by this integration
 return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
 return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
 const { duration, entryType, name, startTime } = entry;

 const start = getAbsoluteTime(startTime);
 const start = getAbsoluteTime(startTime, timeOrigin);
 return {
 type: entryType,
 name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
 };
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
 entry: PerformanceNavigationTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
 const {
 entryType,
 name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

 return {
 type: `${entryType}.${type}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(domComplete),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(domComplete, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
 entry: ExperimentalPerformanceResourceTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
 const {
 entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

 return {
 type: `${entryType}.${initiatorType}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(responseEnd),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(responseEnd, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
 const value = metric.value;
 const rating = metric.rating;

 const end = getAbsoluteTime(value);
 // Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
 const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

 return {
 type: 'web-vital',
Expand Down

64 changes: 63 additions & 1 deletion
packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
 createPerformanceEntries,
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
 ...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
 });

 beforeEach(function () {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

 if (!WINDOW.performance.getEntriesByType) {
 WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
 if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
 expect(createPerformanceEntries([data])).toEqual([]);
 });

 describe('time origin stamping', () => {
 const TIME_ORIGIN = new Date('2023-01-01').getTime();
 // A sleep long enough for `timestampInSeconds` to re-derive its time origin.
 const DRIFT_MS = 360_000;

 function resourceEntry(): PerformanceEntry {
 return {
 name: 'https://example.com/script.js',
 entryType: 'resource',
 startTime: 1_000,
 duration: 100,
 initiatorType: 'script',
 responseEnd: 1_100,
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 } as unknown as PerformanceEntry;
 }

 it('converts a stamped entry against the origin from when it was observed', () => {
 const entry = resourceEntry();

 rememberEntryTimeOrigin(entry);

 // The origin is corrected after the entry was observed but before it is flushed.
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([entry]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
 });

 it('falls back to the current origin for an entry that was never stamped', () => {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([resourceEntry()]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });

 it('stamps each entry with the origin in effect when it was observed', () => {
 const early = resourceEntry();
 rememberEntryTimeOrigin(early);

 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
 const late = resourceEntry();
 rememberEntryTimeOrigin(late);

 const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

 // Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
 // wall clock time even though they were observed on either side of a correction.
 expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });
 });

 describe('getLargestContentfulPaint', () => {
 it('works with an LCP metric', async () => {
 const metric = {
Expand Down
Loading

, '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
fix(replay): Convert performance entries against the origin they were observed with#23068

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

 Draft

Lms24
wants to merge
1
commit into

from


+111

−15

 Draft


fix(replay): Convert performance entries against the origin they were observed with
#23068
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
packages/replay-internal/src/coreHandlers/performanceObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
 webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
 function addPerformanceEntry(entry: PerformanceEntry): void {
 // It is possible for entries to come up multiple times
 if (!replay.performanceEntries.includes(entry)) {
 // Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
 // is currently in effect has to be captured now.
 rememberEntryTimeOrigin(entry);
 replay.performanceEntries.push(entry);
 }
 }
Expand Down

58 changes: 44 additions & 14 deletions
packages/replay-internal/src/util/createPerformanceEntries.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
 string,
 (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 (entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
 // @ts-expect-error TODO: entry type does not fit the create* functions entry type
 resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
 return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
 * The time origin that was in effect when an entry was observed.
 *
 * Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
 * clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
 * were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
 * buffered entry by the drift.
 */
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
 * Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
 */
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
 const timeOrigin = correctedPerformanceTimeOrigin();
 if (timeOrigin !== undefined) {
 ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
 }
}

/**
 * Create replay performance entries from the browser performance entries.
 */
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 return null;
 }

 return entryType(entry);
 return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
 // The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
 // convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
 // exist, but this is already checked by this integration.
 return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
 // correctedPerformanceTimeOrigin can be undefined if `performance` or
 // `performance.now` doesn't exist, but this is already checked by this integration
 return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
 return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
 const { duration, entryType, name, startTime } = entry;

 const start = getAbsoluteTime(startTime);
 const start = getAbsoluteTime(startTime, timeOrigin);
 return {
 type: entryType,
 name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
 };
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
 entry: PerformanceNavigationTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
 const {
 entryType,
 name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

 return {
 type: `${entryType}.${type}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(domComplete),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(domComplete, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
 entry: ExperimentalPerformanceResourceTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
 const {
 entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

 return {
 type: `${entryType}.${initiatorType}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(responseEnd),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(responseEnd, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
 const value = metric.value;
 const rating = metric.rating;

 const end = getAbsoluteTime(value);
 // Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
 const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

 return {
 type: 'web-vital',
Expand Down

64 changes: 63 additions & 1 deletion
packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
 createPerformanceEntries,
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
 ...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
 });

 beforeEach(function () {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

 if (!WINDOW.performance.getEntriesByType) {
 WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
 if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
 expect(createPerformanceEntries([data])).toEqual([]);
 });

 describe('time origin stamping', () => {
 const TIME_ORIGIN = new Date('2023-01-01').getTime();
 // A sleep long enough for `timestampInSeconds` to re-derive its time origin.
 const DRIFT_MS = 360_000;

 function resourceEntry(): PerformanceEntry {
 return {
 name: 'https://example.com/script.js',
 entryType: 'resource',
 startTime: 1_000,
 duration: 100,
 initiatorType: 'script',
 responseEnd: 1_100,
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 } as unknown as PerformanceEntry;
 }

 it('converts a stamped entry against the origin from when it was observed', () => {
 const entry = resourceEntry();

 rememberEntryTimeOrigin(entry);

 // The origin is corrected after the entry was observed but before it is flushed.
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([entry]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
 });

 it('falls back to the current origin for an entry that was never stamped', () => {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([resourceEntry()]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });

 it('stamps each entry with the origin in effect when it was observed', () => {
 const early = resourceEntry();
 rememberEntryTimeOrigin(early);

 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
 const late = resourceEntry();
 rememberEntryTimeOrigin(late);

 const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

 // Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
 // wall clock time even though they were observed on either side of a correction.
 expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });
 });

 describe('getLargestContentfulPaint', () => {
 it('works with an LCP metric', async () => {
 const metric = {
Expand Down
Loading

, '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
fix(replay): Convert performance entries against the origin they were observed with#23068

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

 Draft

Lms24
wants to merge
1
commit into

from


+111

−15

 Draft


fix(replay): Convert performance entries against the origin they were observed with
#23068
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
packages/replay-internal/src/coreHandlers/performanceObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
 webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
 function addPerformanceEntry(entry: PerformanceEntry): void {
 // It is possible for entries to come up multiple times
 if (!replay.performanceEntries.includes(entry)) {
 // Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
 // is currently in effect has to be captured now.
 rememberEntryTimeOrigin(entry);
 replay.performanceEntries.push(entry);
 }
 }
Expand Down

58 changes: 44 additions & 14 deletions
packages/replay-internal/src/util/createPerformanceEntries.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
 string,
 (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 (entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
 // @ts-expect-error TODO: entry type does not fit the create* functions entry type
 resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
 return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
 * The time origin that was in effect when an entry was observed.
 *
 * Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
 * clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
 * were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
 * buffered entry by the drift.
 */
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
 * Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
 */
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
 const timeOrigin = correctedPerformanceTimeOrigin();
 if (timeOrigin !== undefined) {
 ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
 }
}

/**
 * Create replay performance entries from the browser performance entries.
 */
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 return null;
 }

 return entryType(entry);
 return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
 // The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
 // convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
 // exist, but this is already checked by this integration.
 return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
 // correctedPerformanceTimeOrigin can be undefined if `performance` or
 // `performance.now` doesn't exist, but this is already checked by this integration
 return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
 return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
 const { duration, entryType, name, startTime } = entry;

 const start = getAbsoluteTime(startTime);
 const start = getAbsoluteTime(startTime, timeOrigin);
 return {
 type: entryType,
 name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
 };
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
 entry: PerformanceNavigationTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
 const {
 entryType,
 name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

 return {
 type: `${entryType}.${type}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(domComplete),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(domComplete, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
 entry: ExperimentalPerformanceResourceTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
 const {
 entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

 return {
 type: `${entryType}.${initiatorType}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(responseEnd),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(responseEnd, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
 const value = metric.value;
 const rating = metric.rating;

 const end = getAbsoluteTime(value);
 // Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
 const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

 return {
 type: 'web-vital',
Expand Down

64 changes: 63 additions & 1 deletion
packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
 createPerformanceEntries,
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
 ...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
 });

 beforeEach(function () {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

 if (!WINDOW.performance.getEntriesByType) {
 WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
 if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
 expect(createPerformanceEntries([data])).toEqual([]);
 });

 describe('time origin stamping', () => {
 const TIME_ORIGIN = new Date('2023-01-01').getTime();
 // A sleep long enough for `timestampInSeconds` to re-derive its time origin.
 const DRIFT_MS = 360_000;

 function resourceEntry(): PerformanceEntry {
 return {
 name: 'https://example.com/script.js',
 entryType: 'resource',
 startTime: 1_000,
 duration: 100,
 initiatorType: 'script',
 responseEnd: 1_100,
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 } as unknown as PerformanceEntry;
 }

 it('converts a stamped entry against the origin from when it was observed', () => {
 const entry = resourceEntry();

 rememberEntryTimeOrigin(entry);

 // The origin is corrected after the entry was observed but before it is flushed.
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([entry]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
 });

 it('falls back to the current origin for an entry that was never stamped', () => {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([resourceEntry()]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });

 it('stamps each entry with the origin in effect when it was observed', () => {
 const early = resourceEntry();
 rememberEntryTimeOrigin(early);

 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
 const late = resourceEntry();
 rememberEntryTimeOrigin(late);

 const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

 // Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
 // wall clock time even though they were observed on either side of a correction.
 expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });
 });

 describe('getLargestContentfulPaint', () => {
 it('works with an LCP metric', async () => {
 const metric = {
Expand Down
Loading

, '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
fix(replay): Convert performance entries against the origin they were observed with#23068

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

 Draft

Lms24
wants to merge
1
commit into

from


+111

−15

 Draft


fix(replay): Convert performance entries against the origin they were observed with
#23068
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
packages/replay-internal/src/coreHandlers/performanceObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import {
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
 webVitalHandler,
} from '../util/createPerformanceEntries';

Expand All@@ -20,6 +21,9 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
 function addPerformanceEntry(entry: PerformanceEntry): void {
 // It is possible for entries to come up multiple times
 if (!replay.performanceEntries.includes(entry)) {
 // Entries are converted to wall clock time on flush, which can be long after this point, so the time origin that
 // is currently in effect has to be captured now.
 rememberEntryTimeOrigin(entry);
 replay.performanceEntries.push(entry);
 }
 }
Expand Down

58 changes: 44 additions & 14 deletions
packages/replay-internal/src/util/createPerformanceEntries.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import type {
// Map entryType -> function to normalize data for event
const ENTRY_TYPES: Record<
 string,
 (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 (entry: AllPerformanceEntry, timeOrigin: number) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
> = {
 // @ts-expect-error TODO: entry type does not fit the create* functions entry type
 resource: createResourceEntry,
Expand DownExpand Up@@ -68,6 +68,26 @@ export function webVitalHandler(
 return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
}

/**
 * The time origin that was in effect when an entry was observed.
 *
 * Entries are buffered raw and only converted to wall clock time on flush, which can be minutes later (and across a
 * clock drift correction) for a long-running session. Converting them against the origin that was in effect when they
 * were observed keeps their timestamps correct, whereas the origin at flush time would retroactively shift every
 * buffered entry by the drift.
 */
const ENTRY_TIME_ORIGINS = new WeakMap<AllPerformanceEntry, number>();

/**
 * Records the current time origin for an observed performance entry, so it can be converted to wall clock time later.
 */
export function rememberEntryTimeOrigin(entry: AllPerformanceEntry): void {
 const timeOrigin = correctedPerformanceTimeOrigin();
 if (timeOrigin !== undefined) {
 ENTRY_TIME_ORIGINS.set(entry, timeOrigin);
 }
}

/**
 * Create replay performance entries from the browser performance entries.
 */
Expand All@@ -83,19 +103,24 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 return null;
 }

 return entryType(entry);
 return entryType(entry, getEntryTimeOrigin(entry));
}

function getEntryTimeOrigin(entry: AllPerformanceEntry): number {
 // The stamp is missing for entries that were not routed through `rememberEntryTimeOrigin` (e.g. web vitals, which
 // convert eagerly). correctedPerformanceTimeOrigin can be undefined if `performance` or `performance.now` doesn't
 // exist, but this is already checked by this integration.
 return ENTRY_TIME_ORIGINS.get(entry) ?? correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin;
}

function getAbsoluteTime(time: number): number {
 // correctedPerformanceTimeOrigin can be undefined if `performance` or
 // `performance.now` doesn't exist, but this is already checked by this integration
 return ((correctedPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
function getAbsoluteTime(time: number, timeOrigin: number): number {
 return (timeOrigin + time) / 1000;
}

function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
function createPaintEntry(entry: PerformancePaintTiming, timeOrigin: number): ReplayPerformanceEntry<PaintData> {
 const { duration, entryType, name, startTime } = entry;

 const start = getAbsoluteTime(startTime);
 const start = getAbsoluteTime(startTime, timeOrigin);
 return {
 type: entryType,
 name,
Expand All@@ -105,7 +130,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
 };
}

function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
function createNavigationEntry(
 entry: PerformanceNavigationTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<NavigationData> | null {
 const {
 entryType,
 name,
Expand All@@ -131,8 +159,8 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

 return {
 type: `${entryType}.${type}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(domComplete),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(domComplete, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand All@@ -152,6 +180,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor

function createResourceEntry(
 entry: ExperimentalPerformanceResourceTiming,
 timeOrigin: number,
): ReplayPerformanceEntry<ResourceData> | null {
 const {
 entryType,
Expand All@@ -172,8 +201,8 @@ function createResourceEntry(

 return {
 type: `${entryType}.${initiatorType}`,
 start: getAbsoluteTime(startTime),
 end: getAbsoluteTime(responseEnd),
 start: getAbsoluteTime(startTime, timeOrigin),
 end: getAbsoluteTime(responseEnd, timeOrigin),
 name,
 data: {
 size: transferSize,
Expand DownExpand Up@@ -245,7 +274,8 @@ function getWebVital(
 const value = metric.value;
 const rating = metric.rating;

 const end = getAbsoluteTime(value);
 // Web vitals are converted as they are reported rather than buffered raw, so the current origin is the right one.
 const end = getAbsoluteTime(value, correctedPerformanceTimeOrigin() ?? WINDOW.performance.timeOrigin);

 return {
 type: 'web-vital',
Expand Down

64 changes: 63 additions & 1 deletion
packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
import '../../utils/mock-internal-setTimeout';
import { correctedPerformanceTimeOrigin } from '@sentry/core';
import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import { WINDOW } from '../../../src/constants';
import {
 createPerformanceEntries,
 getCumulativeLayoutShift,
 getInteractionToNextPaint,
 getLargestContentfulPaint,
 rememberEntryTimeOrigin,
} from '../../../src/util/createPerformanceEntries';
import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';

vi.mock('@sentry/core', async () => ({
 ...(await vi.importActual('@sentry/core')),
browserPerformanceTimeOrigin: () => new Date('2023-01-01').getTime(),
correctedPerformanceTimeOrigin: vi.fn(() => new Date('2023-01-01').getTime()),
}));

describe('Unit | util | createPerformanceEntries', () => {
Expand All@@ -21,6 +23,8 @@ describe('Unit | util | createPerformanceEntries', () => {
 });

 beforeEach(function () {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(new Date('2023-01-01').getTime());

 if (!WINDOW.performance.getEntriesByType) {
 WINDOW.performance.getEntriesByType = vi.fn((type: string) => {
 if (type === 'navigation') {
Expand DownExpand Up@@ -67,6 +71,64 @@ describe('Unit | util | createPerformanceEntries', () => {
 expect(createPerformanceEntries([data])).toEqual([]);
 });

 describe('time origin stamping', () => {
 const TIME_ORIGIN = new Date('2023-01-01').getTime();
 // A sleep long enough for `timestampInSeconds` to re-derive its time origin.
 const DRIFT_MS = 360_000;

 function resourceEntry(): PerformanceEntry {
 return {
 name: 'https://example.com/script.js',
 entryType: 'resource',
 startTime: 1_000,
 duration: 100,
 initiatorType: 'script',
 responseEnd: 1_100,
 transferSize: 0,
 encodedBodySize: 0,
 decodedBodySize: 0,
 } as unknown as PerformanceEntry;
 }

 it('converts a stamped entry against the origin from when it was observed', () => {
 const entry = resourceEntry();

 rememberEntryTimeOrigin(entry);

 // The origin is corrected after the entry was observed but before it is flushed.
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([entry]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(replayEntry?.end).toBe((TIME_ORIGIN + 1_100) / 1000);
 });

 it('falls back to the current origin for an entry that was never stamped', () => {
 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);

 const [replayEntry] = createPerformanceEntries([resourceEntry()]);

 expect(replayEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });

 it('stamps each entry with the origin in effect when it was observed', () => {
 const early = resourceEntry();
 rememberEntryTimeOrigin(early);

 vi.mocked(correctedPerformanceTimeOrigin).mockReturnValue(TIME_ORIGIN + DRIFT_MS);
 const late = resourceEntry();
 rememberEntryTimeOrigin(late);

 const [earlyEntry, lateEntry] = createPerformanceEntries([early, late]);

 // Both entries carry the same monotonic `startTime`, so a shared origin would collapse them onto the same
 // wall clock time even though they were observed on either side of a correction.
 expect(earlyEntry?.start).toBe((TIME_ORIGIN + 1_000) / 1000);
 expect(lateEntry?.start).toBe((TIME_ORIGIN + DRIFT_MS + 1_000) / 1000);
 });
 });

 describe('getLargestContentfulPaint', () => {
 it('works with an LCP metric', async () => {
 const metric = {
Expand Down
Loading