Winston Logger 可以用在前端进行日志记录吗？答案

【问题标题】：Can Winston Logger be used on the front-end for logging?Winston Logger 可以用在前端进行日志记录吗？
【发布时间】：2018-12-09 03:21:44
【问题描述】：

我正在使用

创建完整的平均堆栈应用程序

NodeJs、Angular 6、ExpressJs 和 MongoDB

我已经设法创建了一个服务器并且它工作得很好，而不是在我的应用程序中记录错误时使用console.log 我决定使用Winston Logger 这是我现在所拥有的

服务器端

var appRoot = require('app-root-path');
var winston = require('winston');

// define the custom settings for each transport (file, console)
var options = {
    file: {
        level: 'info',
        filename: `${appRoot}/logs/app.log`,
        handleExceptions: true,
        json: true,
        maxsize: 5242880, // 5MB
        maxFiles: 5,
        colorize: false,
    },
    console: {
        level: 'debug',
        handleExceptions: true,
        json: false,
        colorize: true,
    },
};

// instantiate a new Winston Logger with the settings defined above
const logger = winston.createLogger({
    transports: [
        new winston.transports.File(options.file),
        new winston.transports.Console(options.console)
    ],
    exitOnError: false, // do not exit on handled exceptions
});

// create a stream object with a 'write' function that will be used by `morgan`
logger.stream = {
    write: function (message, encoding) {
        // use the 'info' log level so the output will be picked up by both transports (file and console)
        logger.info(message);
    },
};

module.exports = logger;

注意：服务器端的 Winston 完美运行

客户端

我想在我的客户端 Angular 6 应用程序中使用 winston。

示例：在我的一个组件中，我有这个。

import * as logger from "winston";
.........
 this.activeRouter.params.subscribe((params) => {
      // tslint:disable-next-line:prefer-const
      let id = params['id'];
      this.moviesService.getReview(id)
        .subscribe(review => {
          console.log(review);
          this.review = review;
        });
    });

如您所见，我使用的是console.log(review)，而不是控制台日志，我想使用Winston。

如何在客户端使用Winston logger？我是所有这些东西的新手，我们将不胜感激。

【问题讨论】：

标签： javascript node.js angular express winston

【解决方案1】：

是的 - 它可以（技术上）在浏览器中使用。应该是吗？几乎绝对不是（可悲的）。 Winston 是一个很棒的节点记录器。但是，强调“for node”。如果你想在客户端使用它，除了winston本身，你还需要添加一堆节点polyfill，这相对于其他客户端记录器来说是非常大的。在 winston 和那些 polyfills 之间，您将显着增加工件的大小。此外，仅供参考，webpack 5 删除了这些节点 polyfill，因此您需要手动添加它们。

【讨论】：

【解决方案2】：

是的，这是可能的，但是浏览器的默认传输非常有限。我推荐使用https://www.npmjs.com/package/winston-transport-browserconsole

npm install winston-transport-browserconsole -S

简单易用，支持记录json对象：

import * as winston from "winston";
import BrowserConsole from 'winston-transport-browserconsole';

const level = "debug";
winston.configure({
    transports: [
        new BrowserConsole(
            {
                format: winston.format.simple(),
                level,
            },
        ),
    ],
});

winston.debug("DEBUG ", {a: 1, b: "two"});

【讨论】：

在哪里可以找到有关如何使用它们的示例？例如，如果我想记录到持久文件，如何设置到文件的传输？还是到像数据库这样的远程位置？

【解决方案3】：

根据这张票：https://github.com/winstonjs/winston/issues/287 它几乎可以用于浏览器了？还是准备好了？听起来他们最近开始支持在浏览器环境中登录。

【讨论】：