fix: revamp dev and vite plugin logging (#269)

* fix: revamp dev and vite plugin logging

- hook into the vite logger when using the vite plugin
- fix weird unicode issue
- use terminal colour lib with a smaller footprint
- remove an extraneous logger util
- add a basic message to inform the user that the Netlify Vite plugin loaded
- when using middleware mode, add a message informing the user that this is loaded
  and listing enables features
- add test coverage for logs

* fix: highlight commands

* fix: tweak log copy

* style: adjust fixture file indent

Author: serhalp

package-lock.json

@@ -52,6 +52,7 @@
   },
   "dependencies": {
     "@whatwg-node/server": "^0.10.0",
+    "ansis": "^4.1.0",
     "chokidar": "^4.0.1",
     "decache": "^4.6.2",
     "dot-prop": "9.0.0",

packages/dev-utils/package.json

@@ -1,7 +1,15 @@
-type logFunction = (...message: unknown[]) => void
+import ansis from 'ansis'
+
+type logFunction = (message?: string) => void
 
 export type Logger = {
   error: logFunction
   log: logFunction
   warn: logFunction
 }
+
+export const netlifyCommand = ansis.cyanBright
+
+export const netlifyCyan = ansis.rgb(40, 180, 170)
+
+export const netlifyBanner = netlifyCyan('⬥ Netlify')

packages/dev-utils/src/lib/logger.ts

@@ -8,7 +8,7 @@ export { headers, toMultiValueHeaders } from './lib/headers.js'
 export * as globalConfig from './lib/global-config.js'
 export { Handler } from './lib/handler.js'
 export { LocalState } from './lib/local-state.js'
-export type { Logger } from './lib/logger.js'
+export { type Logger, netlifyCommand, netlifyCyan, netlifyBanner } from './lib/logger.js'
 export { memoize, MemoizeCache } from './lib/memoize.js'
 export { HTTPServer } from './server/http_server.js'
 export { watchDebounced } from './lib/watch-debounced.js'

packages/dev-utils/src/main.ts

@@ -4,7 +4,15 @@ import path from 'node:path'
 import process from 'node:process'
 
 import { resolveConfig } from '@netlify/config'
-import { ensureNetlifyIgnore, getAPIToken, mockLocation, LocalState, type Logger, HTTPServer } from '@netlify/dev-utils'
+import {
+  ensureNetlifyIgnore,
+  getAPIToken,
+  mockLocation,
+  LocalState,
+  type Logger,
+  HTTPServer,
+  netlifyCommand,
+} from '@netlify/dev-utils'
 import { EdgeFunctionsHandler } from '@netlify/edge-functions/dev'
 import { FunctionsHandler } from '@netlify/functions/dev'
 import { HeadersHandler, type HeadersCollector } from '@netlify/headers'
@@ -251,7 +259,7 @@ export class NetlifyDev {
     const { pathname } = new URL(matchRequest.url)
     if (pathname.startsWith('/.netlify/images')) {
       this.#logger.error(
-        'The Netlify Image CDN is currently only supported in the Netlify CLI. Run `npx netlify dev` to get started.',
+        `The Netlify Image CDN is currently only supported in the Netlify CLI. Run ${netlifyCommand('npx netlify dev')} to get started.`,
       )
 
       return
@@ -468,4 +476,10 @@ export class NetlifyDev {
   async stop() {
     await Promise.allSettled(this.#cleanupJobs.map((task) => task()))
   }
+
+  public getEnabledFeatures(): string[] {
+    return Object.entries(this.#features)
+      .filter(([_, enabled]) => enabled)
+      .map(([feature]) => feature)
+  }
 }

packages/dev/src/main.ts

@@ -288,7 +288,7 @@ export class EdgeFunctionsHandler {
     } catch (error) {
       success = false
 
-      this.logger.error('An error occurred while setting up the Netlify Edge Functions environment:', error)
+      this.logger.error(`An error occurred while setting up the Netlify Edge Functions environment: ${String(error)}`)
     }
 
     // The Promise above will resolve as soon as we start the command, but we

packages/edge-functions/dev/node/main.ts

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@netlify/dev": "4.1.1",
+    "@netlify/dev-utils": "^3.1.0",
     "chalk": "^5.4.1"
   },
   "peerDependencies": {

packages/vite-plugin/package.json

@@ -1,10 +1,9 @@
-import chalk from 'chalk'
+import { type Logger as ViteLogger } from 'vite'
+import type { Logger } from '@netlify/dev-utils'
+import { netlifyBanner } from '@netlify/dev-utils'
 
-const NETLIFY_CYAN = chalk.rgb(40, 180, 170)
-const banner = NETLIFY_CYAN('⬥ Netlify ⬥')
-
-export const logger = {
-  error: (...data: any[]) => (data.length === 0 ? console.error(...data) : console.error(banner, ...data)),
-  log: (...data: any[]) => (data.length === 0 ? console.log(...data) : console.log(banner, ...data)),
-  warn: (...data: any[]) => (data.length === 0 ? console.warn(...data) : console.warn(banner, ...data)),
-}
+export const createLoggerFromViteLogger = (viteLogger: ViteLogger): Logger => ({
+  error: (msg?: string) => viteLogger.error(msg ?? '', { timestamp: true, environment: netlifyBanner }),
+  log: (msg?: string) => viteLogger.info(msg ?? '', { timestamp: true, environment: netlifyBanner }),
+  warn: (msg?: string) => viteLogger.warn(msg ?? '', { timestamp: true, environment: netlifyBanner }),
+})

packages/vite-plugin/src/lib/logger.ts

@@ -5,7 +5,7 @@ import { fileURLToPath, pathToFileURL } from 'node:url'
 
 import { Fixture } from '@netlify/dev-utils'
 import { type Browser, type ConsoleMessage, type Page, chromium } from 'playwright'
-import { afterEach, beforeEach, describe, expect, test } from 'vitest'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { createServer } from 'vite'
 
 import netlify from './main.js'
@@ -43,6 +43,18 @@ const startTestServer = async (options: Parameters<typeof createServer>[0] = {})
   return { server, url: `http://localhost:${port.toString()}` }
 }
 
+const createMockViteLogger = () => {
+  return {
+    info: vi.fn(),
+    warn: vi.fn(),
+    warnOnce: vi.fn(),
+    error: vi.fn(),
+    clearScreen: vi.fn(),
+    hasErrorLogged: vi.fn(),
+    hasWarned: false,
+  }
+}
+
 describe('Plugin constructor', () => {
   test('Is a no-op when running in the Netlify CLI', () => {
     process.env.NETLIFY_DEV = 'true'
@@ -98,6 +110,58 @@ describe('configureServer', { timeout: 15_000 }, () => {
     await fixture.destroy()
   })
 
+  test('Prints a basic message on server start', async () => {
+    const fixture = new Fixture()
+      .withFile(
+        'vite.config.js',
+        `import { defineConfig } from 'vite';
+         import netlify from '@netlify/vite-plugin';
+
+         export default defineConfig({
+           plugins: [
+             netlify({ middleware: false })
+           ]
+         });`,
+      )
+      .withFile(
+        'index.html',
+        `<!DOCTYPE html>
+           <html>
+             <head><title>Hello World</title></head>
+             <body><h1>Hello from the browser</h1></body>
+           </html>`,
+      )
+    const directory = await fixture.create()
+    await fixture
+      .withPackages({
+        vite: '6.0.0',
+        '@netlify/vite-plugin': pathToFileURL(path.resolve(directory, PLUGIN_PATH)).toString(),
+      })
+      .create()
+
+    const mockLogger = createMockViteLogger()
+    const { server } = await startTestServer({
+      root: directory,
+      logLevel: 'info',
+      customLogger: mockLogger,
+    })
+
+    expect(mockLogger.error).not.toHaveBeenCalled()
+    expect(mockLogger.warn).not.toHaveBeenCalled()
+    expect(mockLogger.warnOnce).not.toHaveBeenCalled()
+    expect(mockLogger.info).toHaveBeenCalledTimes(2)
+    expect(mockLogger.info).toHaveBeenNthCalledWith(1, 'Environment loaded', expect.objectContaining({}))
+    expect(mockLogger.info).toHaveBeenNthCalledWith(
+      2,
+      '💭 Linking this project to a Netlify site lets you deploy your site, use any environment variables \
+defined on your team and site and much more. Run npx netlify init to get started.',
+      expect.objectContaining({}),
+    )
+
+    await server.close()
+    await fixture.destroy()
+  })
+
   describe('Middleware enabled', () => {
     let browser: Browser
     let page: Page
@@ -111,6 +175,65 @@ describe('configureServer', { timeout: 15_000 }, () => {
       await browser.close()
     })
 
+    test('Prints a message listing emulated features on server start', async () => {
+      const fixture = new Fixture()
+        .withFile(
+          'vite.config.js',
+          `import { defineConfig } from 'vite';
+           import netlify from '@netlify/vite-plugin';
+
+           export default defineConfig({
+             plugins: [
+               netlify({
+                middleware: true,
+                edgeFunctions: { enabled: false },
+              })
+             ]
+           });`,
+        )
+        .withFile(
+          'index.html',
+          `<!DOCTYPE html>
+             <html>
+               <head><title>Hello World</title></head>
+               <body><h1>Hello from the browser</h1></body>
+             </html>`,
+        )
+      const directory = await fixture.create()
+      await fixture
+        .withPackages({
+          vite: '6.0.0',
+          '@netlify/vite-plugin': pathToFileURL(path.resolve(directory, PLUGIN_PATH)).toString(),
+        })
+        .create()
+
+      const mockLogger = createMockViteLogger()
+      const { server } = await startTestServer({
+        root: directory,
+        logLevel: 'info',
+        customLogger: mockLogger,
+      })
+
+      expect(mockLogger.error).not.toHaveBeenCalled()
+      expect(mockLogger.warn).not.toHaveBeenCalled()
+      expect(mockLogger.warnOnce).not.toHaveBeenCalled()
+      expect(mockLogger.info).toHaveBeenCalledTimes(3)
+      expect(mockLogger.info).toHaveBeenNthCalledWith(1, 'Environment loaded', expect.objectContaining({}))
+      expect(mockLogger.info).toHaveBeenNthCalledWith(
+        2,
+        'Middleware loaded. Emulating features: blobs, environmentVariables, functions, headers, redirects, static.',
+        expect.objectContaining({}),
+      )
+      expect(mockLogger.info).toHaveBeenNthCalledWith(
+        3,
+        expect.stringContaining('Linking this project to a Netlify site'),
+        expect.objectContaining({}),
+      )
+
+      await server.close()
+      await fixture.destroy()
+    })
+
     test('Returns static files from project dir', async () => {
       const fixture = new Fixture()
         .withFile(

packages/vite-plugin/src/main.test.ts

@@ -1,9 +1,10 @@
 import process from 'node:process'
 
 import { NetlifyDev, type Features } from '@netlify/dev'
+import { netlifyCommand } from '@netlify/dev-utils'
 import * as vite from 'vite'
 
-import { logger } from './lib/logger.js'
+import { createLoggerFromViteLogger } from './lib/logger.js'
 import { fromWebResponse } from './lib/reqres.js'
 
 export interface NetlifyPluginOptions extends Features {
@@ -24,6 +25,7 @@ export default function netlify(options: NetlifyPluginOptions = {}): any {
   const plugin: vite.Plugin = {
     name: 'vite-plugin-netlify',
     async configureServer(viteDevServer) {
+      const logger = createLoggerFromViteLogger(viteDevServer.config.logger)
       const { port } = viteDevServer.config.server
       const { blobs, edgeFunctions, functions, middleware = true, redirects, staticFiles } = options
       const netlifyDev = new NetlifyDev({
@@ -41,12 +43,7 @@ export default function netlify(options: NetlifyPluginOptions = {}): any {
       })
 
       await netlifyDev.start()
-
-      if (!netlifyDev.siteIsLinked) {
-        logger.log(
-          'Linking this project to a Netlify site lets you deploy your site, use any environment variables defined on your team and site and much more. Run `npx netlify init` to get started.',
-        )
-      }
+      logger.log('Environment loaded')
 
       if (middleware) {
         viteDevServer.middlewares.use(async function netlifyPreMiddleware(nodeReq, nodeRes, next) {
@@ -72,6 +69,13 @@ export default function netlify(options: NetlifyPluginOptions = {}): any {
 
           next()
         })
+        logger.log(`Middleware loaded. Emulating features: ${netlifyDev.getEnabledFeatures().join(', ')}.`)
+      }
+
+      if (!netlifyDev.siteIsLinked) {
+        logger.log(
+          `💭 Linking this project to a Netlify site lets you deploy your site, use any environment variables defined on your team and site and much more. Run ${netlifyCommand('npx netlify init')} to get started.`,
+        )
       }
     },
   }