fix(browser): Remove browserPerformanceTimeOrigin side effects

Author: timfish

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -79,7 +79,7 @@ interface StartTrackingWebVitalsOptions {
  */
 export function startTrackingWebVitals({ recordClsStandaloneSpans }: StartTrackingWebVitalsOptions): () => void {
   const performance = getBrowserPerformanceAPI();
-  if (performance && browserPerformanceTimeOrigin) {
+  if (performance && browserPerformanceTimeOrigin()) {
     // @ts-expect-error we want to make sure all of these are available, even if TS is sure they are
     if (performance.mark) {
       WINDOW.performance.mark('sentry-tracing-init');
@@ -109,7 +109,7 @@ export function startTrackingLongTasks(): void {
       return;
     }
     for (const entry of entries) {
-      const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
+      const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);
       const duration = msToSec(entry.duration);
 
       const span = startInactiveSpan({
@@ -143,7 +143,7 @@ export function startTrackingLongAnimationFrames(): void {
         continue;
       }
 
-      const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
+      const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);
       const duration = msToSec(entry.duration);
 
       const attributes: SpanAttributes = {
@@ -189,7 +189,7 @@ export function startTrackingInteractions(): void {
     }
     for (const entry of entries) {
       if (entry.name === 'click') {
-        const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
+        const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);
         const duration = msToSec(entry.duration);
 
         const spanOptions: StartSpanOptions & Required<Pick<StartSpanOptions, 'attributes'>> = {
@@ -255,7 +255,7 @@ function _trackFID(): () => void {
       return;
     }
 
-    const timeOrigin = msToSec(browserPerformanceTimeOrigin as number);
+    const timeOrigin = msToSec(browserPerformanceTimeOrigin() as number);
     const startTime = msToSec(entry.startTime);
     DEBUG_BUILD && logger.log('[Measurements] Adding FID');
     _measurements['fid'] = { value: metric.value, unit: 'millisecond' };
@@ -286,13 +286,14 @@ interface AddPerformanceEntriesOptions {
 /** Add performance related spans to a transaction */
 export function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {
   const performance = getBrowserPerformanceAPI();
-  if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {
+  const origin = browserPerformanceTimeOrigin();
+  if (!performance || !WINDOW.performance.getEntries || !origin) {
     // Gatekeeper if performance API not available
     return;
   }
 
   DEBUG_BUILD && logger.log('[Tracing] Adding & adjusting spans using Performance API');
-  const timeOrigin = msToSec(browserPerformanceTimeOrigin);
+  const timeOrigin = msToSec(origin);
 
   const performanceEntries = performance.getEntries();
 

packages/browser-utils/src/metrics/cls.ts

@@ -84,7 +84,7 @@ export function trackClsAsStandaloneSpan(): void {
 function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined, pageloadSpanId: string) {
   DEBUG_BUILD && logger.log(`Sending CLS span (${clsValue})`);
 
-  const startTime = msToSec((browserPerformanceTimeOrigin || 0) + (entry?.startTime || 0));
+  const startTime = msToSec((browserPerformanceTimeOrigin() || 0) + (entry?.startTime || 0));
   const routeName = getCurrentScope().getScopeData().transactionName;
 
   const name = entry ? htmlTreeAsString(entry.sources[0]?.node) : 'Layout shift';

packages/browser-utils/src/metrics/inp.ts

@@ -26,7 +26,7 @@ const INTERACTIONS_SPAN_MAP = new Map<number, Span>();
  */
 export function startTrackingINP(): () => void {
   const performance = getBrowserPerformanceAPI();
-  if (performance && browserPerformanceTimeOrigin) {
+  if (performance && browserPerformanceTimeOrigin()) {
     const inpCallback = _trackINP();
 
     return (): void => {
@@ -83,7 +83,7 @@ function _trackINP(): () => void {
     const interactionType = INP_ENTRY_MAP[entry.name];
 
     /** Build the INP span, create an envelope from the span, and then send the envelope */
-    const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
+    const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);
     const duration = msToSec(metric.value);
     const activeSpan = getActiveSpan();
     const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;

packages/browser/src/profiling/utils.ts

@@ -251,9 +251,9 @@ export function convertJSSelfProfileToSampledFormat(input: JSSelfProfile): Profi
   // when that happens, we need to ensure we are correcting the profile timings so the two timelines stay in sync.
   // Since JS self profiling time origin is always initialized to performance.timeOrigin, we need to adjust for
   // the drift between the SDK selected value and our profile time origin.
-  const origin =
-    typeof performance.timeOrigin === 'number' ? performance.timeOrigin : browserPerformanceTimeOrigin || 0;
-  const adjustForOriginChange = origin - (browserPerformanceTimeOrigin || origin);
+  const perfOrigin = browserPerformanceTimeOrigin();
+  const origin = typeof performance.timeOrigin === 'number' ? performance.timeOrigin : perfOrigin || 0;
+  const adjustForOriginChange = origin - (perfOrigin || origin);
 
   input.samples.forEach((jsSample, i) => {
     // If sample has no stack, add an empty sample

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -362,10 +362,11 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
 
       if (WINDOW.location) {
         if (instrumentPageLoad) {
+          let origin = browserPerformanceTimeOrigin();
           startBrowserTracingPageLoadSpan(client, {
             name: WINDOW.location.pathname,
             // pageload should always start at timeOrigin (and needs to be in s, not ms)
-            startTime: browserPerformanceTimeOrigin ? browserPerformanceTimeOrigin / 1000 : undefined,
+            startTime: origin ? origin / 1000 : undefined,
             attributes: {
               [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
               [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.browser',

packages/browser/src/tracing/request.ts

@@ -268,7 +268,7 @@ export function extractNetworkProtocol(nextHopProtocol: string): { name: string;
 }
 
 function getAbsoluteTime(time: number = 0): number {
-  return ((browserPerformanceTimeOrigin || performance.timeOrigin) + time) / 1000;
+  return ((browserPerformanceTimeOrigin() || performance.timeOrigin) + time) / 1000;
 }
 
 function resourceTimingEntryToSpanData(resourceTiming: PerformanceResourceTiming): [string, string | number][] {
@@ -278,7 +278,7 @@ function resourceTimingEntryToSpanData(resourceTiming: PerformanceResourceTiming
 
   timingSpanData.push(['network.protocol.version', version], ['network.protocol.name', name]);
 
-  if (!browserPerformanceTimeOrigin) {
+  if (!browserPerformanceTimeOrigin()) {
     return timingSpanData;
   }
   return [

packages/replay-internal/src/util/createPerformanceEntries.ts

@@ -89,7 +89,7 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 function getAbsoluteTime(time: number): number {
   // browserPerformanceTimeOrigin can be undefined if `performance` or
   // `performance.now` doesn't exist, but this is already checked by this integration
-  return ((browserPerformanceTimeOrigin || WINDOW.performance.timeOrigin) + time) / 1000;
+  return ((browserPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000;
 }
 
 function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {

packages/utils/src/time.ts

@@ -73,11 +73,16 @@ export const timestampInSeconds = createUnixTimestampInSecondsFunc();
  */
 export let _browserPerformanceTimeOriginMode: string;
 
+let cachedbrowserPerformanceTimeOrigin: { value: number | undefined } | undefined;
+
 /**
  * The number of milliseconds since the UNIX epoch. This value is only usable in a browser, and only when the
  * performance API is available.
  */
-export const browserPerformanceTimeOrigin = ((): number | undefined => {
+export function browserPerformanceTimeOrigin(): number | undefined {
+  if (cachedbrowserPerformanceTimeOrigin) {
+    return cachedbrowserPerformanceTimeOrigin.value;
+  }
   // Unfortunately browsers may report an inaccurate time origin data, through either performance.timeOrigin or
   // performance.timing.navigationStart, which results in poor results in performance data. We only treat time origin
   // data as reliable if they are within a reasonable threshold of the current time.
@@ -123,5 +128,8 @@ export const browserPerformanceTimeOrigin = ((): number | undefined => {
 
   // Either both timeOrigin and navigationStart are skewed or neither is available, fallback to Date.
   _browserPerformanceTimeOriginMode = 'dateNow';
+
+  cachedbrowserPerformanceTimeOrigin = { value: dateNow };
+
   return dateNow;
-})();
+}