From 6861d34a3b768d2390a1344674a3f4508082e1e8 Mon Sep 17 00:00:00 2001
From: Bret Little <bret.little@shopify.com>
Date: Fri, 10 Jun 2022 15:40:08 -0400
Subject: [PATCH 1/2] Add client perf markers

---
 packages/hydrogen/src/entry-client.tsx | 17 ++++++++++++++-
 yarn.lock                              | 29 ++------------------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/packages/hydrogen/src/entry-client.tsx b/packages/hydrogen/src/entry-client.tsx
index 12dcb81320..14844ddb88 100644
--- a/packages/hydrogen/src/entry-client.tsx
+++ b/packages/hydrogen/src/entry-client.tsx
@@ -231,7 +231,14 @@ function useServerResponse(state: any) {
 
   if (rscReader) {
     // The flight response was inlined during SSR, use it directly.
-    response = createFromReadableStream(rscReader);
+    const [streamForRsc, streamForMetrics] = rscReader.tee();
+    response = createFromReadableStream(streamForRsc);
+
+    const metricsReader = streamForMetrics.getReader();
+    metricsReader.read().then(({done}) => {
+      if (done) performance.mark('--hydrogen-hydration-done');
+    });
+
     rscReader = null;
   } else {
     if (
@@ -246,10 +253,18 @@ function useServerResponse(state: any) {
       window.BOOMR.plugins.Hydrogen.trackSubPageLoadPerformance();
     }
 
+    performance.mark('--hydrogen-rsc-start');
+
     // Request a new flight response.
     response = createFromFetch(
       fetch(`${RSC_PATHNAME}?state=` + encodeURIComponent(key))
     );
+    performance.mark('--hydrogen-rsc-end');
+    performance.measure(
+      '--hydrogen-rsc-time',
+      '--hydrogen-rsc-start',
+      '--hydrogen-rsc-end'
+    );
   }
 
   cache.clear();
diff --git a/yarn.lock b/yarn.lock
index f031644a47..d370bb1082 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2508,31 +2508,6 @@
     "@shopify/cli-kit" "2.0.14"
     "@shopify/plugin-ngrok" "^0.2.4"
 
-"@shopify/hydrogen@latest":
-  version "0.22.1"
-  resolved "https://registry.yarnpkg.com/@shopify/hydrogen/-/hydrogen-0.22.1.tgz#9d395fdec652b98f739aefa3af4aed3102e5fb23"
-  integrity sha512-MmUbC4reRX2grCDabXea4DgBsk8p5lGR5Y7nUyzW+CYYzJgm30gHiE6RLMqFjWX1IEllOMTBBfI0sm7Mea80tg==
-  dependencies:
-    "@vitejs/plugin-react" "^1.3.0"
-    abort-controller "^3.0.0"
-    body-parser "^1.20.0"
-    connect "^3.7.0"
-    es-module-lexer "^0.10.0"
-    fast-glob "^3.2.11"
-    graphql "^16.3.0"
-    graphql-tag "^2.12.6"
-    history "^5.3.0"
-    kolorist "^1.5.1"
-    magic-string "^0.26.1"
-    node-fetch "^2.6.7"
-    path-to-regexp "^6.2.0"
-    react-error-boundary "^3.1.3"
-    react-helmet-async "^1.2.3"
-    uuid "^8.3.2"
-    vite-plugin-inspect "^0.3.6"
-    web-streams-polyfill "^3.2.0"
-    worktop "^0.7.3"
-
 "@shopify/mini-oxygen@^0.0.5":
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@shopify/mini-oxygen/-/mini-oxygen-0.0.5.tgz#bb34f07c6aeaf0c346c41e79ac97e811eb2630fc"
@@ -12097,7 +12072,7 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@18.1.0, react-dom@^18.1.0:
+react-dom@^18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
   integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
@@ -12177,7 +12152,7 @@ react-use@^17.4.0:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
-react@18.1.0, react@^18.1.0:
+react@^18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
   integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==

From 8db4969081d84e591e4e917711702530f9405f93 Mon Sep 17 00:00:00 2001
From: Bret Little <bret.little@shopify.com>
Date: Fri, 10 Jun 2022 15:50:35 -0400
Subject: [PATCH 2/2] Add performance markers and measurements

---
 .changeset/shy-feet-run.md             | 5 +++++
 packages/hydrogen/src/entry-client.tsx | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/shy-feet-run.md

diff --git a/.changeset/shy-feet-run.md b/.changeset/shy-feet-run.md
new file mode 100644
index 0000000000..c66ef02cf9
--- /dev/null
+++ b/.changeset/shy-feet-run.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Add client performance markers and measurements.
diff --git a/packages/hydrogen/src/entry-client.tsx b/packages/hydrogen/src/entry-client.tsx
index 14844ddb88..70d17028df 100644
--- a/packages/hydrogen/src/entry-client.tsx
+++ b/packages/hydrogen/src/entry-client.tsx
@@ -234,9 +234,10 @@ function useServerResponse(state: any) {
     const [streamForRsc, streamForMetrics] = rscReader.tee();
     response = createFromReadableStream(streamForRsc);
 
-    const metricsReader = streamForMetrics.getReader();
-    metricsReader.read().then(({done}) => {
+    const rscReaderForMetrics = streamForMetrics.getReader();
+    rscReaderForMetrics.read().then(function read({done}) {
       if (done) performance.mark('--hydrogen-hydration-done');
+      else rscReaderForMetrics.read().then(read);
     });
 
     rscReader = null;