Información general

Con la integración de Datadog RUM React, resuelve rápidamente los problemas de rendimiento de los componentes de React mediante:

• Depuración de la causa raíz de los cuellos de botella en el rendimiento, como un tiempo de respuesta lento del servidor, un recurso que bloquea la representación o un error en un componente.
• Correlación automática de los datos de rendimiento web con los recorridos de los usuarios, las llamadas HTTP y los logs
• Alerta a tus equipos de ingeniería cuando las métricas cruciales del rendimiento de la web (como Core Web Vitals) caigan por debajo de un umbral que provoque una mala experiencia del usuario

Monitoriza tus aplicaciones de React de principio a fin mediante:

• Rastreo y visualización de los recorridos de los usuarios en todo el stack tecnológico
• Depuración de la causa raíz de los tiempos de carga lentos, que puede ser un problema con tu código de React, el rendimiento de red o la infraestructura subyacente
• Análisis y contextualización de cada sesión de usuario con atributos como ID de usuario, dirección de correo electrónico, nombre, etc.
• Unificación de la monitorización de stack completo en una plataforma para equipos de desarrollo frontend y backend

Configuración

Empieza por configurar Datadog RUM en tu aplicación de React. Si estás creando una nueva aplicación de RUM en la aplicación de Datadog, selecciona React como tipo de aplicación. Si ya tienes una aplicación de RUM, puedes actualizar su tipo a React. Una vez configurada, la aplicación de Datadog proporcionará instrucciones para integrar el complemento de RUM-React con el SDK del navegador.

Error Tracking

Para rastrear errores de representación de componentes de React, utiliza uno de los siguientes métodos:

• Un componente de ErrorBoundary (consulta la documentación de React) que detecta errores y los informa a Datadog.
• Una función que puedes utilizar para informar de errores desde tu propio componente ErrorBoundary.

ErrorBoundary uso

import { ErrorBoundary } from '@datadog/browser-rum-react'

function App() {
  return (
    <ErrorBoundary fallback={ErrorFallback}>
      <MyComponent />
    </ErrorBoundary>
  )
}

function ErrorFallback({ resetError, error }) {
  return (
    <p>
      Oops, something went wrong! <strong>{String(error)}</strong> <button onClick={resetError}>Retry</button>
    </p>
  )
}

Informar de los errores de React desde tu propio ErrorBoundary

import { addReactError } from '@datadog/browser-rum-react'

class MyErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    addReactError(error, errorInfo)
  }

  render() {
    ...
  }
}

Integración del enrutador React

react-router v6 permite declarar rutas utilizando los siguientes métodos:

• Crea enrutadores con las funciones createMemoryRouter, createHashRouter o createBrowserRouter.
• Utiliza el enlace useRoutes.
• Utiliza el componente Routes.

Para rastrear los cambios de ruta con el SDK del navegador de Datadog RUM, primero inicializa el reactPlugin con la opción router: true y, a continuación, sustituye esas funciones por sus equivalentes de @datadog/browser-rum-react/react-router-v6. Ejemplo:

import { RouterProvider } from 'react-router-dom'
import { datadogRum } from '@datadog/browser-rum'
import { reactPlugin } from '@datadog/browser-rum-react'
// Use "createBrowserRouter" from @datadog/browser-rum-react/react-router-v6 instead of react-router-dom:
import { createBrowserRouter } from '@datadog/browser-rum-react/react-router-v6'

datadogRum.init({
  ...
  plugins: [reactPlugin({ router: true })],
})

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    ...
  },
])

ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router} />)

Ve más lejos con la integración de Datadog React

Trazas

Conecta tu RUM y datos de trazas (traces) para obtener una visión completa del rendimiento de tu aplicación. Consulta Conectar RUM y trazas (traces).

Logs

Para empezar a reenviar los logs de tu aplicación de React a Datadog, consulta JavaScript Logs Collection.

Métricas

Para generar métricas personalizadas desde tu aplicación de RUM, consulta Generar métricas.

Solucionar problemas

¿Necesitas ayuda? Ponte en contacto con Datadog Support.

Referencias adicionales

Documentación útil adicional, enlaces y artículos:

• React Monitoring