Winston: Bisakah winston digunakan di front-end (yaitu browser) untuk logging?

Saya belum mencobanya, tetapi ini mungkin membantu https://github.com/farpoint/meteor-winston-client

Ini terkait dengan: https://github.com/flatiron/winston/issues/180

Ada 404 di tautan itu @joshacheson !!

Apakah Anda memiliki kemajuan dengan masalah ini?

Berdasarkan umpan balik dari #582, tampaknya setiap PR masa depan perlu fokus pada pemisahan logika inti dan transportasi, daripada menggunakan shim seperti brfs . Ini akan menjadi perubahan struktural yang besar dan hampir pasti membutuhkan bimbingan dari pengembang inti tentang gaya dan pendekatan, karena pada akhirnya merekalah yang akan mempertahankan ini.

Kabar baiknya adalah bahwa sebagian besar kodenya bersih dan terstruktur dengan baik, tetapi akan membutuhkan beberapa panduan dari pengembang inti tentang gaya dan pendekatan. Bisakah @indexzero / @pose berbagi pemikiran Anda?

Ada kemajuan dengan masalah ini?

Astaga, harapan saya sangat tinggi ketika saya melihat paket dan kemudian tidak melihat dukungan browser.
Ini akan sangat luar biasa bagi saya di browser untuk mengganti beberapa barang buatan sendiri.

+1

Sama atau aku. Memiliki lib logging yang sama untuk depan dan belakang juga membantu.

Saya baru saja menjelajahi ini dan tampaknya memalukan bahwa meskipun memiliki transport http, tampaknya tidak ada klien standar untuk browser/lainnya.

Sedih karena saya harus menggunakan bunyan

ada berita tentang ini?

Jika Anda benar-benar ingin menggunakannya, Anda bisa menulis custom transport untuknya, misalnya:

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);
    }
  }
}

Kemudian Anda dapat menggunakannya dengan cara ini:

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',
  }));
}

Dengan transportasi ini, Anda mendapatkan peringatan yang tidak berguna karena dianggap sebagai kode lama. Akan sangat bagus untuk menambahkan kemungkinan untuk menggunakan metode konsol lain ( table , dir , trace , ...), tetapi demi kesederhanaan memang seperti itu.

Terima kasih @chrisvoo , saya sudah mencoba solusi ini tetapi mendapat kesalahan:

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 Saya tidak tahu, tetapi saya tidak mengerti mengapa kode ini menggunakan aliran. Mungkin kasus penggunaan saya terlalu sederhana. Coba bagikan cara Anda menggunakannya.

@chrisvoo Saya telah menyalin implementasi BrowserConsole ke file terpisah, lalu di file lain menempelkan bagian kedua kode, dan setelah menambahkan kode transport BrowserConsole (baris terakhir cuplikan Anda) saya baru saja mencoba:

log.info('hello world');

Kemudian saya mendapat kesalahan, dan mencoba:

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

Kedua panggilan mengembalikan kesalahan yang sama.

Lingkungan saya yang memungkinkan penggunaan Node di browser adalah Meteor.js v1.6 (Node 8.8.1). Saya juga belum mengubah baris cuplikan kode Anda.

BTW: Saya sudah mulai menggunakan winston belum lama ini, jadi mungkin melakukan sesuatu yang salah.

@dmitry-salnikov kesalahan apa yang Anda terima? Seperti "info bukan fungsi"? Mungkin untuk beberapa alasan, itu diimpor dengan buruk.

@chrisvoo silakan lihat:

Isi BrowserConsole.js (Anda dapat melihatnya di pohon file) persis seperti di cuplikan Anda.

