Logger Library Using Pino, Pino-Pretty, and Vite Not Displaying Prettified Logs in Next.js Project

[victorjaquez]

I'm currently working on constructing a logger library using the Pino, Pino-Pretty, and Vite tools. However, I'm encountering a problem: when importing the bundled library into my Next.js project, the server logs don't display in the prettified format.

Interestingly, when I instantiate the same logger, using the same code, directly in my Next.js project, the logs are displayed correctly in the prettified format.

Below you'll find the code snippet I've been using for my logger and the configuration file for Vite

const logger = pino({
    hooks: {
      logMethod(args: any[], method: (...args: any[]) => void) {
        if (args[0] instanceof Error) {
          args[0] = {
            err: args[0],
            message: args[0]?.message,
          };
        }

        method.apply(this, args);
      },
    },
    formatters: {
      level: level => {
        return { level };
      },
      bindings: bindings => ({ ...bindings, client: 'Server' }),
    },

    messageKey: 'message',
    timestamp: logPretty,
    level: logLevel ? logLevel.toLowerCase() : 'info',
    transport: {
      target: 'pino-pretty',
      options: {
        colorize: true,
        translateTime: 'yyyy-mm-dd',
        singleLine: true,
        ignore: `pid,hostname`,
        messageFormat: '\x1b[35m({client})\x1b[0m \x1b[36m{message}\x1b[0m',
      },
    },
    browser: {
      ...(!logBrowserConsoleEnabled && {
        write: () => {},
      }),
      transmit: {
        ...(logLevelBrowser ? { level: logLevelBrowser } : {}),
        send(level, logEvent) {
          // code omitted
        },
      },
    },
  });

// vite.config.ts

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import path from 'path';
import paths from './paths';
import pkg from '../package.json';

const makeExternalPredicate = (externalArr: string[]) => {
  if (externalArr.length === 0) {
    return () => false;
  }
  const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`);
  return (id: string) => pattern.test(id);
};

const externals = makeExternalPredicate(Object.keys(pkg.peerDependencies));

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'esnext',
      supported: {
        bigint: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': path.join(paths.appSrc, 'index'),
      utils: path.join(paths.appSrc, '/utils'),
    },
  },
  plugins: [
    dts({
      tsConfigFilePath: paths.appTsConfigProd,
      noEmitOnError: true,
      skipDiagnostics: false,
    }),
  ],
  build: {
    minify: false,
    sourcemap: true,
    lib: {
      entry: paths.appIndex,
      name: 'demo',
      formats: ['es', 'cjs'],
      fileName: format => {
        if (format === 'cjs') return 'index.cjs';
        return `index.${format}.js`;
      },
    },
    rollupOptions: {
      external: externals,
    },
    target: ['esnext'],
  },
});

[jsumners]

We are unable to provide support for third party libraries and frameworks. If you can provide a minimal reproduction without them, feel free to reopen this issue. Otherwise, please reach out to those projects for assistance with their tools.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.