add status codes and event methods to log requests

This commit moves the logRequestLine function into a separate file and adds
status codes and event methods. It grabs both get and post requests

packages/theme/src/cli/utilities/log-request-line.test.ts

@@ -0,0 +1,53 @@
+import {shouldLog} from './log-request-line.js'
+import {createEvent} from 'h3'
+import {describe, test, expect} from 'vitest'
+import {IncomingMessage, ServerResponse} from 'node:http'
+import {Socket} from 'node:net'
+
+function createH3Event(method = 'GET', path = '/', headers = {}) {
+ const req = new IncomingMessage(new Socket())
+ const res = new ServerResponse(req)
+
+ req.method = method
+ req.url = path
+ req.headers = headers
+
+ return createEvent(req, res)
+}
+
+describe('shouldLog', () => {
+ test('returns false for paths with ignored prefixes', () => {
+ const event = createH3Event('GET', '/checkouts/some-path')
+ expect(shouldLog(event)).toBe(false)
+ })
+
+ test('returns false for paths with ignored extensions', () => {
+ const event = createH3Event('GET', '/assets/styles.css')
+ expect(shouldLog(event)).toBe(false)
+ })
+
+ test('returns true for paths without ignored prefixes or extensions', () => {
+ const event = createH3Event('GET', '/products/some-product')
+ expect(shouldLog(event)).toBe(true)
+ })
+
+ test('returns false for paths with query parameters and ignored extensions', () => {
+ const event = createH3Event('GET', '/assets/script.js?version=1.2.3')
+ expect(shouldLog(event)).toBe(false)
+ })
+
+ test('returns true for paths with query parameters and no ignored extensions', () => {
+ const event = createH3Event('GET', '/products/some-product?variant=123')
+ expect(shouldLog(event)).toBe(true)
+ })
+
+ test('returns false for paths with EXTENSION_CDN_PREFIX', () => {
+ const event = createH3Event('GET', '/cdn/extension/some-path')
+ expect(shouldLog(event)).toBe(false)
+ })
+
+ test('returns false for paths with VANITY_CDN_PREFIX', () => {
+ const event = createH3Event('GET', '/cdn/vanity/some-path')
+ expect(shouldLog(event)).toBe(false)
+ })
+})

packages/theme/src/cli/utilities/log-request-line.ts

@@ -0,0 +1,56 @@
+import {EXTENSION_CDN_PREFIX, VANITY_CDN_PREFIX} from './theme-environment/proxy.js'
+import {timestampDateFormat} from '../constants.js'
+import {Response as CliKitResponse} from '@shopify/cli-kit/node/http'
+import {outputContent, outputInfo, outputToken} from '@shopify/cli-kit/node/output'
+import {H3Event} from 'h3'
+import {extname} from '@shopify/cli-kit/node/path'
+
+const CHARACTER_TRUNCATION_LIMIT = 80
+
+export function logRequestLine(event: H3Event, response: CliKitResponse | Response) {
+ if (shouldLog(event) === false) return
+
+ const truncatedPath =
+ event.path.length > CHARACTER_TRUNCATION_LIMIT
+ ? `${event.path.substring(0, CHARACTER_TRUNCATION_LIMIT)}...`
+ : event.path
+ const serverTiming = response.headers.get('server-timing')
+ const requestDuration = serverTiming?.match(/cfRequestDuration;dur=([\d.]+)/)?.[1]
+ const durationString = requestDuration ? `${Math.round(Number(requestDuration))}ms` : ''
+
+ const statusColor = getColorizeStatus(response.status)
+
+ const eventMethodAligned = event.method.padStart(6)
+
+ outputInfo(
+ outputContent`• ${timestampDateFormat.format(new Date())} Request ${outputToken.raw(
+ '»',
+ )} ${eventMethodAligned} ${statusColor(String(response.status))} ${truncatedPath} ${outputToken.gray(
+ `${durationString}`,
+ )}`,
+ )
+}
+
+export function shouldLog(event: H3Event) {
+ const ignoredPathPrefixes = [EXTENSION_CDN_PREFIX, VANITY_CDN_PREFIX, '/checkouts', '/payments']
+ const ignoredExtensions = ['.js', '.css', '.json', '.map']
+
+ if (ignoredPathPrefixes.some((prefix) => event.path.startsWith(prefix))) return false
+
+ const [pathname] = event.path.split('?') as [string]
+ const extension = extname(pathname)
+
+ if (ignoredExtensions.includes(extension)) return false
+
+ return true
+}
+
+function getColorizeStatus(status: number) {
+ if (status < 300) {
+ return outputToken.green
+ } else if (status < 400) {
+ return outputToken.yellow
+ } else {
+ return outputToken.errorText
+ }
+}

