Update server network debug tool

.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

@@ -207,7 +207,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

@@ -12,7 +12,7 @@ import type {MiniOxygenInstance, MiniOxygenOptions} from './types.js';
 import {OXYGEN_HEADERS_MAP, logRequestLine} from './common.js';
 import {
   H2O_BINDING_NAME,
-  logRequestEvent,
+  createLogRequestEvent,
   handleDebugNetworkRequest,
 } from '../request-events.js';
 
@@ -31,6 +31,7 @@ export async function startNodeServer({
     }),
   );
 
+  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}),
           },
         },
       ],

packages/cli/src/lib/request-events.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import {EventEmitter} from 'node:events';
 import {ReadableStream} from 'node:stream/web';
 import {getGraphiQLUrl} from './graphiql-url.js';
@@ -7,6 +8,7 @@ import type {
   Response as WorkerdResponse,
   ResponseInit,
 } from 'miniflare';
+import {mapSourcePosition} from 'source-map-support';
 
 export const H2O_BINDING_NAME = 'H2O_LOG_EVENT';
 
@@ -23,7 +25,7 @@ export function setConstructors(constructors: {
   ResponseConstructor = constructors.Response;
 }
 
-export const DEV_ROUTES = new Set(['/graphiql', '/debug-network']);
+export const DEV_ROUTES = new Set(['/graphiql', '/subrequest-profiler']);
 
 type RequestEvent = {
   event: string;
@@ -44,15 +46,29 @@ export type H2OEvent = {
   cacheStatus?: 'MISS' | 'HIT' | 'STALE' | 'PUT';
   waitUntil?: ExecutionContext['waitUntil'];
   graphql?: string;
+  stackInfo?: {
+    file?: string;
+    func?: string;
+    line?: number;
+    column?: number;
+  };
+  responsePayload?: any;
+  responseInit?: ResponseInit;
+  cache?: {
+    status?: string;
+    strategy?: string;
+    key?: string | readonly unknown[];
+  };
+  displayName?: string;
 };
 
 async function getRequestInfo(request: RequestKind) {
   const data = (await request.json()) as H2OEvent;
 
   return {
-    id: data.requestId ?? '',
+    ...data,
+    requestId: data.requestId ?? '',
     eventType: data.eventType || 'unknown',
-    startTime: data.startTime,
     endTime: data.endTime || Date.now(),
     purpose: data.purpose === 'prefetch' ? '(prefetch)' : '',
     cacheStatus: data.cacheStatus ?? '',
@@ -79,45 +95,75 @@ async function clearHistory<R extends RequestKind>(
   return createResponse<R>();
 }
 
-export async function logRequestEvent<R extends RequestKind>(
-  request: R,
-): Promise<InferredResponse<R>> {
-  const url = new URL(request.url);
-  if (DEV_ROUTES.has(url.pathname)) {
-    return createResponse<R>();
-  }
+export function createLogRequestEvent(options?: {absoluteBundlePath?: string}) {
+  return async function logRequestEvent<R extends RequestKind>(
+    request: R,
+  ): Promise<InferredResponse<R>> {
+    const url = new URL(request.url);
+    if (DEV_ROUTES.has(url.pathname)) {
+      return createResponse<R>();
+    }
 
-  const {eventType, purpose, graphql, ...data} = await getRequestInfo(request);
+    const {eventType, purpose, graphql, stackInfo, ...data} =
+      await getRequestInfo(request);
 
-  let graphiqlLink = '';
-  let description = request.url;
+    let graphiqlLink = '';
+    let description = request.url;
 
-  if (eventType === 'subrequest') {
-    description =
-      graphql?.query
-        .match(/(query|mutation)\s+(\w+)/)?.[0]
-        ?.replace(/\s+/, ' ') || decodeURIComponent(url.search.slice(1));
+    if (eventType === 'subrequest') {
+      description =
+        graphql?.query
+          .match(/(query|mutation)\s+(\w+)/)?.[0]
+          ?.replace(/\s+/, ' ') ||
+        decodeURIComponent(url.search.slice(1)) ||
+        request.url;
 
-    if (graphql) {
-      graphiqlLink = getGraphiQLUrl({graphql});
+      if (graphql) {
+        graphiqlLink = getGraphiQLUrl({graphql});
+      }
     }
-  }
-
-  const event = {
-    event: EVENT_MAP[eventType] || eventType,
-    data: JSON.stringify({
-      ...data,
-      url: `${purpose} ${description}`.trim(),
-      graphiqlLink,
-    }),
-  };
 
-  eventHistory.push(event);
-  if (eventHistory.length > 100) eventHistory.shift();
+    let stackLine: string | null = null;
+    let stackLink: string | null = null;
 
-  eventEmitter.emit('request', event);
+    if (stackInfo?.file) {
+      if (!path.isAbsolute(stackInfo.file) && options?.absoluteBundlePath) {
+        stackInfo.file = options.absoluteBundlePath;
+      }
 
-  return createResponse<R>();
+      const {source, line, column} = mapSourcePosition({
+        source: stackInfo.file,
+        line: stackInfo.line ?? 0,
+        column: stackInfo.column ?? 0,
+      });
+
+      stackLine = `${source}:${line}:${column + 1}`;
+      stackLink = `vscode://${path.join('file', stackLine)}`;
+
+      stackLine = stackLine.split(path.sep + 'app' + path.sep)[1] ?? stackLine;
+      if (stackInfo.func) {
+        stackLine = `${stackInfo.func.replace(/\d+$/, '')} (${stackLine})`;
+      }
+    }
+
+    const event = {
+      event: EVENT_MAP[eventType] || eventType,
+      data: JSON.stringify({
+        ...data,
+        url: `${purpose} ${description}`.trim(),
+        graphiqlLink,
+        stackLine,
+        stackLink,
+      }),
+    };
+
+    eventHistory.push(event);
+    if (eventHistory.length > 100) eventHistory.shift();
+
+    eventEmitter.emit('request', event);
+
+    return createResponse<R>();
+  };
 }
 
 function streamRequestEvents<R extends RequestKind>(