Improve logs spacing and filtering

Shopify · Apr 4, 2024 · 925f260 · 925f260
1 parent 212b9ac
commit 925f260
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/packages/cli/src/commands/hydrogen/dev-vite.ts b/packages/cli/src/commands/hydrogen/dev-vite.ts
@@ -176,6 +176,7 @@ export async function runViteDev({
   const viteServer = await vite.createServer({
     root,
     customLogger,
+    clearScreen: false,
     server: {fs, host: host ? true : undefined},
     plugins: customerAccountPushFlag
       ? [

diff --git a/packages/cli/src/lib/log.ts b/packages/cli/src/lib/log.ts
@@ -170,7 +170,8 @@ export function muteDevLogs({workerReload}: {workerReload?: boolean} = {}) {
     ],
   );
 
-  let isLastLineVite = false;
+  let isLastLineBlank = false;
+  let isLastLineRequestLog = false;
   addMessageReplacers(
     'dev-vite',
     // Vite logs
@@ -195,16 +196,26 @@ export function muteDevLogs({workerReload}: {workerReload?: boolean} = {}) {
       () => {},
     ],
     [
-      // Log new lines between Vite logs and dev-server logs
+      // Log new lines between Request logs and other logs
       ([first], existingMatches) => {
         // If this log is not going to be filtered by other replacers:
         if (existingMatches === 0 && typeof first === 'string') {
-          const isVite = /\[vite\]/i.test(first);
-          if ((isVite && !isLastLineVite) || (!isVite && isLastLineVite)) {
+          // Example: "  GET  200  render  /products/1234  0.0ms"
+          const isRequestLog = /^\s+[A-Z]+\s+\d{3}\s+[a-z]+\s+\//.test(
+            // Clear ANSI colors before matching
+            first.replace(/\u001b\[.*?m/g, ''),
+          );
+
+          if (
+            !isLastLineBlank &&
+            ((isRequestLog && !isLastLineRequestLog) ||
+              (!isRequestLog && isLastLineRequestLog))
+          ) {
             process.stdout.write('\n');
           }
 
-          isLastLineVite = isVite;
+          isLastLineRequestLog = isRequestLog;
+          isLastLineBlank = /\n$/.test(first);
         }
 
         return false;

diff --git a/packages/cli/src/lib/mini-oxygen/common.ts b/packages/cli/src/lib/mini-oxygen/common.ts
@@ -31,7 +31,7 @@ export function logRequestLine(
 ): void {
   try {
     const url = new URL(request.url);
-    if (DEV_ROUTES.has(url.pathname)) return;
+    if (DEV_ROUTES.has(url.pathname) || url.pathname === '/favicon.ico') return;
 
     const isDataRequest = url.searchParams.has('_data');
     let route = request.url.replace(url.origin, '');