Javascript – Add Winston Logging to Nuxt3

So in this case, we just want to use Winston directly:

Step 1

Run yarn add winston

Step 2

Create a server-side plugin. Prefix the file with 00. since plugins are loaded in alphabetical order, and you'll likely want your logging available in your other plugins. Suffix with .server.ts so that this only tries to run on the server side; Winston isn't meant for use on client side. Filename: plugins/00.logging.server.ts

import { defineNuxtPlugin } from "#app";
import winston from "winston";

export default defineNuxtPlugin(() => {
  const logger = winston.createLogger({
    level: 'info',
    format: winston.format.combine(winston.format.printf((event) => {
      return `${JSON.stringify({ ...event, timestamp: new Date().toISOString() }, null, 4)}n`;
    })),
    defaultMeta: { service: 'myappname' },
    transports: [
      new winston.transports.Console()
    ],
  });

  return {
    provide: {
      logger
    }
  }
});

Step 3 (Optional)

For ease of use and so that a single logging function can be called from both the frontend and the backend, build some composables. Filename: composables/logging.ts

export function logServerError(err: any, message?: string) {
  const nuxtApp = useNuxtApp();
  if (process?.server && nuxtApp.$logger) {
    nuxtApp.$logger.log("error", message, err);
  } else {
    console.error("We Have Encountered an ERROR: ", err);
  }
}

export function logServerWarn(message: string) {
  const nuxtApp = useNuxtApp();
  if (process?.server && nuxtApp.$logger) {
    nuxtApp.$logger.log("warn", message);
  } else {
    console.warn(message);
  }
}

export function logServerInfo(message: string) {
  const nuxtApp = useNuxtApp();
  if (process?.server && nuxtApp.$logger) {
    nuxtApp.$logger.log("info", message);
  } else {
    console.info(message);
  }
}

Step 4 (If you did Step 3)

Use the logger. Filename: plugins/50.myplugin.js

export default defineNuxtPlugin(async (nuxtApp) => {

  // do stuff to setup my app

  // do more stuff

  logServerInfo("Plugin operations complete");
});

Notes

• You might get TS warnings on the references to nuxtApp.$logger.log. After all this rigamarole, I just put // @ts-ignore and moved on.
• The filename of the plugin doesn't matter if none of your other plugins needs logging.
• You have to provide the logger itself from the plugin, not the logger.log function
• If you want different output (say to a file instead of the console), reference the Winston documentation: https://github.com/winstonjs/winston