getsentry · dashed · Oct 7, 2020 · Aug 21, 2020 · Sep 16, 2020 · Sep 17, 2020
diff --git a/packages/tracing/src/browser/metrics.ts b/packages/tracing/src/browser/metrics.ts
@@ -1,17 +1,24 @@
 /* eslint-disable max-lines */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { SpanContext } from '@sentry/types';
+import { Measurements, SpanContext } from '@sentry/types';
 import { getGlobalObject, logger } from '@sentry/utils';
 
 import { Span } from '../span';
 import { Transaction } from '../transaction';
 import { msToSec } from './utils';
 
-const global = getGlobalObject<Window>();
+// https://wicg.github.io/event-timing/#sec-performance-event-timing
+interface PerformanceEventTiming extends PerformanceEntry {
+  processingStart: DOMHighResTimeStamp;
+  cancelable?: boolean;
+  target?: Element;
+}
 
+const global = getGlobalObject<Window>();
 /** Class tracking metrics  */
 export class MetricsInstrumentation {
   private _lcp: Record<string, any> = {};
+  private _measurements: Measurements = {};
 
   private _performanceCursor: number = 0;
 
@@ -22,6 +29,7 @@ export class MetricsInstrumentation {
       }
 
       this._trackLCP();
+      this._trackFID();
     }
   }
 
@@ -85,6 +93,21 @@ export class MetricsInstrumentation {
             if (tracingInitMarkStartTime === undefined && entry.name === 'sentry-tracing-init') {
               tracingInitMarkStartTime = startTimestamp;
             }
+
+            // capture web vitals
+
+            if (entry.name === 'first-paint') {
+              logger.log('[Measurements] Adding FP (First Paint)');
+              this._measurements['fp'] = { value: entry.startTime };
+              this._measurements['mark.fp'] = { value: startTimestamp };
+            }
+
+            if (entry.name === 'first-contentful-paint') {
+              logger.log('[Measurements] Adding FCP (First Contentful Paint)');
+              this._measurements['fcp'] = { value: entry.startTime };
+              this._measurements['mark.fcp'] = { value: startTimestamp };
+            }
+
             break;
           }
           case 'resource': {
@@ -111,6 +134,11 @@ export class MetricsInstrumentation {
     }
 
     this._performanceCursor = Math.max(performance.getEntries().length - 1, 0);
+
+    // Measurements are only available for pageload transactions
+    if (transaction.op === 'pageload') {
+      transaction.setMeasurements(this._measurements);
+    }
   }
 
   private _forceLCP: () => void = () => {
@@ -154,6 +182,14 @@ export class MetricsInstrumentation {
             ...(entry.size && { elementSize: entry.size }),
             value: entry.startTime,
           };
+
+          logger.log('[Measurements] Adding LCP (Largest Contentful Paint)');
+
+          this._measurements['lcp'] = { value: entry.startTime };
+
+          const timeOrigin = msToSec(performance.timeOrigin);
+          const startTime = msToSec(entry.startTime as number);
+          this._measurements['mark.lcp'] = { value: timeOrigin + startTime };
         }
       };
 
@@ -166,7 +202,6 @@ export class MetricsInstrumentation {
       // i.e. entries that occurred before calling `observe()` below.
       po.observe({
         buffered: true,
-        // @ts-ignore type does not exist on obj
         type: 'largest-contentful-paint',
       });
 
@@ -179,6 +214,63 @@ export class MetricsInstrumentation {
       // Do nothing if the browser doesn't support this API.
     }
   }
