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

문서 > RUM & 세션 재생 > 실제 사용자 모니터링 및 세션 재생 가이드 > RUM을 사용하여 Next.js 앱 모니터링

개요

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

설정

아래 단계에 따라 Datadog RUM 브라우저 모니터링을 설정합니다.

애플리케이션 생성

**Digital Experience > Performance Summary**로 이동합니다.
New Application 버튼을 클릭합니다.
JS를 선택했는지 확인하고 애플리케이션 이름을 입력한 다음 Create New RUM Application을 클릭합니다. 애플리케이션의 clientToken 및 applicationId이 자동 생성됩니다.

`.env.local`을 사용한다면 접두사가 `NEXT_PUBLIC_`으로 시작하는 변수만 클라이언트 번들에 포함됩니다. Next.js 문서에서 브라우저용 환경 변수 번들링을 참조하세요.

애플리케이션의 계측

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

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

애플리케이션이 신규 버전의 Next.js App Router(버전 13 이상)에 기반한 경우, Datadog은 CDN RUM 계측을 활용하여 클라이언트에서 RUM 초기화가 진행되도록 할 것을 권장합니다. NPM 패키지를 사용하려는 경우, 초기화 코드가 클라이언트 컴포넌트에서 실행되어야 RUM이 클라이언트에서 텔레메트리를 수집할 수 있습니다. 하단 예제에 따라 RUM 초기화 코드가 포함된 빈 <DatadogInit /> 컴포넌트를 생성한 후 layout.tsx에서 해당 <DatadogInit /> 컴포넌트를 렌더링하면, layout.tsx 파일 자체를 클라이언트 컴포넌트로 만들지 않고도 이를 수행할 수 있습니다.
Next.js 애플리케이션이 기존 버전의 Next.js Page Router에 기반한 경우, "use client" 지시문과 별도의 <DatadogInit /> 컴포넌트 없이도 사용자 정의 _app.tsx 파일에 초기화 스니펫을 붙여넣을 수 있습니다.

datadog-init.tsx

   // App Router를 사용하여 이 파일이 클라이언트에서 실행되도록 할 경우 필요합니다
   "use client";

    import { datadogRum } from "@datadog/browser-rum";

    datadogRum.init({
      applicationId: "<YOUR_APPLICATION_ID>",
      clientToken: "<CLIENT_TOKEN>",
      site: "datadoghq.com",
      service: "<SERVICE_NAME>",
      env: "<ENV_NAME>",
      // Datadog에서 배포 애플리케이션 버전을 파악할 수 있도록 버전 넘버를 지정합니다
      // version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 20,
      trackUserInteractions: true,
      trackResources: true,
      trackLongTasks: true,
      defaultPrivacyLevel: "mask-user-input",
      // RUM과 백엔드 트레이서 간 연결을 위해 트레이스 헤더를 전파할 URL을 지정합니다
      allowedTracingUrls: [
        { match: "https://example.com/api/", propagatorTypes: ["tracecontext"] },
      ],
    });

    export default function DatadogInit() {
      // 랜더링하지 않음 - 이 컴포넌트는 초기화 코드가 포함되도록 하기 위함입니다
      // 위는 클라이언트 측에서 실행됩니다
      return null;
    }
   

layout.tsx or _app.tsx

    import DatadogInit from "@/components/datadog-init";

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <html lang="en">
          <body>
            <DatadogInit />
            {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/v6/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에서 배포 애플리케이션 버전을 파악할 수 있도록 버전 넘버를 지정합니다
                 // 버전: '1.0.0',
                 sessionSampleRate: 100,
                 sessionReplaySampleRate: 100,
               });
             })
           `}
         </Script>
         <body>{children}</body>
       </html>
     );
   }

   

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

애플리케이션이 더 최신 버전의 Next.js App Router(버전 13 이상)에 의존하는 경우, 스니펫을 루트 layout.tsx 파일에 붙여넣습니다.
애플리케이션이 보다 기존 버전의 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/v6/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>',
                 //  Datadog에서 배포 애플리케이션 버전을 파악할 수 있도록 버전 숫자를 지정합니다
                 // 버전: '1.0.0',
                 sessionSampleRate: 100,
                 sessionReplaySampleRate: 100,
               });
             `}
           </Script>
           {children}
         </body>
       </html>
     );
   }

   