Dan saya setuju dengan Anda, saya merasa ada yang salah dengan impor, tetapi tidak tahu mengapa :( Bisakah Anda membagikan pemikiran Anda tentang ini?

Apa versi Winston Anda? Punya saya:

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

Sebenarnya sama

$ 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"

Mencoba memecahkan masalah ini, saya telah melakukan tes lain:

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({
...

dan mendapatkan kesalahan berikutnya: Cannot find module './combine'

Berikut adalah jejak tumpukan dan kode terkait (tangkapan layar browser):

Sepertinya ada sesuatu yang sangat buruk diimpor. @chrisvoo bisa tolong lihat?

Di Winston 3.0.0, transportasi adalah aliran. Namun, di browserify-stream, readableStream instanceof Stream tidak berlaku. Ini membuat Winston mundur untuk membungkus transportasi dalam bungkus Legacy dan mengeluarkan peringatan. Saya membuat PR untuk menggunakan metode berbeda untuk pendeteksian streaminess: #1145

@Jasu benar saya perhatikan ini juga, saya telah mengirimkan masalah sebelumnya tentang ini di winston-transport . Saya juga akan segera mengajukan permintaan tarik agar transportasi konsol menjadi isomorfik.

ABAIKAN: Saya berkomentar di sini sehingga saya dapat dengan mudah menemukan masalah ini lagi di masa mendatang, [karena saya tidak dapat melakukannya dengan berlangganan sendiri](https://github.com/isaacs/github/issues/283).

Saya menemui masalah yang sama, Error: Cannot find module './combine' .

+1

@chrisvoo : di bawah ini adalah kesalahannya, ketika saya mencoba menjalankan cuplikan Anda (winston dan winston-transport ada di versi 3+)
KESALAHAN di winston-transport/index.js
Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'aliran' di node_modules/winston-transport'

apakah ada kemungkinan PR #1145 (dibuka November 2017) akan digabung tahun ini? :mengedip:

@dmitry-salnikov #1145 telah digabungkan menjadi master. Padahal belum rilis.

TUTUP TUTUP TUTUP.

Terima kasih atas dukungannya ya kentang

5 tahun, setidaknya itu akan membuahkan hasil. Winston masih merupakan sistem logging terbaik untuk JavaScript IMO

Terima kasih!

Ini akan tetap terbuka sampai ada pengujian di rangkaian pengujian kami yang memverifikasi dukungan browser. Sepertinya sebagian besar kasus tepi dan sudut di sekitar babel & webpack telah diselesaikan.

Di sini kami menyukai winston dan membutuhkan middleware logging sisi klien.

Beberapa saat telah berlalu sejak browser diimplementasikan dan kami ingin menggunakannya mulai sekarang.

Adakah gambaran kasar tentang dukungan browser, sebelum menunggu unit test dan cakupan browser penuh?

Mencoba mengimpor winston ke proyek saya dan gagal dengan pesan berikut:
GALAT di ./\~/winston/lib/winston/tail-file.js
Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'fs' di '/Users/me/workspaces/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's index.js import Transports yang mengimpor '.file' yang membutuhkan 'fs'.

Bagaimana cara berhenti berlangganan dari neraka baru ini

• Michael

Pada Selasa, 7 Agustus 2018 pukul 14.19 Kfir [email protected] menulis:

Mencoba mengimpor winston ke proyek saya dan gagal dengan yang berikut
pesan:
GALAT di .//winston/lib/winston/tail-file.js
Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'fs' di
'/Users/me/workspaces/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's index.js import Transports yang mengimpor '.file' yang membutuhkan
'fs'.

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/winstonjs/winston/issues/287#issuecomment-410946148 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AE3lcdZ3aQKEVYvYB2TXjh0dnQ1FaBS2ks5uOTFhgaJpZM4A2vjK
.

@mjcd Anda terjebak di sini selamanya (j/k, Anda dapat berhenti berlangganan menggunakan tautan di email atau melalui gh)

Saya memiliki kesalahan yang sama dengan @KErez menggunakan webpack

Cara umum untuk menyelesaikannya adalah dengan meletakkan node: { fs: 'empty' } di konfigurasi webpack Anda -- dan jelas jangan mencoba menggunakan transportasi File dari browser, itu tidak akan berhasil. Akan lebih baik jika kita bisa membuat bundel winston di webpack tanpa pengaturan konfigurasi tambahan itu tetapi tidak tahu apakah itu mungkin. Paket populer lainnya merekomendasikan hal yang sama -- meskipun https://github.com/pugjs/pug-loader/issues/8#issuecomment -328331541 menyarankan agar kami dapat memperbaikinya di package.json winston. Seseorang ingin mencobanya dan membuka PR jika itu menyelesaikan kesalahan itu (yaitu tanpa mengubah konfigurasi webpack aplikasi Anda, cukup dengan mengubah package.json winston)?

Saya, saya mendapatkan kesalahan karena setImmediate... Saya tidak mengerti mengapa karena @chrisvoo tampaknya berhasil. Mungkin karena Anda dia menggunakan polyfill?

Masalah terkait saya: https://github.com/winstonjs/winston/issues/1489

Membuat paket berdasarkan kode @chrisvoo (thx so much) di sini:
https://www.npmjs.com/package/winston-transport-browserconsole.

Juga, ada sedikit sampel di sana sehingga Anda dapat membandingkan dengan keluaran konsol winston default.

Cara umum untuk menyelesaikannya adalah dengan menempatkan node: { fs: 'empty' } di konfigurasi webpack Anda

Apakah ada rencana untuk mendukung bundel browser webpack tanpa perlu melakukan perubahan ini pada konfigurasi webpack?

Akan lebih baik jika kita bisa membuat bundel winston di webpack tanpa pengaturan konfigurasi tambahan itu tetapi tidak tahu apakah itu mungkin. Paket populer lainnya merekomendasikan hal yang sama -- meskipun pugjs/pug-loader#8 (komentar) menyarankan agar kami dapat memperbaikinya di package.json winston. Seseorang ingin mencobanya dan membuka PR jika itu menyelesaikan kesalahan itu (yaitu tanpa mengubah konfigurasi webpack aplikasi Anda, cukup dengan mengubah package.json winston)?

@DABH Sayangnya, menurut saya tidak sesederhana itu. Kalian menggunakan bidang browser untuk menentukan titik masuk yang berbeda. Saya percaya ini dapat digunakan untuk menentukan titik masuk yang berbeda ATAU mengganti modul tertentu, seperti yang dijelaskan dalam tiket itu - tidak keduanya. Tapi karena Anda sudah membangun versi browser Anda sendiri, mungkin itu bisa dihapus saja. Saya akan mengambil puncak jika saya memiliki kesempatan akhir pekan ini.

Ada kemajuan dalam hal ini? Sudah 6 tahun dan besok sudah 2020 :-)

Mungkin solusinya adalah mengemas ulang winston sehingga pengangkut adalah modul mereka sendiri. Kedengarannya seperti solusi yang lebih baik

bisakah kita menggunakan Winston di sudut? bagaimana ?

@ArpithaGMGowda tidak dengan CLI sudut standar

Lalu apa yang bisa kita gunakan untuk Angular 7??
Ada ide

Saya menggunakan js-logger di proyek terakhir saya yang bekerja sangat baik dan memungkinkan saya untuk mengirim log ke rusa meskipun sepertinya tidak memiliki banyak aktivitas pada tahun lalu: https://github.com/jonnyreeves/js-logger
Ada layanan logging bagus yang mungkin juga cocok untuk Anda seperti track.js

Saya sedang menulis ulang perpustakaan ini menjadi struktur baru yang menghilangkan ketergantungan pada node.js. Harusnya selesai minggu depan

Masalah dengan Winston, berbasis kode perlu dimodernisasi tanpa merusak fitur inti.

Lapisan transport perlu dipecah menjadi submouldnya sendiri yang sebagai gantinya akan menyebabkan perubahan yang melanggar, saya kira tim tidak ingin menyebabkannya. To the point kecuali tim mau mengadopsi sistem eko ​​baru. Saya tidak yakin PR yang sedang diperbaiki akan disetujui.

apakah kalian sudah mencoba dengan NGX-Logger " https://www.npmjs.com/package/ngx-logger " ?

@ArpithaGMGowda Saya kira bagi saya, saya tidak suka menulis basis kode yang mengikat Anda ke dalam kerangka kerja yang ditetapkan. Kode harus agnostik mungkin dari UI ke panggilan layanan. Saya juga menyukai gagasan tentang mekanisme terpadu. Mengapa memiliki satu cara untuk backend dan satu lagi untuk frontend

Saya sedang menulis ulang perpustakaan ini menjadi struktur baru yang menghilangkan ketergantungan pada node.js. Harusnya selesai minggu depan

@Jordan-Hall Bertanya-tanya apakah kami akan mengadakan rc segera (dan terima kasih).
Harus memodifikasi paket web pihak ketiga agar tidak rusak ketika mereka menggunakan proyek/lib kami yang menggunakan winston sedang berjuang.

@MarcoMedrano Ini adalah perubahan mendasar yang secara teori akan menjadi perpustakaan baru saat saya menyelesaikannya.

@pose Apa pandangan Anda tentang pemisahan lapisan transport dari paket inti? Saya suka Winston tetapi sistem ramah lingkungan perlu diubah

Butuh beberapa saat untuk menulis ini, tetapi saya telah menemukan solusi yang agak masuk akal untuk ini.
Berikut ini akan memungkinkan Anda untuk menggunakan tingkat kesalahan, peringatan, dan info di browser (dengan awalan khusus !), dan mereka akan terlihat seperti ini:

Agar ini berfungsi, Anda perlu menginstal winston , logform dan winston-transport sebagai dependensi.

Inilah kode yang Anda butuhkan untuk mengimplementasikan ini.
Perhatikan bahwa ini ditulis dalam TypeScript, contoh javascript di bawah ini.

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));
}

