로그4js를 사용하여 Nuxt 응용 프로그램의 로그를 처리하는 방법
19355 단어 vuenuxtlog4jsjavascript
이 문서에서는 다음을 확인할 수 있습니다.
0. 소개
거의 모든 항목에서 로그를 더욱 조리 있게 하는 시간이 있을 것이다.이것은 몇 가지 원인이 있을 수 있다.예를 들어 모든 환경에서 온 로그를 집중적으로 포함하거나, 특히 용기화 시대에 로그에 대한 접근을 가속화하는 곳이 있다.어쨌든, 로그는 항상 중요하며, 개발 모델뿐만 아니라 관련 부분에 정보를 제공한다.브라우저 컨트롤러에서 인쇄된 수천 개의 로그를 없애는 것이 가장 좋다!
나를 믿어라, 일지를 보관하면 좋은 점이 많다
0.1. 내 방법
응용 프로그램을nuxt에 구축하면 유용한 가능성을 가져올 수 있습니다.우선, 그것은 자신의 서버가 있고, 그 다음으로, 아주 좋은 플러그인 시스템을 개발했다. (nuxt는 더 멋진 것을 사용할 수 있다.)이 때문에 우리는 이러한 기능을 이용하여 로그 기능을 쉽게 실현할 수 있다.
nuxt。js app-플러그인 시스템
official documentation의 공식 문서에 따라 플러그인은 응용 프로그램의 행동을 변경하거나 도구를 추가하거나 기존 도구를 강화할 수 있습니다.만약 정말 그렇게 멋있다면, 나는 그것을 쓰기로 결정했다
둘 다 주요 목표를 실현하기 위해 간단한 로그 기록 시스템을 제공한다.
UDP를 선택해야 하는 이유
대부분의 응용 프로그램에서 UDP는 훨씬 빠를 수 있습니다. 속도가 정말 중요합니다.또 다른 장점은 로그 서버가 닫혔을 때 - 오류가 발생하지 않는다는 것입니다. UDP 때문에 사용자는 그것을 느끼지 못합니다...뭐 공부 해요?😄. 일단 중요한/민감한 데이터를 처리할 필요가 없다면, 속도를 높이기 위해 패키지에 대한 제어를 잃는 것이 좋은 이유일 수도 있다.네, 이것은 논란이 있는 문제입니다. 하지만 한번 해 봅시다.
흐르다
왜 그래요?
0.2. 왜 log4js를 선택했는지
이것은 많은 선택적 프로토콜이나 플랫폼을 가진 NodeJ를 위한 로그 유틸리티입니다.
문서에 따라 많은 "appender"가 포함되어 있습니다. ("drivers"라고 할 수 있습니다.)
이것이 바로 왜log4js가 이렇게 강한가 하는 것이다.만약 당신이 신뢰하는 가장 좋아하는 로그 서버나 프로토콜이 있다면, 위의 목록에서 로그 서버나 시스템을 직접 사용하거나, 응용 프로그램의 라이브러리를 변경할 필요가 없습니다.
대부분의 사용 가능한 기준 테스트나 로그 라이브러리 비교에서 log4js는 TCP와 UDP를 처리하는 가장 빠른 도구 중 하나임을 알 수 있습니다.
우리 본론을 이야기하기 시작합시다
1.0. 설치
테스트 환경 설정
1.1. 큰뿔 사슴 더미
로컬에서 작업: 만약 모든 것이 정상이라면, 우리는 Elasticsearch, Logstash, Kibana를 테스트해야 합니다.
만약 당신이 시간이 많지 않거나 발명 발명을 좋아하지 않는다면, 예를 들어 this one
당신의 시스템에 도커와 도커의 조합이 있다는 것을 잊지 마세요. 당신은 이미 준비가 되었습니다!
어느 곳에서 ELK 스택을 호스팅한 경우 - 건너뛰고 포트 5000에 UDP 입력만 추가하면 됩니다(아래 참조).
// logstash.conf
input {
udp {
port => 5000
}
}
1.2. shopware pwa 설치
시작하기 전에log4js로 증강하려는nuxt 응용 프로그램에 대해 알아보겠습니다. shopware-pwa repository나는 이것이 식은 죽 먹기라고 말하고 싶다.전체 과정을 가속화하기 위해서, 우리는 npm에서 직접 얻은 shopware pwacli를 사용할 수 있다
mkdir my-shopware-pwa
cd ./my-shopware-pwa
npx @shopware-pwa/cli init
나중에 명령
yarn dev을 사용하여 프로젝트를 실행할 수 있습니다.1.3. 필요한 라이브러리
이제 필요한 라이브러리를 추가합시다
yarn add log4js @log4js-node/logstashudp
2.0. 코드 한 토막
마지막으로 우리는 코드를 작성할 수 있다.나는 이것이 매우 지루하다는 것을 알고 있지만, 나는 너의 입문 수준이 얼마나 되는지 추측할 수 없다.
2.1. nuxt 플러그인
이 플러그인은 로그 게이트웨이(다음 단계의 노드)에 적절한 수준으로 메시지를 전달하는 작업만 있습니다.
import axios from 'axios'
export default (context, inject) => {
const logGatewayCall = (level, message) => {
try {
// for demo only - use base URLs from env instead;
axios.post(
process.client
? `http://localhost:3000/log`
: 'http://127.0.0.1:3000/log',
{ message, level }
)
} catch (error) {
// do nothing since your logger had to be the only one :)
}
}
// entrypoint for logging - for both SSR and CSR
const logger = {
warn: message => logGatewayCall('warn', message),
info: message => logGatewayCall('info', message),
error: message => logGatewayCall('error', message)
}
// what about capturing the console.error calls and use the custom logger globally?
const error = (...message) => logger.error(JSON.stringify(message))
// in prod mode - capture the errors as well
if (!context.isDev) console.error = error
// Inject $hello(msg) in Vue, context and store.
inject('log', logger)
// For Nuxt <= 2.12, also add 👇
context.$log = logger
}
공식 문서에 따라 플러그인을
./plugins/logger.js 파일에 넣습니다.작업을 수행하려면 다음 항목을 사용하여 파일을 채웁니다
nuxt.config.js.plugins: ['~/plugins/logger.js']
2.2. /로그 끝점
이것은 로그 메시지를 전송하는 처리 프로그램으로nuxt가 외부 시스템과 만나고 통신하는 곳입니다.이것은 논리를 배치하는 가장 좋은 위치가 아니지만, 예시 응용 프로그램을 간소화하기 위해서 나는 해냈다.기록기를 단독 서비스에 두는 것은 매우 큰 장점이 있다. vue/nuxt 상하문에서 감지하는 곳이 아니라 어디에서나 사용할 수 있다.
import { configure, getLogger } from 'log4js'
export default function(req, res) {
// configure the logger, set the driver to previously installed "@log4js-node/logstashudp"
configure({
appenders: {
logstash: {
type: '@log4js-node/logstashudp', // UDP "driver"
host: 'localhost', // for demo only; use value from env instead
port: 5000 // for demo only; use value from env instead
}
},
categories: {
default: { appenders: ['logstash'], level: 'info' }
}
})
const logger = getLogger() // get the logger instance
req.on('data', data => {
// parse the request payload from the nuxt plugin and push it forward to the log4js configured appender
const { level, message } = JSON.parse(data)
switch (level) {
case 'warn':
return logger.warn(message)
case 'info':
return logger.info(message)
case 'error':
return logger.error(message)
}
})
res.end()
}
서버 중간부품nuxt의 특성을 사용하여 우리는 API
/log 단점으로 응용 프로그램을 확장하여 플러그인에서 전송된 로그를 처리할 준비를 하고 있습니다.솔루션에 대한 추가 정보here기능을 발휘하려면 다음을 사용하여 파일
nuxt.config.js을 풍부하게 만듭니다.serverMiddleware: [
/*
** Custom route is a gateway for upcoming logs!
*/
{ path: '/log', handler: '~/api/log.js' }
],
3.0. 실행 중
3.1. 플러그인 사용
이 플러그인은 로그를 위한 새로운 기능을 등록했기 때문에 전 세계에서 사용할 수 있으며, shopware pwa나nuxt 응용 프로그램의 많은 곳에서 접근할 수 있습니다.다음은 vue 구성 요소의 일부입니다.
asyncData({ $log }) {
$log.info('component generated')
},
mounted() {
this.$log.warn('component has been mounted')
},
// or even inside the setup()
setup({}, { root }) {
console.warn(root.$log.error('warning from the setup()'));
},
3.2. 로그 왜?
백그라운드에서 적절한 요청을 보냈습니다.log4js 라이브러리는 포트 5000의 UDP를 통해 로그 메시지를 Logstash 서버에 채웁니다.
3.3. 키바나에서 결과 보기
이것은 logstash ES 인덱스의 기본 대시보드입니다.
4.0. 뭐 공부 해요?
조심하다💪
리소스:
Reference
이 문제에 관하여(로그4js를 사용하여 Nuxt 응용 프로그램의 로그를 처리하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mkucmus/how-i-dealt-with-logger-in-my-favorite-nuxt-app-and-log4js-3838텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