+
+  /** Starts tracking the First Input Delay on the current page. */
+  private _trackFID(): void {
+    // Based on reference implementation from https://web.dev/fid/#measure-fid-in-javascript.
+    // Use a try/catch instead of feature detecting `first-input`
+    // support, since some browsers throw when using the new `type` option.
+    // https://bugs.webkit.org/show_bug.cgi?id=209216
+    try {
+      // Keep track of whether (and when) the page was first hidden, see:
+      // https://github.com/w3c/page-visibility/issues/29
+      // NOTE: ideally this check would be performed in the document <head>
+      // to avoid cases where the visibility state changes before this code runs.
+      let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
+      document.addEventListener(
+        'visibilitychange',
+        event => {
+          firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
+        },
+        { once: true },
+      );
+
+      const updateFID = (entry: PerformanceEventTiming, po: PerformanceObserver): void => {
+        // Only report FID if the page wasn't hidden prior to
+        // the entry being dispatched. This typically happens when a
+        // page is loaded in a background tab.
+        if (entry.startTime < firstHiddenTime) {
+          const fidValue = entry.processingStart - entry.startTime;
+
+          logger.log('[Measurements] Adding FID (First Input Delay)');
+
+          // Report the FID value to an analytics endpoint.
+          this._measurements['fid'] = { value: fidValue };
+
+          const timeOrigin = msToSec(performance.timeOrigin);
+          const startTime = msToSec(entry.startTime as number);
+          this._measurements['mark.fid'] = { value: timeOrigin + startTime };
+
+          // Disconnect the observer.
+          po.disconnect();
+        }
+      };
+
+      // Create a PerformanceObserver that calls `updateFID` for each entry.
+      const po = new PerformanceObserver(entryList => {
+        entryList.getEntries().forEach(entry => updateFID(entry as PerformanceEventTiming, po));
+      });
+
+      // Observe entries of type `first-input`, including buffered entries,
+      // i.e. entries that occurred before calling `observe()` below.
+      po.observe({
+        buffered: true,
+        type: 'first-input',
+      });
+    } catch (e) {
+      // Do nothing if the browser doesn't support this API.
+    }
+  }
 }
 
 /** Instrument navigation entries */

diff --git a/packages/tracing/src/transaction.ts b/packages/tracing/src/transaction.ts
@@ -1,12 +1,13 @@
 import { getCurrentHub, Hub } from '@sentry/hub';
-import { TransactionContext } from '@sentry/types';
+import { Event, Measurements, TransactionContext } from '@sentry/types';
 import { isInstanceOf, logger } from '@sentry/utils';
 
 import { Span as SpanClass, SpanRecorder } from './span';
 
 /** JSDoc */
 export class Transaction extends SpanClass {
   public name?: string;
+  private _measurements: Measurements = {};
 
   /**
    * The reference to the current hub.
@@ -54,6 +55,14 @@ export class Transaction extends SpanClass {
     this.spanRecorder.add(this);
   }
 
+  /**
+   * Set observed measurements for this transaction.
+   * @hidden
+   */
+  public setMeasurements(measurements: Measurements): void {
+    this._measurements = { ...measurements };
+  }
+
   /**
    * @inheritDoc
    */
@@ -88,6 +97,15 @@ export class Transaction extends SpanClass {
       }).endTimestamp;
     }
 
+    const extra: Partial<Event> = {};
+
+    const hasMeasurements = Object.keys(this._measurements).length > 0;
+
+    if (hasMeasurements) {
+      logger.log('[Measurements] Adding measurements to transaction', JSON.stringify(this._measurements, undefined, 2));
+      extra.measurements = this._measurements;
+    }
+
     return this._hub.captureEvent({
       contexts: {
         trace: this.getTraceContext(),
@@ -98,6 +116,7 @@ export class Transaction extends SpanClass {
       timestamp: this.endTimestamp,
       transaction: this.name,
       type: 'transaction',
+      ...extra,
     });
   }
 }
diff --git a/packages/types/src/event.ts b/packages/types/src/event.ts
@@ -6,6 +6,7 @@ import { SdkInfo } from './sdkinfo';
 import { Severity } from './severity';
 import { Span } from './span';
 import { Stacktrace } from './stacktrace';
+import { Measurements } from './transaction';
 import { User } from './user';
 
 /** JSDoc */
@@ -39,6 +40,7 @@ export interface Event {
   user?: User;
   type?: EventType;
   spans?: Span[];
+  measurements?: Measurements;
 }
 
 /** JSDoc */

diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -25,6 +25,7 @@ export { Stacktrace } from './stacktrace';
 export { Status } from './status';
 export {
   CustomSamplingContext,
+  Measurements,
   SamplingContext,
   TraceparentData,
   Transaction,

diff --git a/packages/types/src/transaction.ts b/packages/types/src/transaction.ts
@@ -98,3 +98,5 @@ export interface SamplingContext extends CustomSamplingContext {
    */
   request?: ExtractedNodeRequestData;
 }
+
+export type Measurements = Record<string, { value: number }>;