Monitorizar tu aplicación Next.js con RUM

Información general

Next.js es un marco de JavaScript creado por Vercel que se utiliza para crear páginas web React.js y APIs Node.js. Puedes integrar Next.js con RUM para monitorizar tus aplicaciones frontend y backend para las métricas relacionadas con el navegador que te dan una visión del rendimiento y el comportamiento del usuario.

Configuración

Sigue los pasos que se indican a continuación para configurar la monitorización de navegador de Datadog RUM.

Crear una aplicación

  1. Ve a Digital Experience > Performance Summary. (Experiencia digital > Resumen de rendimiento).
  2. Haz clic en el botón New Application (Nueva aplicación).
  3. Asegúrate de que JS está seleccionado, introduce un nombre para tu aplicación y haz clic en Create New RUM Application (Crear nueva aplicación RUM). clientToken y applicationId se generan automáticamente para tu aplicación.
Cuando se utiliza `.env.local`, solo las variables prefijadas con `NEXT_PUBLIC_` se incluyen en el paquete del cliente. Consulta Agrupación de variables de entorno para el navegador en la documentación de Next.js.

Instrumentar la solicitud

  1. Elige tu tipo de instrumentación y, a continuación, copia y pega el fragmento de código de la interfaz de usuario de Datadog RUM en el archivo correspondiente en función del tipo de instrumentación.

      Si utilizas npm, deberás realizar unos pequeños cambios en el fragmento de código de la interfaz de usuario de Datadog RUM antes de pegarlo en el archivo raíz layout.tsx o en el archivo personalizado _app.tsx (Datadog admite ambos):

      • Si tu aplicación depende del nuevo enrutador de aplicación de Next.js (versiones 13+), Datadog recomienda usar la instrumentación de CDN RUM para asegurar que la inicialización de RUM ocurre en el cliente. Si deseas utilizar el paquete npm, el código de inicialización debe ejecutarse en un componente de cliente para que RUM pueda recopilar telemetría del cliente. Puedes lograr esto sin hacer que tu archivo layout.tsx sea en sí mismo un componente de cliente, siguiendo este ejemplo para crear un componente <DatadogInit /> vacío con el código de inicialización de RUM, y luego renderizando ese componente <DatadogInit /> en tu layout.tsx.
      • Si tu aplicación Next.js depende del enrutador de página de Next.js más antiguo, puedes pegar el fragmento de inicialización en el archivo personalizado _app.tsx sin la directiva "use client" y sin un componente <DatadogInit /> independiente.

      datadog-init.tsx

         // Obligatorio si se utiliza el Enrutador de aplicación para asegurar que este archivo se ejecuta en el cliente
   "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>",
      // Especifica un número de versión para identificar la versión desplegada de tu aplicación en Datadog
      // version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 20,
      trackUserInteractions: true,
      trackResources: true,
      trackLongTasks: true,
      defaultPrivacyLevel: "mask-user-input",
      // Especificar URLs para propagar encabezados de traza para la conexión entre RUM y la traza de backend
      allowedTracingUrls: [
        { match: "https://example.com/api/", propagatorTypes: ["tracecontext"] },
      ],
    });

    export default function DatadogInit() {
      // No renderizar nada; este componente solo se incluye para que el código init
      // anterior se ejecute en el lado del cliente
      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>
      );
    }

      Si utilizas CDN asíncrona, deberás realizar unos pequeños cambios en el fragmento de código de la interfaz de usuario de Datadog RUM antes de pegarlo en el archivo raíz layout.tsx o en el archivo personalizado _app.tsx (Datadog admite ambos):

      Nota: Los scripts de Next.js incluyen líneas de importación y exportación, e incluyen llaves y puntos suspensivos entre Script id, donde todas las instancias de Script están en mayúsculas.

      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>',
                 // Especifica un número de versión para identificar la versión desplegada de tu aplicación en Datadog
                 // version: '1.0.0',
                 sessionSampleRate: 100,
                 sessionReplaySampleRate: 100,
                 trackUserInteractions: true,
                 trackResources: true,
                 trackLongTasks: true,
               });
             })
           `}
         </Script>
         <body>{children}</body>
       </html>
     );
   }

      Si utilizas CDN síncrona, deberás realizar unos pequeños cambios en el fragmento de código de la interfaz de usuario de Datadog RUM antes de pegarlo en el archivo raíz layout.tsx o en el archivo personalizado _app.tsx (Datadog admite ambos):

      Nota: Los scripts de Next.js incluyen líneas de importación y exportación, e incluyen llaves y puntos suspensivos entre Script id, donde todas las instancias de Script están en mayúsculas.

      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>',
                 // Especifica un número de versión para identificar la versión desplegada de tu aplicación en Datadog
                 // version: '1.0.0',
                 sessionSampleRate: 100,
                 sessionReplaySampleRate: 100,
                 trackUserInteractions: true,
                 trackResources: true,
                 trackLongTasks: true,
               });
             `}
           </Script>
           {children}
         </body>
       </html>
     );
   }

    • Sigue los pasos dentro de la aplicación para verificar la instalación.

    • Despliega los cambios en tu aplicación. Una vez activado el despliegue, Datadog recopilará eventos de los navegadores de tus usuarios.

    • Puedes visualizar los datos recopilados en tu aplicación Next.js utilizando dashboards.

    Monitorización de backend

    Para iniciar la monitorización del backend de tus aplicaciones Next.js:

    1. Sigue los pasos de configuración del navegador para Conectar RUM y trazas.
    2. Sigue los pasos de configuración del navegador para soporte de OpenTelemetry para conectarse con APM.

    Referencias adicionales

    Additional helpful documentation, links, and articles:

    Más información sobre monitores RUMDOCUMENTACIÓN more more