fix: better handle TTFB from BFCache

Zizzamia · Feb 3, 2023 · 6ede48c · 6ede48c
1 parent 1f9d829
commit 6ede48c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -118,7 +118,10 @@ const perfume = new Perfume({
         myAnalyticsTool.track('storageEstimate', data);
         break;
       case 'TTFB':
-        myAnalyticsTool.track('timeToFirstByte', { duration: data });
+        // Zero value mean than page restored from Back-Forward Cache, and you can ignore it before reporting
+        if (data > 0) {
+          myAnalyticsTool.track('timeToFirstByte', { duration: data });
+        }
         break;
       case 'RT':
         myAnalyticsTool.track('redirectTime', { duration: data });

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/observe.ts b/src/observe.ts
@@ -18,8 +18,12 @@ export const initPerformanceObserver = (): void => {
   onTTFB(report => {
     // Calculate the request time by subtracting from TTFB
     // everything that happened prior to the request starting.
+    //
+    // report.entries[0] will be missing when page was restored from Back-Forward Cache.
+    // In this case, `0` value will be reported, and perfume.js users can decide how to handle it (report `0` or ignore it)
+    //
     // @ts-ignore
-    report.value = report.value - report.entries[0].requestStart;
+    report.value = report.entries[0] ? report.value - report.entries[0].requestStart : report.value;
     // @ts-ignore
     logMetric(report);
   }, config.reportOptions.ttfb);