Winston: 로깅을 위해 프론트엔드(예: 브라우저)에서 winston을 사용할 수 있습니까?

나는 그것을 시도하지 않았지만 이것이 도움이 될 수 있습니다 https://github.com/farpoint/meteor-winston-client

이것은 다음과 관련이 있습니다: https://github.com/flatiron/winston/issues/180

@joshacheson 링크에 404가 있습니다!!

이 문제에 진전이 있습니까?

#582의 피드백에 따르면 향후 PR은 brfs 와 같은 shim을 사용하는 것보다 핵심 로직과 전송을 분리하는 데 집중해야 할 것 같습니다. 이것은 큰 구조적 변화가 될 것이며 스타일과 접근 방식에 대한 핵심 개발자의 지침이 거의 확실하게 필요할 것입니다. 궁극적으로 이를 유지 관리하게 될 것이기 때문입니다.

좋은 소식은 코드가 대부분 깨끗하고 잘 구성되어 있지만 스타일과 접근 방식에 대한 핵심 개발자의 지침이 필요하다는 것입니다. @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 구현을 별도의 파일에 복사하여 붙여넣은 다음 다른 파일에 코드의 두 번째 부분을 붙여넣고 BrowserConsole 전송 코드(스니펫의 마지막 줄)를 추가한 후 단순히 시도했습니다:

log.info('hello world');

그런 다음 오류가 발생하여 다음을 시도했습니다.

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

두 호출 모두 동일한 오류를 반환합니다.

브라우저에서 Node를 사용할 수 있는 환경은 Meteor.js v1.6(Node 8.8.1)입니다. 또한 코드 스니펫의 한 줄도 수정하지 않았습니다.

BTW: 얼마 전에 winston을 사용하기 시작했기 때문에 잘못된 일을 하고 있을 수 있습니다.

@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 사실 나도 이것을 알아차렸고, 이에 관해 이전에 winston-transport 에 문제를 제출했습니다. 또한 콘솔 전송이 동형이 되도록 곧 pull 요청을 제출할 것입니다.

