Update server network debug tool (#1511)

.changeset/neat-falcons-add.md

@@ -0,0 +1,58 @@
+---
+'@shopify/remix-oxygen': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+Subrequest Profiler (stable) - Provides an overview of network requests happening on the server side
+
+#### How to use:
+
+1. Run `h2 dev`
+2. Visit http://localhost:3000/subrequest-profiler
+
+#### Set request display name with `storefront.query`:
+
+```tsx
+context.storefront.query(
+  HOMEPAGE_FEATURED_PRODUCTS_QUERY,
+  {
+    displayName: 'Feature products',
+    variables: {
+      country,
+      language,
+    },
+  },
+)
+```
+
+#### Set request debug information with `createWithCache`:
+
+```tsx
+const withCache = createWithCache({
+  cache,
+  waitUntil,
+  request,
+});
+
+const data3p = async () => {
+  return await withCache(
+    ['Some unique cache keys'],
+    CacheLong(),
+    ({addDebugData}) => {
+      return fetch('https://some-3p-endpoint.com').then(async (response) => {
+        if (process.env.NODE_ENV === 'development') {
+          addDebugData({
+            displayName: '3p endpoint display name',
+            response,
+          });
+        }
+
+        return await response.json();
+      });
+    },
+  );
+};
+```
+

packages/cli/package.json

@@ -9,7 +9,7 @@
   "type": "module",
   "scripts": {
     "build": "tsup && node scripts/build-check.mjs",
-    "dev": "tsup --watch",
+    "dev": "tsup --watch ./src",
     "typecheck": "tsc --noEmit",
     "generate:manifest": "node scripts/generate-manifest.mjs",
     "test": "cross-env SHOPIFY_UNIT_TEST=1 vitest run --test-timeout=20000",
@@ -26,7 +26,7 @@
     "@vitest/coverage-v8": "^1.0.4",
     "devtools-protocol": "^0.0.1177611",
     "fast-glob": "^3.2.12",
-    "flame-chart-js": "2.3.1",
+    "flame-chart-js": "2.3.2",
     "get-port": "^7.0.0",
     "type-fest": "^4.5.0",
     "vitest": "^1.0.4"

packages/cli/src/commands/hydrogen/dev.ts

@@ -213,7 +213,7 @@ async function runDev({
           })}`,
         ),
         colors.dim(
-          `\nView server-side network requests: ${miniOxygen.listeningAt}/debug-network`,
+          `\nView server network requests: ${miniOxygen.listeningAt}/subrequest-profiler`,
         ),
       ],
     });

packages/cli/src/lib/mini-oxygen/node.ts

@@ -13,7 +13,7 @@ import type {MiniOxygenInstance, MiniOxygenOptions} from './types.js';
 import {OXYGEN_HEADERS_MAP, logRequestLine} from './common.js';
 import {
   H2O_BINDING_NAME,
-  logRequestEvent,
+  createLogRequestEvent,
   handleDebugNetworkRequest,
   setConstructors,
 } from '../request-events.js';
@@ -35,6 +35,7 @@ export async function startNodeServer({
 
   setConstructors({Response});
 
+  const logRequestEvent = createLogRequestEvent();
   const asyncLocalStorage = new AsyncLocalStorage();
   const serviceBindings = {
     [H2O_BINDING_NAME]: {

packages/cli/src/lib/mini-oxygen/workerd.ts

@@ -18,7 +18,7 @@ import {OXYGEN_HEADERS_MAP, logRequestLine} from './common.js';
 import {
   H2O_BINDING_NAME,
   handleDebugNetworkRequest,
-  logRequestEvent,
+  createLogRequestEvent,
   setConstructors,
 } from '../request-events.js';
 import {
@@ -97,7 +97,7 @@ export async function startWorkerdServer({
           compatibilityDate: '2022-10-31',
           bindings: {...env},
           serviceBindings: {
-            [H2O_BINDING_NAME]: logRequestEvent,
+            [H2O_BINDING_NAME]: createLogRequestEvent({absoluteBundlePath}),
           },
         },
       ],