코딩/Flex프로젝트

재테크 블로그 프로젝트 (6) - Next.js와 Datadog 연결

최만규 2024. 11. 21. 17:19
728x90

개요

SW아카데미 수업 중 모니터링에 관한 수업을 들었다. 교수님께서 진행중인 서비스에도 모니터링 시스템을 도입하면 좋을 것 같았다.

수업에서 들은 모니터링, 옵저빙 툴은 여러 종류가 있었지만, Datadog의 경우 많이 들어보기도 했고, 팀원의 강추가 있었다.

또한, Next와의 연결 문서도 나름 잘 정리되어있는 Datadog을 선택했다. (비용이 세다는 말이 많아 좀 걸리긴 했다..)

 

Datadog?

클라우드 기반 애플리케이션과 인프라를 모니터링하고 분석하는 종합적인 모니터링 및 데이터 분석 플랫폼으로

 

주요 기능은 다음과 같다.

1. 모니터링 및 관찰성 : 애플리케이션, 서버, 컨테이너, 데이터베이스, 네트워크 등 모든 인프라와 애플리케이션 계층에서 데이터를 수집하고 시각화

2. 로그 관리 : 중앙 집중화된 로그 수집 및 검색 기능 제공

3. APM(Application Performance Monitoring): 애플리케이션의 성능을 추적하고 병목 현상을 분석

4. 대시보드 및 알림 : 사용자 정의 대시보드로 데이터 시각화 + 특정 조건 충족 시 알림을 전송해 즉각 대응 가능

5. RUM(Real User Monitoring) :  실제 사용자 경험을 실시간으로 모니터링하고 분석

 

이중 나는 APM, RUM을 중점적으로 사용해보려고 한다.

개발을 진행하면서 APM을 통해 애플리케이션의 성능을 지속적으로 모니터링하면서 문제 및 오류를 분석하고,

RUM을 통해 향후 서비스 사용자의 행동을 추적하고 대시보드를 통해 성능(페이지 로딩, UI응답, 오류 발생률)을 확인하는 것이 목표이다.

 

Datadog 연동 

 기본설정

1. github student developer pack 등록

  • Datadog은 기본적으로 2주 무료기회를 제공하나 학생의 경우 무료계정을 이용 할 수 있다.
  • 학생인증은 깃허브에서 하면되고 dataDog을 제외한 다른 혜택들도 많이 제공한다.
  • 학교 정보 및 인적사항을 입력 후 신청을 누른다.

  • 근데 이거 인증되는데 최대 10일이 걸린다. 기다려야한다..

 

2. 14일 계정으로 일단 생성해서 연결을 해보자 지역은 Japan으로 이후 인적사항 기입 후 가입

 

3. 다음은 사용하는 기술을 선택하는 건줄 알았지만 설문조사다. 가볍게 선택 후 넘어가자

 

4. Datadog Agent 설치

- Datadog Agent는 서버, 컨테이너, 애플리케이션 등 다양한 환경에서 데이터를 수집 및 Datadog로 전송해 모니터링하려는 시스템 간의 브리지 역할을 하는 프로그램이다

- 이건 APM이나 백엔드 통합 분석을 사용하려는 경우 필요하다고 하다. 난 APM을 사용하니까 설치해보자.

  • 적혀진 명령어 대로 설치를 진행한다.
    • 주의할 점은 첫 bash문의 비밀번호의 경우 Datadog의 계정 비밀번호가 아닌 시스템 비밀번호를 의미한다.

 

정상적으로 설치가 되었다면 상단 바 위에 뼈다귀 모양이 보인다. start 혹은 Open Web UI를 통해 들어간다.

  • web UI에선 내가 설치한 Datadog Agent의 버전 및 정보조회가 가능하다.

 

 APM 연결 

APM : 서버 사이드 애플리케이션의 성능을 모니터링하고 최적화 (요청 처리시간, 에러 발생지점 추적)

 

1. dd-trace설치 : 분산 트레이싱 라이브러리로 애플리케이션 요청을 추적 및 분석이 가능함.

npm install dd-trace

 

2. instrumentation.ts를 /app위치에 생성 (src경로를 사용하는 경우 src/위치에 생성)

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { tracer } = await import('dd-trace');

    tracer.init({
      logInjection: true,
      env: 'dev',
      service: 'nextjs-with-datadog',
    });

    tracer.use('next');
  }
}

 

3. next.config.mjs에 다음코드 추가 후 로컬에서 실행

experimental: {
    instrumentationHook: true,
    serverComponentsExternalPackages: ["dd-trace"],
  },

 

4. datadog으로 돌아가 infrastructure에서 실행된 것을 조회

활성화 된 것을 볼 수 있다.

클릭해서 APM의 상세 정보화면으로 들어가면 다음과 같이 활성화된 APM 서비스 목록을 볼 수 있다.

  • 서비스이름은 내가 지정해준 서비스 이름으로 지정된다.

  • Deployments, Error Tracking, SLOs, INCIDENTS같은 항목들을 조회 가능하다.
  • 배포의 과정에서 문제, 안정성 검사, 오류 추적, 시스템 가용성(서비스 품질), 서비스 중단, 성능 저하를 관리 가능하다.

 

 RUM 연결 