무시: [혼자 구독하면 할 수 없기 때문에](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의 '스트림'을 확인할 수 없습니다.

PR #1145(2017년 11월 오픈)가 올해 합병될 가능성이 있습니까? :눈짓:

@dmitry-salnikov #1145가 마스터에 병합되었습니다. 아직 릴리스에는 없습니다.

닫기 닫기 닫기 닫기

지원 주셔서 감사합니다 나중에 감자

적어도 5년은 결실을 맺는다. Winston은 여전히 ​​JavaScript IMO를 위한 최고의 로깅 시스템입니다.

감사 해요!

이것은 브라우저 지원을 확인하는 테스트가 테스트 스위트에 있을 때까지 열려 있습니다. 그러나 babel 및 webpack 주변의 대부분의 모서리 및 모서리 케이스가 해결된 것 같습니다.

여기에서 우리는 winston을 사랑 하고 클라이언트 측 로깅 미들웨어가 필요합니다.

브라우저가 구현된 지 시간이 조금 지났는데 지금부터 사용하고 싶습니다.

단위 테스트 및 전체 브라우저 적용 범위를 기다리기 전에 브라우저 지원에 대한 대략적인 아이디어가 있습니까?

내 프로젝트에 winston을 가져오려고 시도했지만 다음 메시지와 함께 실패했습니다.
./\~/winston/lib/winston/tail-file.js의 오류
모듈을 찾을 수 없음: 오류: '/Users/me/workspaces/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.js import 'fs'가 필요한 '.file'을 가져오는 Transports.

이 신선한 지옥에서 어떻게 구독을 취소합니까

• 남자 이름

2018년 8월 7일 화요일 오후 2시 19분에 Kfir Erez [email protected] 에서 다음과 같이 썼습니다.

내 프로젝트에 winston을 가져오려고 시도했지만 다음으로 실패했습니다.
메세지:
.//winston/lib/winston/tail-file.js의 오류
모듈을 찾을 수 없음: 오류: 'fs'를 확인할 수 없습니다.
'/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의 index.js import '.file'을 가져오는 Transports는 다음이 필요합니다.
'FS'.

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/winstonjs/winston/issues/287#issuecomment-410946148 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AE3lcdZ3aQKEVYvYB2TXjh0dnQ1FaBS2ks5uOTFhgaJpZM4A2vjK
.

@mjcd 당신은 여기에 영원히 갇혀 있습니다 😆 (j/k, 이메일의 링크를 사용하거나 gh를 통해 구독을 취소할 수 있습니다)

@KErez가 webpack 을 사용하는 것과 동일한 오류가 발생했습니다.

이를 해결하는 일반적인 방법은 웹팩 구성에 node: { fs: 'empty' } 를 넣는 것입니다. 그리고 분명히 브라우저에서 File 전송을 사용하려고 하면 작동하지 않습니다. 추가 구성 설정 없이 webpack에서 winston 번들을 만들 수 있다면 좋겠지만 가능하다면 idk입니다. 다른 인기 있는 패키지도 같은 것을 권장하지만 https://github.com/pugjs/pug-loader/issues/8#issuecomment -328331541에서는 winston의 package.json에서 이 문제를 수정할 수 있다고 제안합니다. 누군가 그것을 시도하고 해당 오류가 해결되면 PR을 열고 싶습니까(예: 앱의 webpack 구성을 변경하지 않고 winston의 package.json만 변경)?

나 setImmediate로 인해 오류가 발생했습니다... @chrisvoo 가 성공하는 것처럼 보이는 이유를 이해할 수 없습니다. 아마도 그가 폴리필을 사용하기 때문일까요?

내 관련 문제: https://github.com/winstonjs/winston/issues/1489

@chrisvoo 코드(thx so much)를 기반으로 패키지를 만들었습니다.
https://www.npmjs.com/package/winston-transport-browserconsole.

또한 기본 winston 콘솔 출력과 비교할 수 있도록 약간의 샘플이 있습니다.

이를 해결하는 일반적인 방법은 webpack 구성에 node: { fs: 'empty' }를 넣는 것입니다.

웹팩 구성을 변경할 필요 없이 웹팩 브라우저 번들을 지원할 계획이 있습니까?

추가 구성 설정 없이 webpack에서 winston 번들을 만들 수 있다면 좋겠지만 가능하다면 idk입니다. 다른 인기 있는 패키지도 같은 것을 권장하지만 pugjs/pug-loader#8(주석) 은 winston의 package.json에서 이 문제를 수정할 수 있다고 제안합니다. 누군가 그것을 시도하고 해당 오류가 해결되면 PR을 열고 싶습니까(예: 앱의 webpack 구성을 변경하지 않고 winston의 package.json만 변경)?

@DABH 불행히도, 나는 그것이 그렇게 간단하다고 생각하지 않습니다. 브라우저 필드를 사용하여 다른 진입점을 정의합니다. 다른 진입점을 정의하거나 해당 티켓에 설명된 대로 특정 모듈을 교체하는 데 사용할 수 있다고 생각합니다. 둘 다 아닙니다. 그러나 이미 자신의 브라우저 버전을 구축하고 있기 때문에 해당 버전에서 제거할 수 있습니다. 이번 주말에 기회가 된다면 꼭 가봐야겠습니다.

이에 대한 진전이 있습니까? 6년이 지났고 내일이면 2020년이 됩니다 :-)

아마도 해결책은 winston을 다시 패키징하여 운송업자가 자신의 모듈이 되도록 하는 것입니다. 더 나은 솔루션처럼 들립니다.

각도에서 Winston을 사용할 수 있습니까? 어떻게 ?

@ArpithaGMGowda 는 표준 각도 CLI가 아닙니다.

그렇다면 우리는 Angular 7에 무엇을 사용할 수 있습니까 ??
어떤 아이디어라도

지난 프로젝트에서 js-logger를 사용했는데 매우 잘 작동했으며 작년에 활동이 많지 않은 것처럼 보이지만 엘크에게 로그를 보낼 수 있습니다. https://github.com/jonnyreeves/js-logger
track.js와 같이 당신을 위해 작동할 수도 있는 좋은 로깅 서비스가 있습니다.

이 라이브러리를 노드에 대한 종속성을 제거하는 새 구조로 다시 작성하고 있습니다. 다음주에 끝내야지

코드 기반 Winston의 문제는 핵심 기능을 손상시키지 않고 현대화해야 합니다.

전송 계층은 자체 하위 몰드로 분할해야 하며, 그 대가로 팀에서 원하지 않는 변경 사항이 발생할 것입니다. 팀이 새로운 생태계를 기꺼이 채택하지 않는 한. 수리 중인 PR이 승인될지 확신이 서지 않습니다.

NGX-Logger " https://www.npmjs.com/package/ngx-logger "를 사용해 보셨습니까?

