Winston: ウィンストンをフロントエンド（つまりブラウザ）でロギングに使用できますか？

私はそれを試していませんが、これはhttps://github.com/farpoint/meteor-winston-clientに役立つかもしれません

これは関連しています： https ：//github.com/flatiron/winston/issues/180

そのリンクには404があります@joshacheson !!

この問題について何か進展はありますか？

＃582からのフィードバックに基づくと、将来のPRは、 brfsなどのシムを使用するのではなく、コアロジックとトランスポートの分離に焦点を当てる必要があるようです。 これは大きな構造上の変更であり、最終的にはこれを維持するために残されたものになるため、スタイルとアプローチに関するコア開発者からのガイダンスがほぼ確実に必要になります。

幸いなことに、コードはほとんどクリーンで構造化されていますが、スタイルとアプローチについてコア開発者からのガイダンスが必要になります。 @indexzero / @poseはあなたの考えを共有できますか？

この問題の進展はありますか？

私がパッケージを見て、ブラウザのサポートがないことに気付いたとき、私の希望は本当に高くなりました。
これは、ブラウザで私が自家製のものを置き換えるのに本当に素晴らしいでしょう。

+1

同じか私。 前面と背面に同じロギングライブラリがあることも役立ちます。

私はこれを閲覧していましたが、httpトランスポートがありますが、ブラウザ/その他の標準クライアントがないように見えるのは残念なことのようです。

bunyanを使わなければならないのは悲しい

これに関するニュースはありますか？

本当に使用したい場合は、次のようにカスタムトランスポートを作成できます。

const Transport = require('winston-transport');

export default class BrowserConsole extends Transport {
  constructor(opts) {
    super(opts);

    this.name = 'BrowserConsole';
    this.levels = {
        error: 0,
        warn: 1,
        info: 2,
        debug: 4,
    };

    this.methods = {
        error: 'error',
        warn: 'warn',
        info: 'info',
        debug: 'log',
    };

    this.level = opts.level && this.levels.hasOwnProperty(opts.level)
                  ? opts.level : 'info';
  }

  log(method, message) {
    setImmediate(() => {
      this.emit('logged', method);
    });

    const val = this.levels[method];
    const mappedMethod = this.methods[method];

    if (val <= this.levels[this.level]) {
      // eslint-disable-next-line
      console[mappedMethod](message);
    }
  }
}

次に、次のように使用できます。

import BrowserConsole from './BrowserConsole';

const { createLogger, transports } = require('winston');

const log = createLogger({
  level: 'info',
});

if (process.env.NODE_ENV !== 'production') {
  log.add(new BrowserConsole({
    level: 'info',
  }));
}

このトランスポートでは、レガシーコードと見なされるため、役に立たない警告が表示されます。 他のコンソールメソッド（ table 、 dir 、 trace 、...）を使用する可能性を追加することもできますが、簡単にするために、そのようにしています。

ありがとう@chrisvoo 、私はこの解決策を試しましたが、エラーが発生しました：

ReferenceError: Buffer is not defined
    replacer 
    json.js/module.exports< 
    _transform 
    _stream_transform.js/Transform.prototype._read
    _stream_transform.js/Transform.prototype._write
    doWrite
    writeOrBuffer
    _stream_writable.js/Writable.prototype.write
    log

@ dmitry-salnikovわかりませんが、このコードがストリームを使用している理由がわかりません。 たぶん私のユースケースは単純すぎました。 あなたがそれをどのように使っているかを共有してみてください。

@chrisvoo BrowserConsole実装を別のファイルにコピーして貼り付け、次に別のファイルにコードの2番目の部分を貼り付け、 BrowserConsoleトランスポートコード（スニペットの最後の行）を追加した後、 '単に試しました：

log.info('hello world');

次に、エラーが発生し、次のことを試しました。

