Angular의 일관된 콘솔 로그

자레드 유시 | ng-conf | 2019년 4월

기록해야 할 때는 일관되게 기록하십시오.

로깅이 필요합니다. 이를 통해 개발 및 프로덕션 모두에서 디버깅할 수 있습니다. 그러나 console는 기본적으로 tslint에 의해 허용되지 않습니다. 그리고 정당한 이유가 있습니다. 콘솔 로깅은 대부분 엉망입니다. 마음대로 할 수 있다면console.log(whatever) 로그는 거의 쓸모가 없습니다.

프로덕션에서 너무 많은 로그인으로 인해 애플리케이션 속도가 느려질 수 있고 더 자세한 정보가 필요한 개발에서는 충분하지 않을 수 있습니다.

저는 여러 프로젝트에서 이 문제를 처리해야 했고 무엇을 기록하고 어디에 기록할지 제어할 수 있는 정적 로거 클래스를 Angular로 작성했습니다.

요점은 다음과 같습니다https://gist.github.com/jkyoutsey/e99336d58c2c83bc0ba03cde78fcc64e.

간단히 말해서 다음과 같은 옵션이 있습니다.
Logger.(debug|info|warn|error|devOnly|techDebt)(module: string, method: string, message?: any)debug|info|warn|error는 선택적 devOnly: boolean 인수를 true로 설정하지 않는 한 모든 환경에 로그인합니다. 그런 다음 module 및 method는 계속 기록되지만 message 인수는 기록되지 않습니다. 이를 통해 프로덕션 환경에서 중요한 데이터를 유출하지 않고 추적할 수 있습니다.
devOnly|techDebt에는 선택적 devOnly 인수가 없으며 비프로덕션 환경에서만 콘솔에 기록됩니다.

환경이란 귀하의 src/environments/environment.ts 의 production 재산 가치를 의미합니다. 거짓이면 모든 로그 문을 받게 됩니다. 사실이라면 debug|info|warn|error만 얻을 수 있습니다.

이제 출력 형식이 일관되어 읽기, 구문 분석 또는 분석이 더 쉬워집니다.




샘플 로거 사용

위 명령의 결과는 Chrome DevTools에서 다음과 같습니다.




읽을 수 있는 콘솔 출력

더 쉽게 하기 위해 VisualStudio 코드 스니펫도 만들었습니다.

"Log All The Things": {
    "prefix": "ll",
    "body": [
        "Logger.${LEVEL}('${CLASS}', '${METHOD}', `${message}`);"
    ]
}

logger.ts.vscode.snippet.txt GitHub에서 호스팅

그리고 커버리지에 영향을 주지 않도록 단위 테스트를 했습니다. (그러나 you shouldn’t worry too much about coverage ): https://gist.github.com/jkyoutsey/01e3e2db4ba9a570245bd63d543960e1

이 내용이 유용하거나 흥미롭다면 박수를 쳐주세요!

ng-conf: Reliable Web Summit에 참여하세요.

커뮤니티 구성원과 리더로부터 신뢰할 수 있는 웹 애플리케이션을 구축하고, 고품질 코드를 작성하고, 확장 가능한 아키텍처를 선택하고, 효과적인 자동화 테스트를 생성하는 가장 좋은 방법을 배우십시오. ng-conf가 제공하는 2021년 8월 26일과 27일에 열리는 Reliable Web Summit에 참여하세요.
https://reliablewebsummit.com/