RUM을 사용하여 Next.js 앱 모니터링

개요

Next.js는 Vercel에서 만든 JavaScript 프레임워크로, React.js 웹 페이지와 Node.js API를 만드는 데 사용됩니다. Next.js를 RUM과 통합하여 프런트엔드 및 백엔드 애플리케이션에서 성능 및 사용자 행동에 대한 인사이트를 제공하는 브라우저 관련 메트릭을 모니터링할 수 있습니다.

설정

Datadog RUM 브라우저 모니터링을 설정하려면 다음 단계를 수행합니다.

애플리케이션 만들기

  1. UX Monitoring > Real User Monitoring으로 이동합니다.
  2. New Application 버튼을 클릭합니다.
  3. JS가 선택되어 있는지 확인한 다음, 애플리케이션의 이름을 입력하고 Create New RUM Application을 클릭합니다. clientToken 및 applicationId는 애플리케이션에 대해 자동으로 생성됩니다.
`.env.local`를 사용할 때는 클라이언트 번들에 `NEXT_PUBLIC_` 접두사가 붙은 변수만 포함됩니다. Next.js 문서의 브라우저를 위한 환경 변수 번들링을 참조하세요.

애플리케이션 계측

  1. 계측 유형을 선택한 다음 Datadog RUM UI에서 코드 스니펫을 복사하여 계측 유형에 따라 알맞은 파일에 붙여넣습니다.

      NPM을 사용하는 경우 루트 layout.tsx나 커스텀 _app.tsx 파일에 붙여넣기 전에 Datadog RUM UI에서 코드 스니펫을 약간 변경해야 합니다(Datadog은 둘 다 지원):

      • 애플리케이션이 새로운 Next.js [App Router] 1 (버전 13+)에 의존하는 경우, 스니펫을 루트 layout.tsx 파일에 붙여넣습니다. use client 지시어는 서버 측 렌더링을 방지하므로 CDN 버전을 사용하는 것을 권장합니다.
      • Next.js 애플리케이션이 이전 Next.js Page Router에 의존하는 경우 스니펫을 커스텀 _app.tsx 파일에 붙여넣습니다.

      참고: 텔레메트리 데이터를 수집하려면 RUM SDK를 클라이언트에서 실행해야 하므로 NPM 패키지를 통해 초기화되는 파일은 클라이언트 컴포넌트여야 합니다.

      layout.tsx or _app.tsx

          "use client";

    import Link from "next/link";
    import { datadogRum } from "@datadog/browser-rum";
    import { useEffect } from "react";

    datadogRum.init({
      applicationId: "<YOUR_APPLICATION_ID>",
      clientToken: "<CLIENT_TOKEN>",
      site: "datadoghq.com",
      service: "next-app-router-rum-npm",
      env: "<ENV_NAME>",
      // Datadog에서 배포된 애플리케이션 버전을 식별할 버전 번호 지정
      // version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 100,
      trackUserInteractions: true,
      trackResources: true,
      trackLongTasks: true,
    });

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      useEffect(() => {}, []);
      return (
        <html lang="en">
          <body>
            {children}
          </body>
        </html>
      );
    }

      CDN 비동기를 사용할 때는 루트 layout.tsx나 커스텀 _app.tsx 파일에 붙여넣기 전에 Datadog RUM UI에서 코드 스니펫을 약간 변경해야 합니다(Datadog은 둘 다 지원):

      • 애플리케이션이 새로운 Next.js App Router(버전 13+)에 의존하는 경우 스니펫을 루트 layout.tsx 파일에 붙여넣습니다.
      • Next.js 애플리케이션이 이전 Next.js Page Router에 의존하는 경우 스니펫을 커스텀 _app.tsx 파일에 붙여넣습니다.
      • Next.js 외부 스크립트는 이 페이지와 같이 로드해야 합니다.

      참고: Next.js 스크립트에는 가져오기 및 내보내기 행이 포함되어 있으며, Script id 사이에 중괄호와 백틱이 포함되어 있습니다. 여기서 Script의 모든 인스턴스는 대문자입니다.

      layout.tsx or _app.tsx

         import Script from "next/script";

   export default function RootLayout({
     children,
   }: {
     children: React.ReactNode;
   }) {
     return (
       <html lang="en">
         <Script id="datadog-rum">
           {`
             (function(h,o,u,n,d) {
               h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
               d=o.createElement(u);d.async=1;d.src=n
               n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
             })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v5/datadog-rum.js','DD_RUM')
             window.DD_RUM.onReady(function() {
               window.DD_RUM.init({
                 clientToken: '<CLIENT_TOKEN>',
                 applicationId: '<YOUR_APPLICATION_ID>',
                 site: 'datadoghq.com',
                 service: 'next-app-router-rum',
                 env: '<ENV_NAME>',
                 // Datadog에서 배포된 애플리케이션의 버전을 식별할 수 있는 버전 번호를 지정하세요.
                 sessionSampleRate: 100,
                 sessionReplaySampleRate: 100,
                 trackUserInteractions: true,
                 trackResources: true,
                 trackLongTasks: true,
               });
             })
           `}
         </Script>
         <body>{children}</body>
       </html>
     );
   }

      CDN 동기화를 사용할 때는 루트 layout.tsx나 커스텀 _app.tsx 파일에 붙여넣기 전에 Datadog RUM UI에서 코드 스니펫을 약간 변경해야 합니다(Datadog는 둘 다 지원):

      • 애플리케이션이 새로운 Next.js App Router(버전 13+)에 의존하는 경우 스니펫을 루트 layout.tsx 파일에 붙여넣습니다.
      • Next.js 애플리케이션이 이전 Next.js Page Router에 의존하는 경우 스니펫을 커스텀 _app.tsx 파일에 붙여넣습니다.
      • Next.js 외부 스크립트는 이 페이지와 같이 로드해야 합니다.

      참고: Next.js 스크립트에는 가져오기 및 내보내기 행이 포함되며, Script id 사이에 중괄호와 백틱이 포함되어 있습니다. 여기서 Script의 모든 인스턴스는 대문자입니다.

      layout.tsx or _app.tsx

         import Script from "next/script";

   export default function RootLayout({
     children,
   }: {
     children: React.ReactNode;
   }) {
     return (
       <html lang="en">
         <body>
           <Script
             id="dd-rum-sync"
             src="https://www.datadoghq-browser-agent.com/us1/v5/datadog-rum.js"
             type="text/javascript"
             strategy="beforeInteractive"
           />
           <Script id="datadog-rum">
             {`
               window.DD_RUM && window.DD_RUM.init({
                 clientToken: '<CLIENT_TOKEN>',
                 applicationId: '<YOUR_APPLICATION_ID>',
                 site: 'datadoghq.com',
                 service: 'rum-cdn-async',
                 env: '<ENV_NAME>',
                 // 데이터독에서 배포된 애플리케이션의 버전을 식별할 수 있는 버전 번호를 지정하세요.
                 // 버전: '1.0.0',
                 sessionSampleRate: 100,
                 sessionReplaySampleRate: 100,
                 trackUserInteractions: true,
                 trackResources: true,
                 trackLongTasks: true,
               });
             `}
           </Script>
           {children}
         </body>
       </html>
     );
   }

    • 인앱 단계에 따라 설치를 확인합니다.

    • 애플리케이션에 변경사항을 배포합니다. 배포가 실시간으로 완료되면 Datadog은 사용자 브라우저에서 이벤트를 수집합니다.

    • Next.js 애플리케이션에서 대시보드를 사용하여 수집된 데이터를 시각화할 수 있습니다.

    백엔드 모니터링

    Next.js 애플리케이션의 백엔드 모니터링을 시작하려면:

    1. RUM과 트레이스의 연결에 대한 브라우저 설정 단계를 따릅니다.
    2. OpenTelemetry 지원의 브라우저 설정 단계에 따라 애플리케이션 성능 모니터링(APM)에 연결합니다.

    참고 자료

    추가 유용한 문서, 링크 및 기사:

    RUM 모니터에 대해 알아보기설명서 more more