packages/theme/src/cli/utilities/theme-environment/html.ts

@@ -2,17 +2,14 @@ import {getProxyStorefrontHeaders, patchRenderingResponse} from './proxy.js'
 import {getInMemoryTemplates, injectHotReloadScript} from './hot-reload/server.js'
 import {render} from './storefront-renderer.js'
 import {getExtensionInMemoryTemplates} from '../theme-ext-environment/theme-ext-server.js'
-import {timestampDateFormat} from '../../constants.js'
-import {defineEventHandler, getCookie, H3Event, setResponseHeader, setResponseStatus, type H3Error} from 'h3'
+import {logRequestLine} from '../log-request-line.js'
+import {defineEventHandler, getCookie, setResponseHeader, setResponseStatus, type H3Error} from 'h3'
 import {renderError, renderFatalError} from '@shopify/cli-kit/node/ui'
-import {outputContent, outputInfo, outputToken} from '@shopify/cli-kit/node/output'
 import {AbortError} from '@shopify/cli-kit/node/error'
 import type {Response} from '@shopify/cli-kit/node/http'
 import type {Theme} from '@shopify/cli-kit/node/themes/types'
 import type {DevServerContext} from './types.js'
 
-const CHARACTER_TRUNCATION_LIMIT = 80
-
 export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
  return defineEventHandler((event) => {
  const [browserPathname = '/', browserSearch = ''] = event.path.split('?')
@@ -68,22 +65,6 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
  })
 }
 
-function logRequestLine(event: H3Event, response: Response) {
- const truncatedPath =
- event.path.length > CHARACTER_TRUNCATION_LIMIT
- ? `${event.path.substring(0, CHARACTER_TRUNCATION_LIMIT)}...`
- : event.path
- const serverTiming = response.headers.get('server-timing')
- const requestDuration = serverTiming?.match(/cfRequestDuration;dur=([\d.]+)/)?.[1]
- const durationString = requestDuration ? `${Math.round(Number(requestDuration))}ms` : ''
-
- outputInfo(
- outputContent`• ${timestampDateFormat.format(new Date())} Request ${outputToken.raw('»')} ${outputToken.gray(
- `${event.method} ${truncatedPath} ${durationString}`,
- )}`,
- )
-}
-
 function getErrorPage(options: {title: string; header: string; message: string; code: string}) {
  const html = String.raw
 

packages/theme/src/cli/utilities/theme-environment/proxy.ts

@@ -1,4 +1,5 @@
 import {buildCookies} from './storefront-renderer.js'
+import {logRequestLine} from '../log-request-line.js'
 import {renderWarning} from '@shopify/cli-kit/node/ui'
 import {
  defineEventHandler,
@@ -23,8 +24,8 @@ import type {Response as NodeResponse} from '@shopify/cli-kit/node/http'
 import type {DevServerContext} from './types.js'
 
 const CART_PREFIX = '/cart/'
-const VANITY_CDN_PREFIX = '/cdn/'
-const EXTENSION_CDN_PREFIX = '/ext/cdn/'
+export const VANITY_CDN_PREFIX = '/cdn/'
+export const EXTENSION_CDN_PREFIX = '/ext/cdn/'
 const IGNORED_ENDPOINTS = [
  '/.well-known',
  '/shopify/monorail',
@@ -254,6 +255,8 @@ function proxyStorefrontRequest(event: H3Event, ctx: DevServerContext) {
  redirect: 'manual',
  },
  async onResponse(event, response) {
+ logRequestLine(event, response)
+
  patchProxiedResponseHeaders(ctx, event, response)
 
  const fileName = url.pathname.split('/').at(-1)

packages/theme/src/cli/utilities/theme-fs.ts

@@ -398,8 +398,6 @@ function dirPath(filePath: string) {
 
 function outputSyncResult(action: 'update' | 'delete', fileKey: string): void {
  outputInfo(
- outputContent`• ${timestampDateFormat.format(new Date())} Synced ${outputToken.raw('»')} ${outputToken.gray(
- `${action} ${fileKey}`,
- )}`,
+ outputContent`• ${timestampDateFormat.format(new Date())} Synced ${outputToken.raw('»')} ${action} ${fileKey}`,
  )
 }