Add measurement for cart update subscribers

Shopify · Feb 7, 2025 · dc64fd1 · dc64fd1
1 parent 5be4190
commit dc64fd1
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/assets/cart.js b/assets/cart.js
@@ -32,7 +32,7 @@ class CartItems extends HTMLElement {
       if (event.source === 'cart-items') {
         return;
       }
-      this.onCartUpdate();
+      return this.onCartUpdate();
     });
   }
 
@@ -89,7 +89,7 @@ class CartItems extends HTMLElement {
 
   onCartUpdate() {
     if (this.tagName === 'CART-DRAWER-ITEMS') {
-      fetch(`${routes.cart_url}?section_id=cart-drawer`)
+      return fetch(`${routes.cart_url}?section_id=cart-drawer`)
         .then((response) => response.text())
         .then((responseText) => {
           const html = new DOMParser().parseFromString(responseText, 'text/html');
@@ -106,7 +106,7 @@ class CartItems extends HTMLElement {
           console.error(e);
         });
     } else {
-      fetch(`${routes.cart_url}?section_id=main-cart-items`)
+      return fetch(`${routes.cart_url}?section_id=main-cart-items`)
         .then((response) => response.text())
         .then((responseText) => {
           const html = new DOMParser().parseFromString(responseText, 'text/html');

diff --git a/assets/global.js b/assets/global.js
@@ -1271,6 +1271,11 @@ if (!customElements.get('bulk-add')) {
 class CartPerformance {
   static #metric_prefix = "cart-performance"
 
+  static createStartingMarker(benchmarkName) {
+    const metricName = `${CartPerformance.#metric_prefix}:${benchmarkName}`
+    return performance.mark(`${metricName}:start`);
+  }
+
   static measureFromEvent(benchmarkName, event) {
     const metricName = `${CartPerformance.#metric_prefix}:${benchmarkName}`
     const startMarker = performance.mark(`${metricName}:start`, {
@@ -1286,6 +1291,17 @@ class CartPerformance {
     );
   }
 
+  static measureFromMarker(benchmarkName, startMarker) {
+    const metricName = `${CartPerformance.#metric_prefix}:${benchmarkName}`
+    const endMarker = performance.mark(`${metricName}:end`);
+
+    performance.measure(
+      benchmarkName,
+      startMarker.name,
+      `${metricName}:end`
+    );
+  }
+
   static measure(benchmarkName, callback) {
     const metricName = `${CartPerformance.#metric_prefix}:${benchmarkName}`
     const startMarker = performance.mark(`${metricName}:start`);

diff --git a/assets/product-form.js b/assets/product-form.js
@@ -66,11 +66,14 @@ if (!customElements.get('product-form')) {
               return;
             }
 
+            const startMarker = CartPerformance.createStartingMarker('add:click-event:wait-for-subscribers');
             if (!this.error)
               publish(PUB_SUB_EVENTS.cartUpdate, {
                 source: 'product-form',
                 productVariantId: formData.get('id'),
                 cartData: response,
+              }).then(() => {
+                CartPerformance.measureFromMarker('add:click-event:wait-for-subscribers', startMarker);
               });
             this.error = false;
             const quickAddModal = this.closest('quick-add-modal');

diff --git a/assets/product-info.js b/assets/product-info.js
@@ -340,7 +340,7 @@ if (!customElements.get('product-info')) {
         if (!currentVariantId) return;
 
         this.querySelector('.quantity__rules-cart .loading__spinner').classList.remove('hidden');
-        fetch(`${this.dataset.url}?variant=${currentVariantId}&section_id=${this.dataset.section}`)
+        return fetch(`${this.dataset.url}?variant=${currentVariantId}&section_id=${this.dataset.section}`)
           .then((response) => response.text())
           .then((responseText) => {
             const html = new DOMParser().parseFromString(responseText, 'text/html');

diff --git a/assets/pubsub.js b/assets/pubsub.js
@@ -16,8 +16,8 @@ function subscribe(eventName, callback) {
 
 function publish(eventName, data) {
   if (subscribers[eventName]) {
-    subscribers[eventName].forEach((callback) => {
-      callback(data);
-    });
+    const promises = subscribers[eventName]
+      .map((callback) => callback(data))
+    return Promise.all(promises);
   }
 }