dan inilah contoh javascriptnya

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));
}

Anda dapat mengubah warna di enum LevelColors. Jika Anda ingin mengubah pemformatan, lihat baris 29.

Untuk menambahkan dukungan untuk tingkat debug. atur level di opsi konsol ke 'debug' .
Dimungkinkan juga untuk menambahkan dukungan untuk semua level winston standar, artinya: muncul, waspada, kritis, kesalahan, peringatan, info, dan debug. Jika Anda ingin menggunakan ini juga, Anda perlu menambahkan assign objek ini ke konfigurasi levels di root createLogger

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

dan kemudian tambahkan nilai warna di enum LevelColors.

Saya berjuang untuk mendapatkan gambaran yang jelas tentang status masalah ini. Bisakah saya menggunakan Winston di aplikasi React saya?

Saya sebenarnya tidak begitu tertarik untuk masuk ke konsol browser - dan sejujurnya, saya tidak mengerti gunanya mengganti winston console transporter ketika console bawaan melayani tujuan yang sama ; mungkin ada yang bisa kasih pencerahan.

Situasi saya adalah bahwa aplikasi React saya berjalan dalam wadah Docker di belakang proxy nginx/Let's Encrypt, jadi saya tidak memiliki akses ke keluaran konsol JavaScript apa pun; Karena itu saya ingin meneruskan keluaran log apa pun ke server syslog.

