feat(apm): Update Span timing from absolute ref

Use performance.timing.navigationStart as the absolute reference to
update Span start and end timestamps.

Author: rhcarvalho

packages/apm/src/integrations/tracing.ts

@@ -382,15 +382,11 @@ export class Tracing implements Integration {
       // Gatekeeper if performance API not available
       return;
     }
+
     logger.log('[Tracing] Adding & adjusting spans using Performance API');
-    let navigationOffset = 0;
-    if (
-      transactionSpan.op === 'navigation' &&
-      transactionSpan.data &&
-      typeof transactionSpan.data.offset === 'number'
-    ) {
-      navigationOffset = transactionSpan.data.offset;
-    }
+
+    const navigationStart = Tracing._msToSec(performance.timing.navigationStart);
+
     // tslint:disable-next-line: completed-docs
     function addSpan(span: SpanClass): void {
       if (transactionSpan.spanRecorder) {
@@ -404,8 +400,8 @@ export class Tracing implements Integration {
         description: event,
         op: 'browser',
       });
-      span.startTimestamp = parent.startTimestamp + Tracing._msToSec(entry[`${event}Start`]);
-      span.timestamp = parent.startTimestamp + Tracing._msToSec(entry[`${event}End`]);
+      span.startTimestamp = navigationStart + Tracing._msToSec(entry[`${event}Start`]);
+      span.timestamp = navigationStart + Tracing._msToSec(entry[`${event}End`]);
       addSpan(span);
     }
 
@@ -415,15 +411,15 @@ export class Tracing implements Integration {
         description: 'request',
         op: 'browser',
       });
-      request.startTimestamp = parent.startTimestamp + Tracing._msToSec(entry.requestStart);
-      request.timestamp = parent.startTimestamp + Tracing._msToSec(entry.responseEnd);
+      request.startTimestamp = navigationStart + Tracing._msToSec(entry.requestStart);
+      request.timestamp = navigationStart + Tracing._msToSec(entry.responseEnd);
       addSpan(request);
       const response = parent.child({
         description: 'response',
         op: 'browser',
       });
-      response.startTimestamp = parent.startTimestamp + Tracing._msToSec(entry.responseStart);
-      response.timestamp = parent.startTimestamp + Tracing._msToSec(entry.responseEnd);
+      response.startTimestamp = navigationStart + Tracing._msToSec(entry.responseStart);
+      response.timestamp = navigationStart + Tracing._msToSec(entry.responseEnd);
       addSpan(response);
     }
 
@@ -469,7 +465,7 @@ export class Tracing implements Integration {
               description: `${entry.entryType} ${entry.name}`,
               op: 'mark',
             });
-            mark.startTimestamp = transactionSpan.startTimestamp + startTime - navigationOffset;
+            mark.startTimestamp = navigationStart + startTime;
             mark.timestamp = mark.startTimestamp + duration;
             if (tracingInitMarkStartTime === undefined && entry.name === 'sentry-tracing-init') {
               tracingInitMarkStartTime = mark.startTimestamp;
@@ -483,7 +479,7 @@ export class Tracing implements Integration {
               if (transactionSpan.spanRecorder) {
                 transactionSpan.spanRecorder.finishedSpans.map((finishedSpan: SpanClass) => {
                   if (finishedSpan.description && finishedSpan.description.indexOf(resourceName) !== -1) {
-                    finishedSpan.startTimestamp = transactionSpan.startTimestamp + startTime - navigationOffset;
+                    finishedSpan.startTimestamp = navigationStart + startTime;
                     finishedSpan.timestamp = finishedSpan.startTimestamp + duration;
                   }
                 });
@@ -493,7 +489,7 @@ export class Tracing implements Integration {
                 description: `${entry.initiatorType} ${resourceName}`,
                 op: `resource`,
               });
-              resource.startTimestamp = transactionSpan.startTimestamp + startTime - navigationOffset;
+              resource.startTimestamp = navigationStart + startTime;
               resource.timestamp = resource.startTimestamp + duration;
               // We remember the entry script end time to calculate the difference to the first init mark
               if (entryScriptStartEndTime === undefined && (entryScriptSrc || '').includes(resourceName)) {
@@ -651,10 +647,17 @@ export class Tracing implements Integration {
           });
         }
         span.finish();
-        // If there is an offset in data, we need to shift timestamps towards it
-        if (span.data && typeof span.data.offset === 'number' && typeof span.timestamp === 'number') {
-          span.startTimestamp += span.data.offset;
-          span.timestamp += span.data.offset;
+        // If there is an offset in data, update timestamps accordingly
+        if (
+          global.performance &&
+          span.data &&
+          typeof span.data.offset === 'number' &&
+          typeof span.timestamp === 'number'
+        ) {
+          const navigationStart = performance.timing.navigationStart;
+          const duration = span.timestamp - span.startTimestamp;
+          span.startTimestamp = navigationStart + span.data.offset;
+          span.timestamp = navigationStart + duration;
         }
       }
       // tslint:disable-next-line: no-dynamic-delete