RUM :  사용자 측면에서 웹 애플리케이션의 성능을 모니터링하고 분석 (웹 페이지 로딩 속도, 상호작용, 오류 추적)

 

1. Digital Experience - Real User Monitoring으로 이동 후 + New Application 선택

 

2. application 이름 지정, type지정 후, Create Application을 선택

  • 나의 경우 Type은 JS를 지정하고 하단 옵션의 경우 모두 동의 했다.
  • 생각보다 앱에 대한 지원을 많이하는 것을 볼 수 있다.

 

3. Instrument Your application 기입

  • dd.env를 dev를 지정 (향후 프로덕션도 모니터링과의 분류, 개발환경에서 발생하는 트래픽과 혼동이 없도록)

 

4. 프로젝트로 돌아가 datadogRum 설치

npm install @datadog/browser-rum

 

5. 위에서 주어진 코드로 컴포넌트 생성 (클라이언트 컴포넌트 : 초기화 코드는 브라우저에서 실행)

  • applicationId와 클라이언트 토큰의 경우 환경변수로 선언해 넣어주었다
//Rum.tsx

import { datadogRum } from '@datadog/browser-rum';
import { PropsWithChildren } from 'react';

datadogRum.init({
  applicationId: process.env.NEXT_PUBLIC_APPLICATION_ID || '',
  clientToken: process.env.NEXT_PUBLIC_CLIENT_TOKEN || '',
  site: 'ap1.datadoghq.com',
  service: 'nextjs-with-datalog',
  env: 'dev',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 20,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'mask-user-input',
});

const Rum = ({ children }: PropsWithChildren) => {
  return <div>{children}</div>;
};

export default Rum;

 

6. layout.tsx에서 Rum.tsx 컴포넌트 삽입 후 실행하기

  • 공식문서에선 layout에서 위의 Rum.tsxfmf를 바로 선언해 랩핑해서 사용하는데 나는 잘 안되서 컴포넌트를 따로 빼 Provider로 감싸는 것처럼 작성했다.

useProvider의 경우 내가 사용중인 ZUSTAND관련 코드

 

7. 이후 프로젝트 다시 실행 + 오류발생 

  • 프로젝트를 진행했지만 계속 Waiting for data.. 만 뜨고 화면이 변하질 않았다.
  • 빌드 후 실행도 해보고 브라우저 강력 새로고침, 캐시삭제, 환경변수 NEXT_PUBLIC...으로 변경
  • 해결
    • 포기하고 다음날 일어나서 다시 키니까 정상적으로 동작되고 있었다.... ?
    • Stack Overflow랑 issue찾아보니까 오래걸리는 사람도 많다해서 아마 내가 로딩이 될 때쯤에 바꾸고 실행하고 해서 그런게 아닐까 싶다.. 다른 분들은 프로젝트 다시 실행 후 최소 10분은 대기해보는걸 추천

 

8. 결과화면 : RUM이 성공적으로 연결되어 여러가지 정보를 볼 수 있었다.

 

RUM 조회 항목

  1. Largest Contentful Paint (LCP) P75 : 콘텐츠를 화면에 렌더링하는데 걸리는 시간(75번째 백분위수 값) 195.41ms: 매우 빠른 로딩 속도를 나타냄.
  2. Cumulative Layout Shift (CLS) P75 : 페이지 로딩 중 요소의 예기치 않은 레이아웃 변경 정도를 측정하는 값. 0: 레이아웃 변경이 없음을 의미(이상적 상태).
  3. Interaction to Next Paint (INP) P75 : 사용자 인터랙션(클릭 등) 후 다음 화면이 렌더링되기까지 걸리는 시간.40.25ms: 반응 속도가 매우 빠른 상태.
  4. Errors :  에러와 관련된 여러 데이터 및 지표로 총 에러 수, 에러 비율이 발생하는 url
  5. Deployments : 코드 배포 이벤트 수와 문제 식별
  6. User Analytics : 사용자의 탐색과 관련된 데이터 (페이지 방문 수, 이탈 지점, 전환율 등)

 

결론

생각보다 연결도 쉬운데다가 개발중에도 에러 추적이나, 데이터 송수신에 대한 모니터링이 가능하니 편할 것 같다.

추가로, 유저가 주기적으로 들어오는 서비스라면 정말 유용하게 사용할 수 있지 않을까 싶다. 기회가 되면 백엔드도 연결을 해 서비스 전체의 모니터링이 가능하게 만들어 보고 싶다.

다만 무료가 2주라는 기간과 가격이 비싸다는 점이 걸리지만 학생 계정이 승인이 난다면 Datadog에 대해서 좀 더 자세히 알아보면서 다시 연결해보려 한다.

 

 

728x90
저작자표시 (새창열림)