Saya telah berhasil menyiapkan wadah Docker syslog-ng yang mengkonsolidasikan keluaran log dari database, backend, dan beberapa wadah lain tempat proyek saya dibuat, tetapi sepertinya saya tidak dapat menemukan pendekatan langsung/kanonik untuk syslogging keluaran dari frontend React.

Sebelum saya meretas beberapa solusi buatan sendiri yang bodoh, adakah yang punya saran yang lebih baik untuk saya?
Mungkin mengambil kode di atas dan mengganti console.log dengan beberapa kode yang mengirimkan pesan melalui jaringan ke server syslog?

@z00m1n Sebagian besar tergantung pada kasus penggunaan Anda. Saya menggunakan winston di browser untuk mencatat semua permintaan dan panggilan fungsi yang saya buat. Dan jika saya berada di lingkungan produksi, saya membatasi output hanya untuk kesalahan cetak.

Dan menggunakan kode saya dan menukar pernyataan console.log dengan sesuatu yang lain akan berhasil.

Namun, sebelum Anda menulis solusi peretasan untuk membuat ini berfungsi, saya sarankan menggunakan penjaga.

Itu juga tergantung pada apakah Anda memiliki kendali atas webpack. Sayangnya paket luar biasa ini sudah ketinggalan zaman secara arsitektur yang membuatnya tidak mungkin untuk benar-benar dipecahkan

@Keimeno apakah Anda melihat ada perilaku aneh atau masalah kinerja? Benar-benar ingin menggunakan tetapi harus stabil karena beberapa pencatatan akan terjadi dalam produksi untuk kasus penggunaan saya ...

@gcperrin Tidak yakin apakah Anda dapat menyebutnya sebagai masalah kinerja, tetapi saya telah menjalankan beberapa tolok ukur dan mendapatkan hasil berikut:
lingkungan dev: itu mencatat sesuatu ke konsol
lingkungan prod: tidak mencatat sesuatu tetapi memanggil fungsi log

_console.info (lingkungan pengembang)_; 1,863 detik untuk 10.000 log. (masing-masing 0,1893 md)
_logger.info (lingkungan dev)_: 7.980 detik untuk 10.000 log. (masing-masing 0,7980 md)

_logger.info (lingkungan prod)_; 3.731 detik untuk 10.000 log. (masing-masing 0,3731 md)

Ini berarti jika Anda menggunakan fungsi saya untuk membungkam logger dalam produksi, Anda akan tetap menjalankan kode sinkron selama 0,3731 ms (bahkan berpotensi lebih tinggi). Ini mungkin bukan masalah kinerja, tetapi jika Anda memiliki beberapa ratus log yang diam dalam produksi, ini dapat menyebabkan aplikasi web Anda lag.

Adakah cara untuk menggunakan winston untuk tetap masuk ke sistem file di sisi browser?

Saya memiliki aplikasi React dan ingin menyimpan log sisi klien ke dalam sistem file. Silakan menyarankan beberapa pemikiran.

Terima kasih sebelumnya.