프런트엔드 앱 로깅

로깅은 신뢰할 수 있는 소프트웨어를 구축하기 시작할 때 핵심 활동 중 하나입니다. 그러나 우리는 개발자가 미래를 위해 로깅 설정을 미루는 것을 보았습니다. 이는 주로 작동하는 간단하고 개발자 친화적인 로깅 플랫폼을 사용할 수 없기 때문일 수 있습니다.

이 게시물에서는 (HTTP를 통해) 오픈 소스, 개발자 친화적인 로그 저장소 및 쿼리 플랫폼인 Parseable에 로그를 보내도록 React 앱을 구성하는 방법을 살펴보겠습니다.

설정

Parseable은 FOSS이고 어디에서나 설정할 수 있지만 public demo instance을 사용하여 설정을 피하고 대신 반응 앱 측면에 집중합니다.

로깅 클라이언트로 Pino JS Logger을 사용하겠습니다.

반응 앱 만들기

이상적으로는 로깅을 추가하려는 사용 가능한 반응 앱이 있을 수 있습니다. 처음부터 시작하는 경우 앱에 로깅을 추가할 수 있도록 먼저 반응 애플리케이션을 만듭니다.

npx create-react-app my-project-demo

설정 피노

반응 앱에서 라이브러리로 사용할 수 있도록 Pino를 설치합니다.

npm install pino

성공적으로 설치되면 반응 앱 소스 내에 src/loggers라는 디렉토리를 만듭니다. 여기에서 Pino 라이브러리를 초기화하여 Parseable에 로그를 보냅니다.

파일src/loggers/index.js을 만들고 다음 코드를 붙여넣습니다.

import pino from "pino";

const send = async function (level, logEvent, a, b) {
  const url = "https://demo.parseable.io/api/v1/logstream/pinotest";

  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: "Basic cGFyc2VhYmxlOnBhcnNlYWJsZQ==",
      "Content-Type": "application/json",
    },
    body: JSON.stringify([logEvent]),
  });
  console.log(response);
};

const logger = pino({
  browser: {
    serialize: true,
    asObject: true,
    transmit: {
      send,
    },
  },
});

export default logger;

Parseable URLhttps://demo.parseable.io/api/v1/logstream/pinotest은 Demo Parseable 인스턴스의 스트림pinotest을 가리킵니다. Parseable UI를 시연하는 공개 인스턴스입니다. 민감한/프로덕션 로그를 URL에 게시하지 마십시오. 자체 Parseable 인스턴스를 시작하려면 Parseable Docs을 참조하십시오.

앱에 로깅 추가

이제 처음에 생성한 반응 앱에 로그를 추가할 수 있습니다.

import logger from "./loggers";
logger.info("test log! pinotest stream from reactjs application.");
function App() {
  return <div className="App">ReactJs logs to parseable</div>;
}
export default App;

그게 다야! React 앱과 parseable을 성공적으로 통합했습니다.

로거로 기록하는 모든 이벤트는 Parseable에 게시되며 이전에 생성한 로그 스트림에서 확인할 수 있습니다.

결론

이 게시물에서는 간단하고 개발자 친화적인 로그 스토리지 플랫폼인 Parseable에 로그를 전송하도록 반응 앱을 설정하고 구성하는 방법에 대해 배웠습니다. 단 몇 줄의 코드로 이 작업을 수행할 수 있었습니다.

이 설정을 사용하면 모든 로그가 원격 시스템에 안전하고 효율적으로 저장됩니다. 감사 및 디버깅 목적으로 몇 초 안에 로그를 사용할 수 있습니다.

연결:
[1] 구문 분석 가능 Github: https://github.com/parseablehq/parseable
[2] 구문 분석 가능한 문서: https://www.parseable.io/docs/introduction
[3] 피노 Github: https://github.com/pinojs/pino
[4] 피노 문서: https://getpino.io/