Update-faro-resource-timings (#708)

grafana · Oct 15, 2024 · 20eb39d · 20eb39d
1 parent a43406f
commit 20eb39d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 - Improvement (`@grafana/faro-web-sdk`): The console instrumentation now sends an `Error` signal
   instead of a `Log` signal for `console.error()` calls (#703).
+- Improvement (`@grafana/faro-web-sdk`): The resource timings instrumentation now includes `ttfb`
+  (Time to First Byte) and `visibilityState` in `faro.performance.resource` timings.
 
 ## 1.10.2
 

diff --git a/packages/web-sdk/src/instrumentations/performance/performanceUtils.test.ts b/packages/web-sdk/src/instrumentations/performance/performanceUtils.test.ts
@@ -71,6 +71,8 @@ describe('performanceUtils', () => {
       renderBlockingStatus: 'unknown',
       protocol: 'h2',
       initiatorType: 'img',
+      ttfb: '359',
+      visibilityState: 'visible',
     } as FaroResourceTiming);
   });
 

diff --git a/packages/web-sdk/src/instrumentations/performance/performanceUtils.ts b/packages/web-sdk/src/instrumentations/performance/performanceUtils.ts
@@ -118,6 +118,8 @@ export function createFaroResourceTiming(resourceEntryRaw: PerformanceResourceTi
     renderBlockingStatus: toFaroPerformanceTimingString(rbs) as FaroResourceTiming['renderBlockingStatus'],
     protocol: nextHopProtocol,
     initiatorType: initiatorType,
+    visibilityState: document.visibilityState,
+    ttfb: toFaroPerformanceTimingString(responseStart - requestStart),
 
     // TODO: add in future iteration, ideally after nested objects are supported by the collector.
     // serverTiming: resourceEntryRaw.serverTiming,
@@ -159,20 +161,18 @@ export function createFaroNavigationTiming(navigationEntryRaw: PerformanceNaviga
   const parserStart = getDocumentParsingTime();
 
   return {
-    visibilityState: document.visibilityState,
+    ...createFaroResourceTiming(navigationEntryRaw),
     pageLoadTime: toFaroPerformanceTimingString(domComplete - fetchStart),
     documentParsingTime: toFaroPerformanceTimingString(parserStart ? domInteractive - parserStart : null),
     domProcessingTime: toFaroPerformanceTimingString(domComplete - domInteractive),
     domContentLoadHandlerTime: toFaroPerformanceTimingString(domContentLoadedEventEnd - domContentLoadedEventStart),
     onLoadTime: toFaroPerformanceTimingString(loadEventEnd - loadEventStart),
 
+    // For navigation entries we can calculate the TTFB based on activationStart. We overwrite the TTFB value coming with the resource entry.
     // For more accuracy on prerendered pages page we calculate relative top the activationStart instead of the start of the navigation.
     // clamp to 0 if activationStart occurs after first byte is received.
     ttfb: toFaroPerformanceTimingString(Math.max(responseStart - (activationStart ?? 0), 0)),
-
     type: type,
-
-    ...createFaroResourceTiming(navigationEntryRaw),
   };
 }
 

diff --git a/packages/web-sdk/src/instrumentations/performance/types.ts b/packages/web-sdk/src/instrumentations/performance/types.ts
@@ -3,13 +3,11 @@ import type { unknownString } from '@grafana/faro-core';
 export type FaroNavigationTiming = Readonly<
   {
     duration: string;
-    visibilityState: DocumentVisibilityState;
     documentParsingTime: string;
     domProcessingTime: string;
     pageLoadTime: string;
     domContentLoadHandlerTime: string;
     onLoadTime: string;
-    ttfb: string;
     type: NavigationTimingType;
   } & FaroResourceTiming
 >;
@@ -33,6 +31,8 @@ export type FaroResourceTiming = Readonly<{
   renderBlockingStatus: 'blocking' | 'non-blocking' | typeof unknownString;
   initiatorType: string;
   // serverTiming: PerformanceServerTiming[];
+  visibilityState: DocumentVisibilityState;
+  ttfb: string;
 }>;
 
 export type FaroNavigationItem = {