温斯顿日志记录器能否用于前端日志记录?

11

我正在创建一个完整的MEAN技术栈应用,使用的技术包括:

Node.js,Angular 6,Express.js和MongoDB。

我已经成功地创建了服务器,并且它运行得非常完美。在我的应用程序中记录错误时,我决定使用Winston Logger而不是console.log。这是我现在的代码:

服务器端

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日志记录器?我是一个新手,对这些东西一窍不通,任何帮助都将不胜感激。

3个回答

12

是的,这是可能的,但浏览器的默认传输非常有限。我建议使用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"});

我在哪里可以找到如何使用它们的示例?例如,如果我想将日志记录到持久文件中,我该如何设置传输到文件?或者传输到像数据库这样的远程位置? - CodeMonkey

8

是的 - 技术上可以在浏览器中使用。但几乎肯定不应该使用(可悲的是)。Winston 是一个出色的 node 日志记录器。但要强调的是 “for node”。如果你想在客户端使用它,你需要添加一堆 node polyfills 以及 winston 本身,相对于其他客户端日志记录器而言,winson 体积非常大。在 winston 和这些 polyfills 之间,你会显著增加你的构件大小。另外,只是提醒一下,webpack 5 已经删除了这些 node polyfills,因此你需要手动添加它们。


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接