@ArpithaGMGowda 내 생각에 나는 당신을 세트 프레임워크에 묶는 코드 베이스를 작성하는 것을 좋아하지 않습니다. 코드는 UI에서 서비스 호출까지 가능한 한 불가지론적이어야 합니다. 나는 또한 통일된 메커니즘의 아이디어를 좋아합니다. 백엔드를 위한 한 가지 방법과 프론트엔드를 위한 다른 방법이 있는 이유

이 라이브러리를 노드에 대한 종속성을 제거하는 새 구조로 다시 작성하고 있습니다. 다음주에 끝내야지

@Jordan-Hall 조만간 rc 를 갖게 될지 궁금합니다(감사합니다).
winston을 사용하는 프로젝트/lib를 사용할 때 중단되지 않도록 타사 웹팩을 수정해야 하는 것은 어려움을 겪고 있습니다.

@MarcoMedrano 이론적으로 새로운 라이브러리가 완성되는 근본적인 변화입니다.

@pose 코어 패키지에서 전송 계층을 분리하는 것에 대한 귀하의 견해는 무엇입니까? 나는 Winston을 좋아하지만 생태계는 변화가 필요합니다

이 글을 작성하는 데 시간이 걸렸지만 이에 대한 다소 합리적인 해결책을 생각해 냈습니다.
다음을 사용하면 브라우저에서 오류, 경고 및 정보 수준( 사용자 정의 접두사 포함)을 사용할 수 있으며 다음과 같이 표시됩니다.

이것이 작동하려면 winston , logform 및 winston-transport 를 종속성으로 설치해야 합니다.

이것을 구현하는 데 필요한 코드는 다음과 같습니다.
이것은 typescript 로 작성되었으며 자바 스크립트 예제는 아래와 같습니다.

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

그리고 여기에 자바 스크립트 예제가 있습니다

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' 설정합니다.
또한 모든 표준 winston 수준에 대한 지원을 추가할 수 있습니다. 즉, 비상, 경고, 치명타, 오류, 경고, 정보 및 디버그를 의미합니다. 이것들도 사용하려면 이 객체를 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 컨테이너를 성공적으로 설정했지만 syslogging에 대한 간단하고 정식적인 접근 방식을 찾지 못하는 것 같습니다. React 프론트엔드의 출력.

내가 집에서 만든 멍청한 솔루션을 해킹하기 전에 나에게 더 나은 조언을 줄 사람이 있습니까?
위의 코드를 사용하여 console.log 를 네트워크를 통해 syslog 서버로 메시지를 보내는 일부 코드로 대체하시겠습니까?

@z00m1n 주로 사용 사례에 따라 다릅니다. 브라우저에서 winston을 사용하여 내가 만드는 모든 요청과 함수 호출을 기록합니다. 그리고 프로덕션 환경에 있는 경우 출력을 인쇄 오류로만 제한합니다.

내 코드를 사용하고 console.log 문을 다른 것으로 교환하면 작동합니다.

그러나 이 작업을 수행하기 위한 해키 솔루션을 작성하기 전에 센트리를 사용하는 것이 좋습니다.

또한 웹팩을 제어할 수 있는지 여부에 따라 다릅니다. 슬프게도 이 놀라운 패키지는 구조적으로 구식이어서 진정으로 해결할 수 없습니다.

@Keimeno 이상한 행동이나 성능 문제를 발견하셨습니까? 정말 사용하고 싶지만 내 사용 사례에 대한 프로덕션 환경에서 일부 로깅이 발생하므로 매우 안정적이어야 합니다...

@gcperrin 성능 문제라고 할 수 있는지 확실하지 않지만 몇 가지 벤치마크를 실행하고 다음 결과를 얻었습니다.
dev 환경: 콘솔에 무언가를 기록합니다.
prod 환경: 무언가를 기록하지 않지만 log 함수를 호출합니다.

_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(잠재적으로 더 높을 수 있음) 동안 실행됩니다. 성능 문제가 아닐 수도 있지만 프로덕션에서 자동으로 실행되는 수백 개의 로그가 있는 경우 웹 앱이 지연될 수 있습니다.

브라우저 측에서 파일 시스템에 로그인을 유지하기 위해 winston을 사용하는 방법이 있습니까?

React 애플리케이션이 있고 클라이언트 측 로그를 파일 시스템에 저장하고 싶습니다. 제발 몇 가지 생각을 제안하십시오.

미리 감사드립니다.