Server-side network request developer tool (unstable)

[wizardlyhel]

Hydrogen introduces a virtual route (unstable) to debug server-side network request. (Available now with @2023.7.7 version)

This tool will capture all storefront api requests and cache requests and display it in a timeline flame chart.

How to use

1. Make sure your project is at the required package versions

     "dependencies": {
       "@remix-run/react": "1.19.1",
       "@shopify/cli": "3.48.0",
       "@shopify/cli-hydrogen": "^5.2.3",
       "@shopify/hydrogen": "^2023.7.7",
       "@shopify/remix-oxygen": "^1.1.4",
   

2. Update your server.ts so that it also passes in the waitUntil and env.

     const handleRequest = createRequestHandler({
       build: remixBuild,
       mode: process.env.NODE_ENV,
   +    getLoadContext: () => ({session, storefront, env, waitUntil}),
     });

   If you are using typescript, make sure to update remix.env.d.ts

     declare module '@shopify/remix-oxygen' {
       export interface AppLoadContext {
   +     env: Env;
         cart: HydrogenCart;
         storefront: Storefront;
         session: HydrogenSession;
   +      waitUntil: ExecutionContext['waitUntil'];
       }
     }

3. Run npm run dev and you should see terminal log information about a new virtual route that you can view server-side network requests at http://localhost:3000/debug-network

   

4. Open http://localhost:3000/debug-network in a tab and your app another tab. When you navigate around your app, you should see server network requests being logged in the debug-network tab

   

Chart legend & terminologies

• Main request - green bar is the time spent on server before response is ready to be stream; blue bar is the time spent on streaming content to client.
• MISS - server will make a fetch request and make a PUT request for the result.
• HIT - server will use the response stored in cache.
• STALE - server will use the response store in cache and also make a new fetch request to get fresh data to put in cache.
• PUT - server will store the result into cache.

Problem

One of the main benefits of Hydrogen is that developers can construct a page with multiple api calls. However, there is no convenient way to know if a page is being implemented poorly.

For example, request waterfall. Unknowingly, developers can create request waterfalls when they don’t need to.

const shopName = await storefront.query(SHOP_NAME_QUERY);
const shopPolicy = await storefront.query(SHOP_POLICY_QUERY);
const availableCountry = await storefront.query(AVAILABLE_COUNTRY_QUERY);

Where a simple fix to this issue is to fix the code with a Promise.all.

const [
  shopName,
  shopPolicy,
  availableCountry,
] = await Promise.all([
  storefront.query(SHOP_NAME_QUERY),
  storefront.query(SHOP_POLICY_QUERY),
  storefront.query(AVAILABLE_COUNTRY_QUERY),
]);

Known limitations

• Will not show direct fetch requests - you can work around this by wrapping fetch with createWithCache
• Does not work in production/preview deployments

Feedbacks

Give us feedbacks and let us know what would you like to see in this debug tool. Some thoughts in brewing from the Hydrogen team:

• What kind of time series control should we have?
  • Toggle - clear chart on every navigation?
• What additional response information should we have?
• What should we see in the hover pop-up for each request?
• ...

Gathered feedbacks from elsewhere

• A way to provide label for the sub requests - the tool currently cannot regex for query name when the query is using graphql alternatives like groq

[duncan-fairley]

This is a wonderful addition. Begins to answer many questions we've had running Hydrogen sites.

1. Think it would be very helpful by default to clear chart on every navigation event (with an option to preserve log)
   • One of the hardest problems we've encountered to triage and resolve is the Too many subrequests Cloudflare limitation.
   • This visualization gets us very close to understanding what sub-requests are being dispatched in each request
2. I can't find any way to scroll the timeline view vertically or expand the window when you have a large stack of requests
   • Additionally / alternatively it would be great to be able to adjust the size of the timeline view
3. I think I might be helpful to see a list / table view of all requests below the timeline
   • As it stands cache hits can become too thin to see / interact with
4. I'd very much like the option to deeplink from a storefront query / mutation into Graphiql with the query prefilled (including variables)
5. It would be very useful to surface the Storefront X-Request-ID in this view since I could see using this frequently in debugging / interacting with Shopify.
   • This is also an unfortunate limitation in Graphiql

Thanks for pulling this together, helps us greatly.

[blittle]

Also would be interesting to see request failures colored differently.

[danieldietzel]

This will be very useful for errors that are hard to find in the stack

[wizardlyhel]

Available in 2024.1.0 - Released stable version of this tool called Subrequest Profiler

Doc: https://shopify.dev/docs/custom-storefronts/hydrogen/debugging/subrequest-profiler