@firebase/performance 0.6.12 → 0.7.0-20250205220033

package/dist/esm/src/services/api_service.d.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { CLSMetricWithAttribution, INPMetricWithAttribution, LCPMetricWithAttribution } from 'web-vitals/attribution';
 declare global {
     interface Window {
         PerformanceObserver: typeof PerformanceObserver;
@@ -34,6 +35,9 @@ export declare class Api {
     private readonly PerformanceObserver;
     private readonly windowLocation;
     readonly onFirstInputDelay?: (fn: (fid: number) => void) => void;
+    readonly onLCP: (fn: (metric: LCPMetricWithAttribution) => void) => void;
+    readonly onINP: (fn: (metric: INPMetricWithAttribution) => void) => void;
+    readonly onCLS: (fn: (metric: CLSMetricWithAttribution) => void) => void;
     readonly localStorage?: Storage;
     readonly document: Document;
     readonly navigator: Navigator;

package/dist/esm/src/services/oob_resources_service.d.ts

@@ -16,3 +16,8 @@
  */
 import { PerformanceController } from '../controllers/perf';
 export declare function setupOobResources(performanceController: PerformanceController): void;
+/**
+ * This service will only export the page load trace once. This function allows
+ * resetting it for unit tests
+ */
+export declare function resetForUnitTests(): void;

package/dist/esm/src/services/perf_logger.d.ts

@@ -17,4 +17,5 @@
 import { NetworkRequest } from '../resources/network_request';
 import { Trace } from '../resources/trace';
 export declare function logTrace(trace: Trace): void;
+export declare function flushLogs(): void;
 export declare function logNetworkRequest(networkRequest: NetworkRequest): void;

package/dist/esm/src/services/transport_service.d.ts

@@ -21,3 +21,8 @@ export declare function setupTransportService(): void;
 export declare function resetTransportService(): void;
 /** Log handler for cc service to send the performance logs to the server. */
 export declare function transportHandler(serializer: (...args: any[]) => string): (...args: unknown[]) => void;
+/**
+ * Force flush the queued events. Useful at page unload time to ensure all
+ * events are uploaded.
+ */
+export declare function flushQueuedEvents(): void;

package/dist/index.cjs.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var util = require('@firebase/util');
 var logger$1 = require('@firebase/logger');
+var attribution = require('web-vitals/attribution');
 var app = require('@firebase/app');
 var component = require('@firebase/component');
 require('@firebase/installations');
 
 const name = "@firebase/performance";
-const version = "0.6.12";
+const version = "0.7.0-20250205220033";
 
 /**
  * @license
@@ -39,6 +40,12 @@ const OOB_TRACE_PAGE_LOAD_PREFIX = '_wt_';
 const FIRST_PAINT_COUNTER_NAME = '_fp';
 const FIRST_CONTENTFUL_PAINT_COUNTER_NAME = '_fcp';
 const FIRST_INPUT_DELAY_COUNTER_NAME = '_fid';
+const LARGEST_CONTENTFUL_PAINT_METRIC_NAME = '_lcp';
+const LARGEST_CONTENTFUL_PAINT_ATTRIBUTE_NAME = 'lcp_element';
+const INTERACTION_TO_NEXT_PAINT_METRIC_NAME = '_inp';
+const INTERACTION_TO_NEXT_PAINT_ATTRIBUTE_NAME = 'inp_interactionTarget';
+const CUMULATIVE_LAYOUT_SHIFT_METRIC_NAME = '_cls';
+const CUMULATIVE_LAYOUT_SHIFT_ATTRIBUTE_NAME = 'cls_largestShiftTarget';
 const CONFIG_LOCAL_STORAGE_KEY = '@firebase/performance/config';
 const CONFIG_EXPIRY_LOCAL_STORAGE_KEY = '@firebase/performance/configexpire';
 const SERVICE = 'performance';
@@ -143,6 +150,9 @@ class Api {
         if (window.perfMetrics && window.perfMetrics.onFirstInputDelay) {
             this.onFirstInputDelay = window.perfMetrics.onFirstInputDelay;
         }
+        this.onLCP = attribution.onLCP;
+        this.onINP = attribution.onINP;
+        this.onCLS = attribution.onCLS;
     }
     getUrl() {
         // Do not capture the string query part of url.
@@ -696,9 +706,8 @@ function changeInitializationStatus() {
  */
 const DEFAULT_SEND_INTERVAL_MS = 10 * 1000;
 const INITIAL_SEND_TIME_DELAY_MS = 5.5 * 1000;
-// If end point does not work, the call will be tried for these many times.
-const DEFAULT_REMAINING_TRIES = 3;
 const MAX_EVENT_COUNT_PER_REQUEST = 1000;
+const DEFAULT_REMAINING_TRIES = 3;
 let remainingTries = DEFAULT_REMAINING_TRIES;
 /* eslint-enable camelcase */
 let queue = [];
@@ -715,11 +724,10 @@ function processQueue(timeOffset) {
         if (remainingTries === 0) {
             return;
         }
-        // If there are no events to process, wait for DEFAULT_SEND_INTERVAL_MS and try again.
-        if (!queue.length) {
-            return processQueue(DEFAULT_SEND_INTERVAL_MS);
+        if (queue.length > 0) {
+            dispatchQueueEvents();
         }
-        dispatchQueueEvents();
+        processQueue(DEFAULT_SEND_INTERVAL_MS);
     }, timeOffset);
 }
 function dispatchQueueEvents() {
@@ -743,7 +751,11 @@ function dispatchQueueEvents() {
         log_event
     };
     /* eslint-enable camelcase */
-    sendEventsToFl(data, staged).catch(() => {
+    postToFlEndpoint(data)
+        .then(() => {
+        remainingTries = DEFAULT_REMAINING_TRIES;
+    })
+        .catch(() => {
         // If the request fails for some reason, add the events that were attempted
         // back to the primary queue to retry later.
         queue = [...staged, ...queue];
@@ -752,41 +764,16 @@ function dispatchQueueEvents() {
         processQueue(DEFAULT_SEND_INTERVAL_MS);
     });
 }
-function sendEventsToFl(data, staged) {
-    return postToFlEndpoint(data)
-        .then(res => {
-        if (!res.ok) {
-            consoleLogger.info('Call to Firebase backend failed.');
-        }
-        return res.json();
-    })
-        .then(res => {
-        // Find the next call wait time from the response.
-        const transportWait = Number(res.nextRequestWaitMillis);
-        let requestOffset = DEFAULT_SEND_INTERVAL_MS;
-        if (!isNaN(transportWait)) {
-            requestOffset = Math.max(transportWait, requestOffset);
-        }
-        // Delete request if response include RESPONSE_ACTION_UNKNOWN or DELETE_REQUEST action.
-        // Otherwise, retry request using normal scheduling if response include RETRY_REQUEST_LATER.
-        const logResponseDetails = res.logResponseDetails;
-        if (Array.isArray(logResponseDetails) &&
-            logResponseDetails.length > 0 &&
-            logResponseDetails[0].responseAction === 'RETRY_REQUEST_LATER') {
-            queue = [...staged, ...queue];
-            consoleLogger.info(`Retry transport request later.`);
-        }
-        remainingTries = DEFAULT_REMAINING_TRIES;
-        // Schedule the next process.
-        processQueue(requestOffset);
-    });
-}
 function postToFlEndpoint(data) {
     const flTransportFullUrl = SettingsService.getInstance().getFlTransportFullUrl();
-    return fetch(flTransportFullUrl, {
-        method: 'POST',
-        body: JSON.stringify(data)
-    });
+    const body = JSON.stringify(data);
+    return navigator.sendBeacon && navigator.sendBeacon(flTransportFullUrl, body)
+        ? Promise.resolve()
+        : fetch(flTransportFullUrl, {
+            method: 'POST',
+            body,
+            keepalive: true
+        }).then();
 }
 function addToQueue(evt) {
     if (!evt.eventTime || !evt.message) {
@@ -807,6 +794,15 @@ serializer) {
         });
     };
 }
+/**
+ * Force flush the queued events. Useful at page unload time to ensure all
+ * events are uploaded.
+ */
+function flushQueuedEvents() {
+    while (queue.length > 0) {
+        dispatchQueueEvents();
+    }
+}
 
 /**
  * @license
@@ -825,12 +821,16 @@ serializer) {
  * limitations under the License.
  */
 let logger;
+//
 // This method is not called before initialization.
 function sendLog(resource, resourceType) {
     if (!logger) {
-        logger = transportHandler(serializer);
+        logger = {
+            send: transportHandler(serializer),
+            flush: flushQueuedEvents
+        };
     }
-    logger(resource, resourceType);
+    logger.send(resource, resourceType);
 }
 function logTrace(trace) {
     const settingsService = SettingsService.getInstance();
@@ -846,10 +846,6 @@ function logTrace(trace) {
     if (!Api.getInstance().requiredApisAvailable()) {
         return;
     }
-    // Only log the page load auto traces if page is visible.
-    if (trace.isAuto && getVisibilityState() !== VisibilityState.VISIBLE) {
-        return;
-    }
     if (isPerfInitialized()) {
         sendTraceLog(trace);
     }
@@ -859,6 +855,11 @@ function logTrace(trace) {
         getInitializationPromise(trace.performanceController).then(() => sendTraceLog(trace), () => sendTraceLog(trace));
     }
 }
+function flushLogs() {
+    if (logger) {
+        logger.flush();
+    }
+}
 function sendTraceLog(trace) {
     if (!getIid()) {
         return;
@@ -868,7 +869,7 @@ function sendTraceLog(trace) {
         !settingsService.logTraceAfterSampling) {
         return;
     }
-    setTimeout(() => sendLog(trace, 1 /* ResourceType.Trace */), 0);
+    sendLog(trace, 1 /* ResourceType.Trace */);
 }
 function logNetworkRequest(networkRequest) {
     const settingsService = SettingsService.getInstance();
@@ -891,7 +892,7 @@ function logNetworkRequest(networkRequest) {
         !settingsService.logNetworkAfterSampling) {
         return;
     }
-    setTimeout(() => sendLog(networkRequest, 0 /* ResourceType.NetworkRequest */), 0);
+    sendLog(networkRequest, 0 /* ResourceType.NetworkRequest */);
 }
 function serializer(resource, resourceType) {
     if (resourceType === 0 /* ResourceType.NetworkRequest */) {
@@ -951,6 +952,46 @@ function getApplicationInfo(firebaseApp) {
 }
 /* eslint-enable camelcase */
 
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function createNetworkRequestEntry(performanceController, entry) {
+    const performanceEntry = entry;
+    if (!performanceEntry || performanceEntry.responseStart === undefined) {
+        return;
+    }
+    const timeOrigin = Api.getInstance().getTimeOrigin();
+    const startTimeUs = Math.floor((performanceEntry.startTime + timeOrigin) * 1000);
+    const timeToResponseInitiatedUs = performanceEntry.responseStart
+        ? Math.floor((performanceEntry.responseStart - performanceEntry.startTime) * 1000)
+        : undefined;
+    const timeToResponseCompletedUs = Math.floor((performanceEntry.responseEnd - performanceEntry.startTime) * 1000);
+    // Remove the query params from logged network request url.
+    const url = performanceEntry.name && performanceEntry.name.split('?')[0];
+    const networkRequest = {
+        performanceController,
+        url,
+        responsePayloadBytes: performanceEntry.transferSize,
+        startTimeUs,
+        timeToResponseInitiatedUs,
+        timeToResponseCompletedUs
+    };
+    logNetworkRequest(networkRequest);
+}
+
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -972,7 +1013,10 @@ const RESERVED_AUTO_PREFIX = '_';
 const oobMetrics = [
     FIRST_PAINT_COUNTER_NAME,
     FIRST_CONTENTFUL_PAINT_COUNTER_NAME,
-    FIRST_INPUT_DELAY_COUNTER_NAME
+    FIRST_INPUT_DELAY_COUNTER_NAME,
+    LARGEST_CONTENTFUL_PAINT_METRIC_NAME,
+    CUMULATIVE_LAYOUT_SHIFT_METRIC_NAME,
+    INTERACTION_TO_NEXT_PAINT_METRIC_NAME
 ];
 /**
  * Returns true if the metric is custom and does not start with reserved prefix, or if
@@ -1211,7 +1255,7 @@ class Trace {
      * @param paintTimings A array which contains paintTiming object of the page load
      * @param firstInputDelay First input delay in millisec
      */
-    static createOobTrace(performanceController, navigationTimings, paintTimings, firstInputDelay) {
+    static createOobTrace(performanceController, navigationTimings, paintTimings, webVitalMetrics, firstInputDelay) {
         const route = Api.getInstance().getUrl();
         if (!route) {
             return;
@@ -1241,7 +1285,21 @@ class Trace {
                 trace.putMetric(FIRST_INPUT_DELAY_COUNTER_NAME, Math.floor(firstInputDelay * 1000));
             }
         }
+        this.addWebVitalMetric(trace, LARGEST_CONTENTFUL_PAINT_METRIC_NAME, LARGEST_CONTENTFUL_PAINT_ATTRIBUTE_NAME, webVitalMetrics.lcp);
+        this.addWebVitalMetric(trace, CUMULATIVE_LAYOUT_SHIFT_METRIC_NAME, CUMULATIVE_LAYOUT_SHIFT_ATTRIBUTE_NAME, webVitalMetrics.cls);
+        this.addWebVitalMetric(trace, INTERACTION_TO_NEXT_PAINT_METRIC_NAME, INTERACTION_TO_NEXT_PAINT_ATTRIBUTE_NAME, webVitalMetrics.inp);
+        // Page load logs are sent at unload time and so should be logged and
+        // flushed immediately.
         logTrace(trace);
+        flushLogs();
+    }
+    static addWebVitalMetric(trace, metricKey, attributeKey, metric) {
+        if (metric) {
+            trace.putMetric(metricKey, Math.floor(metric.value * 1000));
+            if (metric.elementAttribution) {
+                trace.putAttribute(attributeKey, metric.elementAttribution);
+            }
+        }
     }
     static createUserTimingTrace(performanceController, measureName) {
         const trace = new Trace(performanceController, measureName, false, measureName);
@@ -1265,54 +1323,17 @@ class Trace {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function createNetworkRequestEntry(performanceController, entry) {
-    const performanceEntry = entry;
-    if (!performanceEntry || performanceEntry.responseStart === undefined) {
-        return;
-    }
-    const timeOrigin = Api.getInstance().getTimeOrigin();
-    const startTimeUs = Math.floor((performanceEntry.startTime + timeOrigin) * 1000);
-    const timeToResponseInitiatedUs = performanceEntry.responseStart
-        ? Math.floor((performanceEntry.responseStart - performanceEntry.startTime) * 1000)
-        : undefined;
-    const timeToResponseCompletedUs = Math.floor((performanceEntry.responseEnd - performanceEntry.startTime) * 1000);
-    // Remove the query params from logged network request url.
-    const url = performanceEntry.name && performanceEntry.name.split('?')[0];
-    const networkRequest = {
-        performanceController,
-        url,
-        responsePayloadBytes: performanceEntry.transferSize,
-        startTimeUs,
-        timeToResponseInitiatedUs,
-        timeToResponseCompletedUs
-    };
-    logNetworkRequest(networkRequest);
-}
-
-/**
- * @license
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const FID_WAIT_TIME_MS = 5000;
+let webVitalMetrics = {};
+let sentPageLoadTrace = false;
+let firstInputDelay;
 function setupOobResources(performanceController) {
     // Do not initialize unless iid is available.
     if (!getIid()) {
         return;
     }
-    // The load event might not have fired yet, and that means performance navigation timing
-    // object has a duration of 0. The setup should run after all current tasks in js queue.
+    // The load event might not have fired yet, and that means performance
+    // navigation timing object has a duration of 0. The setup should run after
+    // all current tasks in js queue.
     setTimeout(() => setupOobTraces(performanceController), 0);
     setTimeout(() => setupNetworkRequests(performanceController), 0);
     setTimeout(() => setupUserTimingTraces(performanceController), 0);
@@ -1327,27 +1348,44 @@ function setupNetworkRequests(performanceController) {
 }
 function setupOobTraces(performanceController) {
     const api = Api.getInstance();
-    const navigationTimings = api.getEntriesByType('navigation');
-    const paintTimings = api.getEntriesByType('paint');
-    // If First Input Delay polyfill is added to the page, report the fid value.
-    // https://github.com/GoogleChromeLabs/first-input-delay
+    // Better support for Safari
+    if ('onpagehide' in window) {
+        api.document.addEventListener('pagehide', () => sendOobTrace(performanceController));
+    }
+    else {
+        api.document.addEventListener('unload', () => sendOobTrace(performanceController));
+    }
+    api.document.addEventListener('visibilitychange', () => {
+        if (api.document.visibilityState === 'hidden') {
+            sendOobTrace(performanceController);
+        }
+    });
     if (api.onFirstInputDelay) {
-        // If the fid call back is not called for certain time, continue without it.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let timeoutId = setTimeout(() => {
-            Trace.createOobTrace(performanceController, navigationTimings, paintTimings);
-            timeoutId = undefined;
-        }, FID_WAIT_TIME_MS);
         api.onFirstInputDelay((fid) => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-                Trace.createOobTrace(performanceController, navigationTimings, paintTimings, fid);
-            }
+            firstInputDelay = fid;
         });
     }
-    else {
-        Trace.createOobTrace(performanceController, navigationTimings, paintTimings);
-    }
+    api.onLCP((metric) => {
+        var _a;
+        webVitalMetrics.lcp = {
+            value: metric.value,
+            elementAttribution: (_a = metric.attribution) === null || _a === void 0 ? void 0 : _a.element
+        };
+    });
+    api.onCLS((metric) => {
+        var _a;
+        webVitalMetrics.cls = {
+            value: metric.value,
+            elementAttribution: (_a = metric.attribution) === null || _a === void 0 ? void 0 : _a.largestShiftTarget
+        };
+    });
+    api.onINP((metric) => {
+        var _a;
+        webVitalMetrics.inp = {
+            value: metric.value,
+            elementAttribution: (_a = metric.attribution) === null || _a === void 0 ? void 0 : _a.interactionTarget
+        };
+    });
 }
 function setupUserTimingTraces(performanceController) {
     const api = Api.getInstance();
@@ -1361,13 +1399,27 @@ function setupUserTimingTraces(performanceController) {
 }
 function createUserTimingTrace(performanceController, measure) {
     const measureName = measure.name;
-    // Do not create a trace, if the user timing marks and measures are created by the sdk itself.
+    // Do not create a trace, if the user timing marks and measures are created by
+    // the sdk itself.
     if (measureName.substring(0, TRACE_MEASURE_PREFIX.length) ===
         TRACE_MEASURE_PREFIX) {
         return;
     }
     Trace.createUserTimingTrace(performanceController, measureName);
 }
+function sendOobTrace(performanceController) {
+    if (!sentPageLoadTrace) {
+        sentPageLoadTrace = true;
+        const api = Api.getInstance();
+        const navigationTimings = api.getEntriesByType('navigation');
+        const paintTimings = api.getEntriesByType('paint');
+        // On page unload web vitals may be updated so queue the oob trace creation
+        // so that these updates have time to be included.
+        setTimeout(() => {
+            Trace.createOobTrace(performanceController, navigationTimings, paintTimings, webVitalMetrics, firstInputDelay);
+        }, 0);
+    }
+}
 
 /**
  * @license