Add --verbose flag to dev and preview commands (#1928)

* Add --verbose flag to print extra information about Hydrogen and Oxygen * Changesets
Shopify · Apr 1, 2024 · 9351f9f · 9351f9f
1 parent e3e23e2
commit 9351f9f
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 32 deletions.
diff --git a/.changeset/witty-rockets-guess.md b/.changeset/witty-rockets-guess.md
@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Add `--verbose` flag to `h2 dev` and `h2 preview` commands to enable verbose logging. Only CLI logs become verbose by default. If you also want to see verbose logs from Vite as well, use `DEBUG=* h2 dev` instead.
diff --git a/packages/cli/oclif.manifest.json b/packages/cli/oclif.manifest.json
@@ -552,6 +552,14 @@
           "required": false,
           "allowNo": false,
           "type": "boolean"
+        },
+        "verbose": {
+          "description": "Outputs more information about the command's execution.",
+          "env": "SHOPIFY_HYDROGEN_FLAG_VERBOSE",
+          "name": "verbose",
+          "required": false,
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -695,6 +703,14 @@
           "required": false,
           "allowNo": false,
           "type": "boolean"
+        },
+        "verbose": {
+          "description": "Outputs more information about the command's execution.",
+          "env": "SHOPIFY_HYDROGEN_FLAG_VERBOSE",
+          "name": "verbose",
+          "required": false,
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -1057,6 +1073,14 @@
           "name": "debug",
           "allowNo": false,
           "type": "boolean"
+        },
+        "verbose": {
+          "description": "Outputs more information about the command's execution.",
+          "env": "SHOPIFY_HYDROGEN_FLAG_VERBOSE",
+          "name": "verbose",
+          "required": false,
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,

diff --git a/packages/cli/src/commands/hydrogen/dev-vite.ts b/packages/cli/src/commands/hydrogen/dev-vite.ts
@@ -1,6 +1,11 @@
 import path from 'node:path';
 import {fileURLToPath} from 'node:url';
-import {enhanceH2Logs, muteDevLogs} from '../../lib/log.js';
+import {
+  enhanceH2Logs,
+  isH2Verbose,
+  muteDevLogs,
+  setH2OVerbose,
+} from '../../lib/log.js';
 import {
   commonFlags,
   flagsToCamelObject,
@@ -59,6 +64,7 @@ export default class DevVite extends Command {
     }),
     ...commonFlags.diff,
     ...commonFlags.customerAccountPush,
+    ...commonFlags.verbose,
   };
 
   async run(): Promise<void> {
@@ -95,6 +101,7 @@ type DevOptions = {
   isLocalDev?: boolean;
   customerAccountPush?: boolean;
   cliConfig: Config;
+  verbose?: boolean;
 };
 
 export async function runDev({
@@ -113,10 +120,12 @@ export async function runDev({
   isLocalDev = false,
   customerAccountPush: customerAccountPushFlag = false,
   cliConfig,
+  verbose,
 }: DevOptions) {
   if (!process.env.NODE_ENV) process.env.NODE_ENV = 'development';
 
-  muteDevLogs();
+  if (verbose) setH2OVerbose();
+  if (!isH2Verbose()) muteDevLogs();
 
   const root = appPath ?? process.cwd();
 

diff --git a/packages/cli/src/commands/hydrogen/dev.ts b/packages/cli/src/commands/hydrogen/dev.ts
@@ -12,7 +12,13 @@ import {
   handleRemixImportFail,
   type ServerMode,
 } from '../../lib/remix-config.js';
-import {createRemixLogger, enhanceH2Logs, muteDevLogs} from '../../lib/log.js';
+import {
+  createRemixLogger,
+  enhanceH2Logs,
+  isH2Verbose,
+  muteDevLogs,
+  setH2OVerbose,
+} from '../../lib/log.js';
 import {commonFlags, deprecated, flagsToCamelObject} from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import {Flags, Config} from '@oclif/core';
@@ -68,6 +74,7 @@ export default class Dev extends Command {
     }),
     ...commonFlags.diff,
     ...commonFlags.customerAccountPush,
+    ...commonFlags.verbose,
   };
 
   async run(): Promise<void> {
@@ -101,6 +108,7 @@ type DevOptions = {
   inspectorPort: number;
   customerAccountPush?: boolean;
   cliConfig?: Config;
+  verbose?: boolean;
 };
 
 export async function runDev({
@@ -118,10 +126,12 @@ export async function runDev({
   inspectorPort,
   customerAccountPush: customerAccountPushFlag = false,
   cliConfig,
+  verbose,
 }: DevOptions) {
   if (!process.env.NODE_ENV) process.env.NODE_ENV = 'development';
 
-  muteDevLogs();
+  if (verbose) setH2OVerbose();
+  if (!isH2Verbose()) muteDevLogs();
 
   const {root, publicPath, buildPathClient, buildPathWorkerFile} =
     getProjectPaths(appPath);

diff --git a/packages/cli/src/commands/hydrogen/preview.ts b/packages/cli/src/commands/hydrogen/preview.ts
@@ -1,5 +1,5 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import {muteDevLogs} from '../../lib/log.js';
+import {isH2Verbose, muteDevLogs, setH2OVerbose} from '../../lib/log.js';
 import {getProjectPaths} from '../../lib/remix-config.js';
 import {commonFlags, deprecated, flagsToCamelObject} from '../../lib/flags.js';
 import {startMiniOxygen} from '../../lib/mini-oxygen/index.js';
@@ -23,6 +23,7 @@ export default class Preview extends Command {
     ...commonFlags.envBranch,
     ...commonFlags.inspectorPort,
     ...commonFlags.debug,
+    ...commonFlags.verbose,
   };
 
   async run(): Promise<void> {
@@ -42,6 +43,7 @@ type PreviewOptions = {
   envBranch?: string;
   inspectorPort: number;
   debug: boolean;
+  verbose?: boolean;
 };
 
 export async function runPreview({
@@ -52,10 +54,12 @@ export async function runPreview({
   envBranch,
   inspectorPort,
   debug,
+  verbose,
 }: PreviewOptions) {
   if (!process.env.NODE_ENV) process.env.NODE_ENV = 'production';
 
-  muteDevLogs({workerReload: false});
+  if (verbose) setH2OVerbose();
+  if (!isH2Verbose()) muteDevLogs();
 
   let {root, buildPathWorkerFile, buildPathClient} = getProjectPaths(appPath);
 

diff --git a/packages/cli/src/lib/codegen.ts b/packages/cli/src/lib/codegen.ts
@@ -74,7 +74,9 @@ export function spawnCodegenProcess({
 
     const {message, details} = normalizeCodegenError(dataString, rootDirectory);
 
+    // Filter these logs even on verbose mode because it floods the terminal:
     if (/`punycode`/.test(message)) return;
+    if (/\.body\[\d\]/) return;
 
     console.log('');
     renderWarning({headline: message, body: details});

diff --git a/packages/cli/src/lib/flags.ts b/packages/cli/src/lib/flags.ts
@@ -183,6 +183,14 @@ export const commonFlags = {
       env: 'SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH',
     }),
   },
+  verbose: {
+    verbose: Flags.boolean({
+      description: "Outputs more information about the command's execution.",
+      required: false,
+      default: false,
+      env: 'SHOPIFY_HYDROGEN_FLAG_VERBOSE',
+    }),
+  },
 } satisfies Record<string, Record<Lowercase<string>, FlagProps>>;
 
 export function flagsToCamelObject<T extends Record<string, any>>(obj: T) {

diff --git a/packages/cli/src/lib/log.ts b/packages/cli/src/lib/log.ts
@@ -423,3 +423,19 @@ export async function muteRemixLogs() {
     // --
   }
 }
+
+export function setH2OVerbose() {
+  if (!process.env.DEBUG || process.env.DEBUG === '*') {
+    process.env.DEBUG = 'h2:*,o2:*';
+  } else {
+    process.env.DEBUG += ',h2:*,o2:*';
+  }
+}
+
+export function isH2Verbose() {
+  return !!(process.env.DEBUG === '*' || process.env.DEBUG?.includes('h2:*'));
+}
+
+export function isO2Verbose() {
+  return !!(process.env.DEBUG === '*' || process.env.DEBUG?.includes('o2:*'));
+}
diff --git a/packages/cli/src/lib/mini-oxygen/workerd.ts b/packages/cli/src/lib/mini-oxygen/workerd.ts
@@ -31,6 +31,7 @@ import {
   STATIC_ASSET_EXTENSIONS,
 } from './assets.js';
 import {getDebugBannerLine} from '../dev-shared.js';
+import {isO2Verbose} from '../log.js';
 
 // This should probably be `0` and let workerd find a free port,
 // but at the moment we can't get the port from workerd (afaik?).
@@ -86,23 +87,27 @@ export async function startWorkerdServer({
   const buildMiniOxygenOptions = async () =>
     ({
       cf: false,
-      verbose: false,
       port: appPort,
       inspectorPort: privateInspectorPort,
-      log: new NoOpLog(),
       liveReload: watch,
       host: 'localhost',
-      handleRuntimeStdio(stdout, stderr) {
-        // TODO: handle runtime stdio and remove inspector logs
-        // stdout.pipe(process.stdout);
-        // stderr.pipe(process.stderr);
-
-        // Destroy these streams to prevent memory leaks
-        // until we start piping them to the terminal.
-        // https://github.com/Shopify/hydrogen/issues/1720
-        stdout.destroy();
-        stderr.destroy();
-      },
+      ...(isO2Verbose()
+        ? {verbose: true}
+        : {
+            verbose: false,
+            log: new NoOpLog(),
+            handleRuntimeStdio(stdout, stderr) {
+              // TODO: handle runtime stdio and remove inspector logs
+              // stdout.pipe(process.stdout);
+              // stderr.pipe(process.stderr);
+
+              // Destroy these streams to prevent memory leaks
+              // until we start piping them to the terminal.
+              // https://github.com/Shopify/hydrogen/issues/1720
+              stdout.destroy();
+              stderr.destroy();
+            },
+          }),
       workers: [
         {
           name: 'mini-oxygen',

diff --git a/packages/cli/src/lib/vite/mini-oxygen.ts b/packages/cli/src/lib/vite/mini-oxygen.ts
@@ -14,6 +14,7 @@ import {MiniOxygenOptions} from '../mini-oxygen/types.js';
 import {getHmrUrl, pipeFromWeb, toURL, toWeb} from './utils.js';
 
 import type {ViteEnv} from './worker-entry.js';
+import {isO2Verbose} from '../log.js';
 const scriptPath = fileURLToPath(new URL('./worker-entry.js', import.meta.url));
 
 const FETCH_MODULE_PATHNAME = '/__vite_fetch_module';
@@ -56,20 +57,24 @@ export async function startMiniOxygenRuntime({
 
   const mf = new Miniflare({
     cf: false,
-    verbose: false,
-    log: new NoOpLog(),
     inspectorPort: privateInspectorPort,
-    handleRuntimeStdio(stdout, stderr) {
-      // TODO: handle runtime stdio and remove inspector logs
-      // stdout.pipe(process.stdout);
-      // stderr.pipe(process.stderr);
-
-      // Destroy these streams to prevent memory leaks
-      // until we start piping them to the terminal.
-      // https://github.com/Shopify/hydrogen/issues/1720
-      stdout.destroy();
-      stderr.destroy();
-    },
+    ...(isO2Verbose()
+      ? {verbose: true}
+      : {
+          verbose: false,
+          log: new NoOpLog(),
+          handleRuntimeStdio(stdout, stderr) {
+            // TODO: handle runtime stdio and remove inspector logs
+            // stdout.pipe(process.stdout);
+            // stderr.pipe(process.stderr);
+
+            // Destroy these streams to prevent memory leaks
+            // until we start piping them to the terminal.
+            // https://github.com/Shopify/hydrogen/issues/1720
+            stdout.destroy();
+            stderr.destroy();
+          },
+        }),
     workers: [
       {
         name: 'oxygen',