feat: Report LCP metric on pageload transactions

rhcarvalho · rhcarvalho · commit 8b3215497595 · 2020-06-04T17:09:20.000+02:00
Largest Contentful Paint (LCP) is an user-centric metric for measuring perceived load speed. It marks the point in the page load timeline when the page's main content has likely loaded. Reference: https://web.dev/lcp/#measure-lcp-in-javascript
diff --git a/packages/apm/src/integrations/tracing.ts b/packages/apm/src/integrations/tracing.ts
@@ -14,6 +14,73 @@ import { Span as SpanClass } from '../span';
 import { SpanStatus } from '../spanstatus';
 import { Transaction } from '../transaction';
 
+/** Holds the latest LargestContentfulPaint value (it changes during page load). */
+let lcp: { [key: string]: any };
+
+/** Force any pending LargestContentfulPaint records to be dispatched. */
+let forceLCP = () => {
+  /* No-op, replaced later if LCP API is available. */
+};
+
+// Based on reference implementation from https://web.dev/lcp/#measure-lcp-in-javascript.
+{
+  // Use a try/catch instead of feature detecting `largest-contentful-paint`
+  // 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 updateLCP = (entry: PerformanceEntry) => {
+      // Only include an LCP entry 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) {
+        // NOTE: the `startTime` value is a getter that returns the entry's
+        // `renderTime` value, if available, or its `loadTime` value otherwise.
+        // The `renderTime` value may not be available if the element is an image
+        // that's loaded cross-origin without the `Timing-Allow-Origin` header.
+        lcp = {
+          // @ts-ignore
+          elementId: entry.id,
+          // @ts-ignore
+          elementSize: entry.size,
+          largestContentfulPaint: entry.startTime,
+        };
+      }
+    };
+
+    // Create a PerformanceObserver that calls `updateLCP` for each entry.
+    const po = new PerformanceObserver(entryList => {
+      entryList.getEntries().forEach(updateLCP);
+    });
+
+    // Observe entries of type `largest-contentful-paint`, including buffered entries,
+    // i.e. entries that occurred before calling `observe()` below.
+    po.observe({
+      buffered: true,
+      // @ts-ignore
+      type: 'largest-contentful-paint',
+    });
+
+    forceLCP = () => {
+      po.takeRecords().forEach(updateLCP);
+    };
+  } catch (e) {
+    // Do nothing if the browser doesn't support this API.
+  }
+}
+
 /**
  * Options for Tracing integration
  */
@@ -447,7 +514,7 @@ export class Tracing implements Integration {
   }
 
   /**
-   * Finshes the current active transaction
+   * Finishes the current active transaction
    */
   public static finishIdleTransaction(endTimestamp: number): void {
     const active = Tracing._activeTransaction;
@@ -505,6 +572,16 @@ export class Tracing implements Integration {
 
     Tracing._log('[Tracing] Adding & adjusting spans using Performance API');
 
+    // FIXME: depending on the 'op' directly is brittle.
+    if (transactionSpan.op === 'pageload') {
+      // Force any pending records to be dispatched.
+      forceLCP();
+      if (lcp) {
+        // Set the last observed LCP score.
+        transactionSpan.setData('_sentry_extra_metrics', JSON.stringify({ lcp }));
+      }
+    }
+
     const timeOrigin = Tracing._msToSec(performance.timeOrigin);
 
     // tslint:disable-next-line: completed-docs
