使用nuxt-winson-log打印nuxt日志与日志分级

最近开发nuxt需要在nuxt上打点日志，以便将来排查问题。
看到了一款nuxt-winson-log可以符合要求。
是基于winston包裹了一层。

修改日志的保存位置

nuxt-winson-log的默认保存路径是当前文件夹下的logs文件夹。修改配置让日志保存在其他路径：

// nuxt.config.js
export default {
 modules:[
     'xxxx其他modules',
     [
       'nuxt-winston-log',
       {
          logPath:
             process.env.npm_lifecycle_event === 'build' ||
             process.env.NODE_ENV === 'development'
               ? './logs'
               : `/data/weblog/nodejs/${process.env.npm_package_name}`,
           logName: `${process.env.npm_package_name}.log`
       }
     ]
  ]
}

区分了开发和生产的日志存放目录。
同时使用npm_lifecycle_event和NODE_ENV而不是process.env.NODE_ENV === 'production'去做判断是因为构建过程中的process.env.NODE_ENV也是production，会因为构建机器上没有这个日志存放目录导致构建失败。

对日志做分级

日志简单地区分的话有两种，日常日志(info)和错误(error)日志。nuxt-winson-log默认会把两种日志都放在同一个日志文件里面。可以通过配置将两种日志打到不同的日志文件。

// nuxt.config.js
import path from 'path';
import { format, transports } from 'winston';
const { combine, timestamp } = format;

// 日志存放路径
const infoLogPath = path.resolve(process.cwd(), './logs', `info.log`);
const errorLogPath = path.resolve(process.cwd(), './logs', `error.log`);

export default {
  modules: ['nuxt-winston-log'],
  winstonLog: {
    loggerOptions: {
      transports: [
        new transports.File({
          format: combine(timestamp()),
          level: 'info',
          filename: infoLogPath,
          maxsize: 5 * 1024 * 1024  // 这个是限制日志文件的大小
        }),
        new transports.File({
          format: combine(timestamp()),
          level: 'error',
          filename: errorLogPath,
          maxsize: 5 * 1024 * 1024
        })
      ]
    }
  },
}

这样配置就可以实现info和error日志分级了！如果发现启动的时候两个日志文件没有生成，可以检查一下设置的保存路径是否存在。

在 axios 里做日志打点

因为在 node 端发起的接口请求如果500了是会导致返回错误页面的，所以在做好try...catch之外，还要对接口的成功与否与日志记录。

// plugins/axios.js

export default ({ $axios, $winstonLog }) => {
  $axios.onResponse((response) => {
    // $winstonLog只在服务端存在，需要判断是否存在
    if ($winstonLog) {
      $winstonLog.info(`[${response.status}] ${response.request.path}`);
    }
    return response.data;
  });

  $axios.onError((err) => {
    if ($winstonLog) {
      $winstonLog.error(
        `[${err.status}] | ${err.request.path} | ${err.message}`
      );
      $winstonLog.error(err.response && err.response.data);
    }
  });
};

在plugins文件夹里新建一个axios.js插件，正常的请求打在info日志，错误请求打error日志。

nuxt-winson-log的自动打日志

nuxt-winston-log会在每次请求页面的时候自动打印一次日志，在 node 端出错的时候也会自动打印日志。

最后打出来的日志效果：