Información general

Error Tracking procesa los errores recopilados del navegador por el SDK del navegador. Cada vez que se recopila un error de origen, personalizado, de informe o de consola que contiene una traza de stack tecnológico, Error Tracking lo procesa y agrupa como un problema o grupo de errores similares que se encuentran en el Error Tracking Explorer.

Requisitos previos

Descarga la última versión del SDK del navegador.

Configuración

Para empezar a enviar datos de Error Tracking desde tu aplicación de navegador a Datadog, sigue las instrucciones de configuración de la aplicación o sigue los pasos que se indican a continuación.

Paso 1 - Crear la aplicación

1. En Datadog, ve a la página Errors > Settings > Browser and Mobile > Add an Application (Errores > Configuración > Navegador y móvil > Añadir una aplicación) y selecciona el tipo de aplicación JavaScript (JS).
2. Introduce un nombre para tu aplicación y haga clic en Create Application (Crear aplicación). Se genera un clientToken y un applicationId para tu aplicación.

Paso 2 - Elegir el método de instalación adecuado

Elige el tipo de instalación para el SDK del navegador.

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

datadogRum.init({

   applicationId: '<APP_ID>',
   clientToken: '<CLIENT_TOKEN>',
   service: '<SERVICE>',
   env: '<ENV_NAME>',
   // site: '<SITE>',
   // version: '1.0.0',
   trackUserInteractions: true,
   trackResources: true
});

<script>
  (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: '<APP_ID>',
      // site: '<SITE>',
      service: '<APP_ID>',
      env: '<ENV_NAME>',
      // version: '1.0.0'
    });
  })
</script>

<script
    src="https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js"
    type="text/javascript">
</script>
<script>
    window.DD_RUM && window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // site: '<SITE>',
      service: '<APP_ID>',
      env: '<ENV_NAME>',
      // version: '1.0.0'
    });
</script>

TypeScript (opcional)

Si estás inicializando el SDK en un proyecto TypeScript, utiliza el siguiente fragmento de código. Los tipos son compatibles con versiones >= 3.8.2 de TypeScript.

import '@datadog/browser-rum/bundle/datadog-rum'

window.DD_RUM.init({
  applicationId: 'XXX',
  clientToken: 'XXX',
  site: 'datadoghq.com',
  trackUserInteractions: true,
  trackResources: true,
  ...
})

Paso 3 - Configurar el entorno y los parámetros

1. En el campo Environment (Entorno), define el entorno (env) para que tu aplicación utilice el etiquetado unificado de servicios.
2. En el campo Service (Servicio), define el servicio (service) para que tu aplicación utilice el etiquetado unificado de servicios.
3. Define el nivel de privacidad para el ingreso de usuario. Para obtener más información, consulta Opciones de privacidad del navegador de Session Replay.
4. Define un número de versión (version) para tu aplicación desplegada en el fragmento de inicialización. Para obtener más información, consulta Etiquetado.
5. Configura parámetros adicionales según sea necesario. Consulta la sección Referencia de configuración a continuación para conocer todas las opciones disponibles.

Paso 4 - Desplegar la aplicación

Despliega los cambios en tu aplicación. Una vez desplegada la aplicación, Datadog recopila eventos de los navegadores de usuarios.

Paso 5 - Cargar mapas de fuentes (opcional pero recomendado)

Carga tus mapas de fuentes JavaScript para acceder a trazas de stack tecnológico sin minificar. Consulta la guía para la carga de mapas de fuentes.

Paso 6 - Visualizar tus datos

Ahora que has completado la configuración básica de Error Tracking para el navegador, tu aplicación recopila errores del navegador, y puedes empezar a monitorizar y depurar problemas en tiempo real.

Visualiza los datos recopilados en dashboards o crea una consulta de búsqueda en Error Tracking.

Hasta que Datadog empiece a recibir datos, tu aplicación aparecerá como pending en la página Aplicaciones.

Paso 7 - Vincular los errores con tu código fuente (opcional)

Además de enviar mapas de fuentes, la Datadog CLI reporta información Git como el hash de confirmación, la URL del repositorio y una lista de rutas de archivos rastreados en el repositorio de código.

Error Tracking puede utilizar esta información para correlacionar errores con tu código fuente, lo que te permite pasar desde cualquier marco de traza de stack tecnológico a la línea de código relacionada en GitHub, GitLab y Bitbucket.

Para obtener más información, consulta la página integración del código fuente de Datadog.

Etiquetado para Error Tracking

Estas etiquetas (configuradas en el paso 3 más arriba) alimentan la funcionalidad Error Tracking:

• Problemas de filtrado y facetado en service y env
• Correlación cruzada con RUM, logs y APM para el mismo service/env
• Correspondencia de los mapas de fuentes cargados a través del mismo service y la misma version configurados durante la carga

Un servicio es un repositorio de código independiente y desplegable que se asigna a un conjunto de páginas:

• Si tu aplicación de navegador se ha creado como un monolito, tu aplicación Datadog tendrá un nombre de servicio para la aplicación.
• Si tu aplicación de navegador se construyó como repositorios separados para varias páginas, edita los nombres de servicio por defecto en todo el ciclo de vida de tu aplicación.

Más información sobre etiquetado en Datadog.

Referencia de configuración

Consulta la referencia de la API del SDK del navegador para ver la lista completa de opciones de configuración disponibles.

Funciones avanzadas (opcionales)

Gestionar los mapas de fuentes cargados

Consulta todos los símbolos cargados y gestiona tus mapas de fuentes en la página Símbolos de depuración.

Nota: El tamaño de los mapas de fuentes está limitado a 500 MB cada uno.

Siguientes pasos

Puedes monitorizar excepciones no gestionadas, rechazos de promesas no gestionadas, excepciones gestionadas, rechazos de promesas gestionadas y otros errores que el SDK del navegador no rastrea automáticamente. Más información sobre Recopilación de errores del navegador.

Referencias adicionales

Más enlaces, artículos y documentación útiles:

Código fuente de datadog-ciCÓDIGO FUENTE Cargar mapas fuente de JavaScriptDOCUMENTACIÓN Más información sobre el Explorador de seguimiento de erroresDOCUMENTACIÓN