log.log('info, 'hello world');

どちらの呼び出しも同じエラーを返します。

ブラウザでNodeを使用できるようにする私の環境は、Meteor.js v1.6（Node 8.8.1）です。 また、コードスニペットのどの行も変更していません。

ところで：私は少し前にウィンストンを使い始めたので、何か間違ったことをしている可能性があります。

@ dmitry-salnikovどのようなエラーが発生しますか？ 「情報は機能ではない」のように？ 多分何らかの理由で、それはひどく輸入されています。

@chrisvoo見てください：

BrowserConsole.js （ファイルツリーで確認できます）の内容は、スニペットとまったく同じです。

そして、私はあなたに同意します、私は輸入に何か問題があると感じます、しかし理由を理解することができません:(これについてあなたの考えを共有してください？

あなたのウィンストンバージョンは何ですか？ 私のは：

"winston": "^3.0.0-rc1",
"winston-transport": "^3.0.1"

実は同じ

$ npm ls | grep winston
├─┬ [email protected]
│ └── [email protected]
└── [email protected]
$ cat package.json | grep winston
    "winston": "^3.0.0-rc1",
    "winston-transport": "^3.0.1"

この問題を解決するために、私は別のテストを行いました。

import winston from 'winston';
import BrowserConsole from '/imports/BrowserConsole.js';

const format = winston.format;
// next line throws exception, see below
const { combine, timestamp, label, printf, colorize, prettyPrint } = format;

const logger = winston.createLogger({
...

次のエラーが発生しました： Cannot find module './combine'

スタックトレースと関連コード（ブラウザのスクリーンショット）は次のとおりです。

何かが本当にひどくインポートされているようです。 @chrisvoo見ていただけませんか？

Winston 3.0.0では、トランスポートはストリームです。 ただし、browserify-streamでは、 readableStream instanceof Streamは当てはまりません。 これにより、Winstonは、トランスポートをレガシーラッパーでラップし、警告を発するようにフォールバックします。 ストリーム性の検出に別の方法を使用するようにPRを作成しました：＃1145

@Jasu true私もこれに気づきました、私はこれに関してwinston-transportで以前に問題を提出しました。 また、コンソールトランスポートを同形にするためのプルリクエストもまもなく送信します。

IGNOREME：ここでコメントしているので、将来この問題を簡単に見つけることができます[単独でサブスクライブすることではできないため]（https://github.com/isaacs/github/issues/283）。

同じ問題、 Error: Cannot find module './combine'に遭遇しました。

+1

@chrisvoo ：以下は、スニペットを実行しようとしたときのエラーです（winstonとwinston-transportは3つ以上のバージョンにあります）
winston-transport /index.jsのエラー
モジュールが見つかりません：エラー：node_modules / winston-transportの「stream」を解決できません

PR＃1145（2017年11月オープン）が今年合併する可能性はありますか？ ：ウィンク：

@ dmitry-salnikov＃1145がマスターにマージされました。 まだリリースされていません。

クローズドクローズドクローズド。

じゃがいもを応援してくれてありがとう

5年、少なくともその実を結ぶ。 Winstonは、JavaScriptIMOに最適なロギングシステムです。

ありがとう！

これは、ブラウザのサポートを確認するテストスイートでテストが行​​われるまで開いたままになります。 ただし、babelとwebpackのエッジケースとコーナーケースのほとんどは解決されているようです。

ここでは、winstonが大好きで、クライアント側のロギングミドルウェアが必要です。

ブラウザが実装されてからしばらく経ちましたが、これから使いたいと思います。

単体テストと完全なブラウザカバレッジを待つ前に、ブラウザサポートの大まかなアイデアはありますか？

winstonをプロジェクトにインポートしようとしましたが、次のメッセージで失敗しました。
./\~/winston/lib/winston/tail-file.jsのエラー
モジュールが見つかりません：エラー：「/ Users / me / worksheets / app / node_modules / winston / lib / winston」の「fs」を解決できません
@ ./\~/winston/lib/winston/tail-file.js 10：11-24
@ ./\~/winston/lib/winston/transports/file.js
@ ./\~/winston/lib/winston/transports/index.js
@ ./\~/winston/lib/winston.js
@ ./src/app/app.module.ts
@ ./src/main.ts

winstonのindex.jsimport'fs 'を必要とする' .file 'をインポートするトランスポート。

この新鮮な地獄から退会するにはどうすればよいですか

• マイケル

2018年8月7日火曜日午後2時19分[email protected]は次のように書いています。

ウィンストンを私のプロジェクトにインポートしようとしましたが、次のように失敗しました
メッセージ：
.//winston/lib/winston/tail-file.jsのエラー
モジュールが見つかりません：エラー：「fs」を解決できません
'/ Users / me / worksheets / app / node_modules / winston / lib / winston'
@ .//winston/lib/winston/tail-file.js 10：11-24
@ .//winston/lib/winston/transports/file.js
@ .//winston/lib/winston/transports/index.js
@ ./~/winston/lib/winston.js
@ ./src/app/app.module.ts
@ ./src/main.ts

winstonのindex.jsインポート必要な「.file」をインポートするトランスポート
'fs'。

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/winstonjs/winston/issues/287#issuecomment-410946148 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AE3lcdZ3aQKEVYvYB2TXjh0dnQ1FaBS2ks5uOTFhgaJpZM4A2vjK
。

@mjcdあなたは永遠にここで立ち往生しています😆（j / k、メールのリンクを使用して、またはgh経由でサブスクライブを解除できます）

@KErezがwebpackを使用していたのと同じエラーが発生しました

これを解決する一般的な方法は、webpack構成にnode: { fs: 'empty' }を入れることです。もちろん、ブラウザーからFileトランスポートを使用しようとしないでください。これは、機能しません。 追加の設定設定なしでwebpackでwinstonバンドルを作成できればいいのですが、可能であればidkを作成できます。 他の人気のあるパッケージも同じことを推奨していますが、 https： //github.com/pugjs/pug-loader/issues/8#issuecomment -328331541は、winstonのpackage.jsonでこれを修正できることを示唆しています。 誰かがそれを試して、そのエラーが解決した場合（つまり、アプリのwebpack構成を変更せずに、winstonのpackage.jsonを変更するだけで）PRを開きたいですか？

setImmediateが原因でエラーが発生しました... @ chrisvooが成功したように見えるので、理由がわかりません。 たぶん彼がポリフィルを使っているからですか？

私の関連する問題： https ：//github.com/winstonjs/winston/issues/1489

ここで@chrisvooコード（thxが多い）に基づいてパッケージを作成しました：
https://www.npmjs.com/package/winston-transport-browserconsole。

また、デフォルトのウィンストンコンソール出力と比較できるように、そこに小さなサンプルがあります。

これを解決する一般的な方法は、webpack構成にノード：{fs： 'empty'}を配置することです。

webpack構成にこの変更を加える必要なしに、webpackブラウザーバンドルをサポートする計画はありますか？

追加の設定設定なしでwebpackでwinstonバンドルを作成できればいいのですが、可能であればidkを作成できます。 他の人気のあるパッケージも同じことを推奨しています-pugjs / pug-loader＃8（コメント）は、winstonのpackage.jsonでこれを修正できることを示唆しています。 誰かがそれを試して、そのエラーが解決した場合（つまり、アプリのwebpack構成を変更せずに、winstonのpackage.jsonを変更するだけで）PRを開きたいですか？

@DABH残念ながら、それほど単純ではないと思います。 ブラウザフィールドを使用して、別のエントリポイントを定義します。 別のエントリポイントを定義するために使用することも、そのチケットに記載されているように特定のモジュールを置き換えるために使用することもできると思います。両方ではありません。 しかし、あなたはすでにあなた自身のブラウザバージョンを構築しているように思われるので、多分それはそこから削除することができます。 今週末にチャンスがあればピークを迎えます。

これについて何か進展はありますか？ 6年経ちましたが、明日は2020年になります:-)

おそらく解決策は、ウィンストンを再パッケージ化して、トランスポーターが独自のモジュールになるようにすることです。 より良い解決策のように聞こえます

WinstonをAngularで使用できますか？ どうやって ？

@ArpithaGMGowdaは標準のAngularCLIではありません

では、Angular 7には何を使用できますか？
何か案が

前回のプロジェクトでjs-loggerを使用しましたが、これは非常にうまく機能し、ログをelkに送信できますが、昨年はあまりアクティビティがなかったようです： https ：//github.com/jonnyreeves/js-logger
track.jsなど、あなたにも役立つ可能性のある優れたログサービスがあります

このライブラリを、ノードへの依存を取り除く新しい構造に書き直しています。 来週に終了する必要があります

Winstonの問題コードベースのニーズは、コア機能を壊さずに最新化する必要があります。

トランスポート層はそれ自身のサブモールドに分割する必要があり、それは見返りに破壊的な変化を引き起こします。私はチームが引き起こしたくないと思います。 チームが新しいエコシステムを採用する意思がない限り、要点まで。 修理中のPRが承認されるかどうかはわかりません。

NGX-Logger " https://www.npmjs.com/package/ngx-logger "を試してみましたか？

@ArpithaGMGowda私は、あなたをセットのフレームワークに結び付けるコードベースを書くのは好きではないと思います。 コードは、UIからサービス呼び出しまで可能な限り不可知論的である必要があります。 統一されたメカニズムのアイデアも好きです。 バックエンド用とフロントエンド用の方法があるのはなぜですか

このライブラリを、ノードへの依存を取り除く新しい構造に書き直しています。 来週に終了する必要があります

@ Jordan-ホール私たちがすぐにrcを持っているかどうか疑問に思います（そして感謝します）。
winstonを使用するproject / libを使用するときに破損しないように、サードパーティのWebpackを変更する必要があるのは苦労しています。

@MarcoMedranoその根本的な変更は、理論的には私がそれを終えた新しいライブラリの時間になるでしょう。

@poseコアパッケージからトランスポート層を分割することについてどう思いますか？ 私はウィンストンが好きですが、エコシステムを変える必要があります

これを書くのにしばらく時間がかかりましたが、私はこれに対するいくぶん合理的な解決策を思いつきました。
以下では、ブラウザでエラー、警告、および情報レベルを使用できます（カスタムプレフィックス付き！）。これらは次のようになります。

これを機能させるには、依存関係としてwinston 、 logform 、およびwinston-transportをインストールする必要があります。

これを実装するために必要なコードは次のとおりです。
これはtypescriptで書かれていることに注意してください。javascriptの例を以下に示します。

import * as winston from 'winston';
import {TransformableInfo} from 'logform';
import TransportStream = require('winston-transport');

// enumeration to assign color values to
enum LevelColors {
  INFO = 'darkturquoise',
  WARN = 'khaki',
  ERROR = 'tomato',
}

// type levels used for setting color and shutting typescript up
type Levels = 'INFO' | 'WARN' | 'ERROR';

const defaultColor = 'color: inherit';

//! Overriding winston console transporter
class Console extends TransportStream {
  constructor(options = {}) {
    super(options);

    this.setMaxListeners(30);
  }

  log(info: TransformableInfo, next: () => void) {
    // styles a console log statement accordingly to the log level
    // log level colors are taken from levelcolors enum
    console.log(
      `%c[%c${info.level.toUpperCase()}%c]:`,
      defaultColor,
      `color: ${LevelColors[info.level.toUpperCase() as Levels]};`,
      defaultColor,
      // message will be included after stylings
      // through this objects and arrays will be expandable
      info.message
    );

    // must call the next function here
    // or otherwise you'll only be able to send one message
    next();
  }
}

// creating silent loggers with according levels
// silent by default to be automatically deactivated
// in production mode
export const logger = winston.createLogger({
  transports: [
    new Console({
      silent: true,
      level: 'info',
    }),
  ],
});

// don't log anything in production mode
// probably should go further and return non
// working logger function to reduce
// execution time and improve speed results
// on application
if (process.env.NODE_ENV !== 'production') {
  logger.transports.forEach(transport => (transport.silent = false));
}

これがjavascriptの例です

import * as winston from 'winston';

import {TransformableInfo} from 'logform';
import TransportStream = require('winston-transport');

// enumeration to assign color values to
const LevelColors = {
  INFO: 'darkturquoise',
  WARN: 'khaki',
  ERROR: 'tomato',
}

const defaultColor = 'color: inherit';

//! Overriding winston console transporter
class Console extends TransportStream {
  constructor(options = {}) {
    super(options);

    this.setMaxListeners(30);
  }

  log(info, next) {
    // styles a console log statement accordingly to the log level
    // log level colors are taken from levelcolors enum
    console.log(
      `%c[%c${info.level.toUpperCase()}%c]:`,
      defaultColor,
      `color: ${LevelColors[info.level.toUpperCase()]};`,
      defaultColor,
      // message will be included after stylings
      // through this objects and arrays will be expandable
      info.message
    );

    // must call the next function here
    // or otherwise you'll only be able to send one message
    next();
  }
}

// creating silent loggers with according levels
// silent by default to be automatically deactivated
// in production mode
export const logger = winston.createLogger({
  transports: [
    new Console({
      silent: true,
      level: 'info',
    }),
  ],
});

// don't log anything in production mode
// probably should go further and return non
// working logger function to reduce
// execution time and improve speed results
// on application
if (process.env.NODE_ENV !== 'production') {
  logger.transports.forEach(transport => (transport.silent = false));
}

LevelColors列挙型で色を変更できます。 フォーマットを変更したい場合は、29行目を見てください。

デバッグレベルのサポートを追加します。 コンソールオプションのlevelを'debug'に設定します。
すべての標準ウィンストンレベルのサポートを追加することもできます。つまり、emerg、alert、crit、error、warn、info、およびdebugです。 これらも使用する場合は、このオブジェクトをcreateLoggerルートのlevels構成に追加して割り当てる必要があります。

{
   emerg: 0,
   alert: 1,
   crit: 2,
   error: 3,
   warn: 4,
   info: 5,
   debug: 6,
}

次に、LevelColors列挙型に色の値を追加します。

この問題の状況を明確に把握するのに苦労しています。 ReactアプリでWinstonを使用できますか？

私は実際にはブラウザコンソールにログを記録することにあまり興味がありません-そして正直なところ、組み込みのconsoleが同じ目的を果たすときにwinston console transporterをオーバーライドすることのポイントを理解していません; 多分誰かが親切に私を教えてくれるでしょう。

私の状況では、Reactアプリはnginx / Let's Encryptプロキシの背後にあるDockerコンテナーで実行されているため、JavaScriptコンソールの出力にアクセスできません。 したがって、ログ出力をsyslogサーバーに転送したいと思います。

データベース、バックエンド、およびプロジェクトで構成されている他のいくつかのコンテナーからのログ出力を統合するsyslog-ng Dockerコンテナーを正常にセットアップしましたが、syslogに簡単で標準的なアプローチを見つけることができないようです。 Reactフロントエンドからの出力。

ばかげた自家製のソリューションをハッキングする前に、誰かが私にもっと良いアドバイスを持っていますか？
たぶん上記のコードを取り、 console.logをネットワーク経由でsyslogサーバーにメッセージを送信するコードに置き換えますか？

@ z00m1nそれは主にあなたのユースケースに依存します。 私はブラウザでwinstonを使用して、行ったすべての要求と関数呼び出しをログに記録します。 また、実稼働環境にいる場合は、出力を印刷エラーのみに制限します。

そして、私のコードを使用して、console.logステートメントを他のものと交換するとうまくいくでしょう。

ただし、これを機能させるためのハッキーなソリューションを作成する前に、歩哨を使用することをお勧めします。

また、webpackを制御できるかどうかによっても異なります。 悲しいことに、この驚くべきパッケージはアーキテクチャ的に古くなっているため、真に解決することは不可能です

@Keimeno奇妙な動作やパフォーマンスの問題に気づきましたか？ 本当に使いたいのですが、私のユースケースでは本番環境でログが発生するため、非常に安定している必要があります...

@gcperrinパフォーマンスの問題と呼べるかどうかはわかりませんが、いくつかのベンチマークを実行して、次の結果を得ました。
開発環境：コンソールに何かを記録します
製品環境：何かをログに記録しませんが、ログ関数を呼び出します

_console.info（開発環境）_; 10.000ログの場合は1.863秒。 （各0,1893ms）
_logger.info（開発環境）_：10.000ログの場合は7.980秒。 （各0.7980ms）

_logger.info（製品環境）_; 10.000ログの場合は3.731秒。 （各0.3731ms）

つまり、私の関数を使用して本番環境でロガーを無音化した場合でも、同期コードは0.3731ms（場合によってはさらに長く）実行されます。 パフォーマンスの問題ではないかもしれませんが、本番環境でサイレントなログが数百ある場合は、Webアプリが遅れる可能性があります。

ウィンストンを使用してブラウザ側のファイルシステムにログインし続ける方法はありますか？

Reactアプリケーションがあり、クライアント側のログをファイルシステムに保存したいと思います。 いくつかの考えを親切に提案してください。

前もって感謝します。