Descripción general

Error Tracking procesa los errores recopilados del navegador mediante el Browser SDK. Siempre que se recopila un error de source, custom, report o console que contiene una traza de pila, Error Tracking lo procesa y lo agrupa bajo un problema, o grupo de errores similares que se pueden encontrar en el Error Tracking Explorer.

Requisitos previos

Descargue la versión más reciente del Browser SDK.

Configuración

Para comenzar a enviar datos de Error Tracking desde su aplicación de navegador a Datadog, siga las instrucciones de configuración en la aplicación o siga los pasos a continuación.

Paso 1: cree la aplicación

1. En Datadog, navegue a la página Errors > Settings > Browser and Mobile > Add an Application y seleccione el tipo de aplicación JavaScript (JS).
2. Ingrese un nombre para su aplicación y luego haga clic en Create Application. Esto genera un clientToken y un applicationId para su aplicación.

Paso 2: elija el método de instalación correcto

Elija el tipo de instalación para el Browser SDK.

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;d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v7/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/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</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á inicializando el SDK en un proyecto de TypeScript, utilice el fragmento de código a continuación. Los tipos son compatibles con TypeScript >= 3.8.2.

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

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

Paso 3: Configure el entorno y la configuración

1. En el campo Entorno, defina el entorno (env) que utilizará su aplicación para el unified service tagging.
2. En el campo Servicio, defina el servicio (service) que utilizará su aplicación para el unified service tagging.
3. Establezca el nivel de privacidad para la entrada del usuario. Consulte Session Replay Browser Privacy Options para obtener más detalles.
4. Establezca un número de versión (version) para su aplicación implementada en el fragmento de inicialización. Para obtener más información, consulte Tagging.
5. Configure parámetros adicionales según sea necesario. Consulte la sección Referencia de configuración a continuación para ver todas las opciones disponibles.

Paso 4: Implemente su aplicación

Implemente los cambios en su aplicación. Una vez que su implementación esté activa, Datadog recopila eventos de los navegadores de sus usuarios.

Paso 5 - Cargue mapas del código fuente y símbolos de WebAssembly (opcional pero recomendado)

Cargue sus mapas del código fuente de JavaScript para acceder a trazas de pila sin minificar. Consulte la guía de carga de mapas del código fuente.

Si su aplicación de navegador utiliza WebAssembly, configure el Browser SDK WASM plugin y cargue los símbolos de depuración del módulo.

Paso 6: Visualice sus datos

Ahora que ha completado la configuración básica para el Error Tracking del navegador, su aplicación está recopilando errores del navegador y puede comenzar a monitorear y depurar problemas en tiempo real.

Visualice los datos recopilados en tableros o cree una consulta de búsqueda en el Error Tracking.

Hasta que Datadog comience a recibir datos, su aplicación aparecerá como pending en la página Applications.

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

Además de enviar mapas del código fuente, el Datadog CLI informa información de 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 usar esta información para correlacionar errores con su source code, lo que le permite pasar de cualquier marco de traza de pila a la línea de código relacionada en GitHub, GitLab y Bitbucket.

Para obtener más información, consulte la Datadog Source Code Integration.

Tagging for Error Tracking

Estas etiquetas (configuradas en el paso 3 anterior) potencian la funcionalidad de Error Tracking:

• Filtrado y desglose de problemas por service y env
• Correlación entre productos con RUM, Logs y APM para el mismo service/env
• Coincidencia de mapas del código fuente cargados a través del mismo service y version que configure durante la carga

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

• Si su aplicación de navegador se construyó como un monolito, su aplicación de Datadog tiene un nombre de servicio para la aplicación.
• Si su aplicación de navegador se construyó como repositorios separados para múltiples páginas, edite los nombres de servicio predeterminados a lo largo del ciclo de vida de su aplicación.

Obtenga más información sobre tagging en Datadog.

Referencia de configuración

Consulte la Browser SDK API Reference para obtener la lista completa de opciones de configuración disponibles.

Próximos pasos

Puede hacer un seguimiento de excepciones no controladas, rechazos de promesas no controlados, excepciones controladas, rechazos de promesas controlados y otros errores que el Browser SDK no rastrea automáticamente. Obtenga más información sobre Collecting Browser Errors.

Lecturas adicionales

Documentación, enlaces y artículos útiles adicionales:

Seguimiento de errores con RUM para aplicaciones web JavaScriptCENTRO DE APRENDIZAJE Código fuente de datadog-ciCÓDIGO FUENTE Cargue los mapas del código fuente de JavaScriptDOCUMENTACIÓN Cargue los símbolos de WebAssemblyDOCUMENTACIÓN Aprenda sobre Error Tracking ExplorerDOCUMENTACIÓN