feat: change webvitals to batch

lib/client/models/webVitals.js

@@ -3,36 +3,51 @@ import { getClientArch, getBrowserInfo } from '../utils';
 import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals';
 
 export class WebVitalsModel {
+  queue = new Set();
+  addToQueue (metric) {
+    this.queue.add({ metric: metric.value, matricName: metric.name });
+  }
+
+  flushQueue () {
+    if (this.queue.size > 0) {
+      Kadira.send(this._buildPayload([...this.queue]), '/client-metrics');
+      this.queue.clear();
+    }
+  }
+
   startTracking () {
-    const sender = (metric) =>
-      Kadira.send(
-        this._buildPayload({
-          metric: { value: metric.value, rating: metric.rating },
-          metricName: metric.name,
-        }),
-        '/client-metrics'
-      );
-    onCLS(sender);
-    onFCP(sender);
-    onFID(sender);
-    onINP(sender);
-    onLCP(sender);
-    onTTFB(sender);
+    const bindedAddToQueue = this.addToQueue.bind(this);
+    onFCP(bindedAddToQueue);
+    onFID(bindedAddToQueue);
+    onINP(bindedAddToQueue);
+    onLCP(bindedAddToQueue);
+    onTTFB(bindedAddToQueue);
+    onCLS(bindedAddToQueue);
+    // Report all available metrics whenever the page is backgrounded or unloaded.
+    addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'hidden') {
+        this.flushQueue();
+      }
+    });
+
+    // NOTE: Safari does not reliably fire the `visibilitychange` event when the
+    // page is being unloaded. If Safari support is needed, you should also flush
+    // the queue in the `pagehide` event.
+    addEventListener('pagehide', () => this.flushQueue());
   }
   constructor (options) {
     options = options || {};
 
     this.options = options;
   }
-  _buildPayload = function ({ metric, metricName }) {
+  _buildPayload = function (metrics) {
     const arch = getClientArch();
     const browserInfo = getBrowserInfo();
 
     return {
       host: Kadira.options.hostname,
       recordIPAddress: Kadira.options.recordIPAddress,
-      metricName,
-      metric,
+      metrics,
       ...browserInfo,
       arch,
       legacy: arch.endsWith('.legacy'),