Présentation

Error Tracking traite les erreurs collectées depuis le navigateur par le Browser SDK. Chaque fois qu’une erreur source, custom, report ou console contenant une trace de pile est collectée, Error Tracking la traite et la regroupe sous un problème, ou groupe d’erreurs similaires à retrouver dans l’Error Tracking Explorer.

Prérequis

Téléchargez la dernière version du Browser SDK.

Configuration

Pour commencer à envoyer des données d’Error Tracking depuis votre application de navigateur vers Datadog, suivez les instructions de configuration dans l’application ou suivez les étapes ci-dessous.

Étape 1 - Créer l’application

1. Dans Datadog, accédez à la page Errors > Settings > Browser and Mobile > Add an Application et sélectionnez le type d’application JavaScript (JS).
2. Saisissez un nom pour votre application, puis cliquez sur Create Application. Cela génère une clientToken et une applicationId pour votre application.

Étape 2 - Choisir la méthode d’installation appropriée

Choisissez le type d’installation pour le 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 (facultatif)

Si vous initialisez le SDK dans un projet TypeScript, utilisez l’extrait de code ci-dessous. Les types sont compatibles avec 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,
  ...
})

Étape 3 - Configurer l’environnement et les paramètres

1. Dans le champ Environnement, définissez l’environnement (env) pour que votre application utilise le unified service tagging.
2. Dans le champ Service, définissez le service (service) pour que votre application utilise le unified service tagging.
3. Définissez le niveau de confidentialité pour les saisies utilisateur. Consultez Options de confidentialité du navigateur pour Session Replay pour plus de détails.
4. Définissez un numéro de version (version) pour votre application déployée dans l’extrait d’initialisation. Pour plus d’informations, consultez Tagging.
5. Configurez des paramètres supplémentaires si nécessaire. Consultez la section Référence de configuration ci-dessous pour toutes les options disponibles.

Étape 4 - Déployez votre application

Déployez les modifications sur votre application. Une fois votre déploiement en ligne, Datadog collecte les événements depuis les navigateurs de vos utilisateurs.

Étape 5 - Téléchargez les maps source et les symboles WebAssembly (facultatif mais recommandé)

Téléchargez vos maps source JavaScript pour accéder aux stack traces non minifiées. Consultez le guide de téléchargement des maps source.

Si votre application de navigateur utilise WebAssembly, configurez le Browser SDK WASM plugin et téléchargez les symboles de débogage du module.

Étape 6 - Visualisez vos données

Maintenant que vous avez terminé la configuration de base du Browser Error Tracking, votre application collecte les erreurs de navigateur et vous pouvez commencer à surveiller et à déboguer les problèmes en temps réel.

Visualisez les données collectées dans des dashboards ou créez une requête de recherche dans Error Tracking.

Tant que Datadog ne reçoit pas de données, votre application apparaît comme pending sur la page Applications.

Étape 7 - Liez les erreurs à votre code source (facultatif)

En plus d’envoyer des maps source, le Datadog CLI rapporte des informations Git telles que le hash du commit, l’URL du dépôt et une liste des chemins de fichiers suivis dans le dépôt de code.

Error Tracking peut utiliser ces informations pour corréler les erreurs avec votre code source, vous permettant de passer de n’importe quelle trame de trace de pile à la ligne de code associée dans GitHub, GitLab et Bitbucket.

Pour plus d’informations, consultez l’intégration du code source Datadog.

Tagging for Error Tracking

Ces tags (configurés à l’étape 3 ci-dessus) alimentent la fonctionnalité d’Error Tracking :

• Filtrage et facettage des problèmes par service et env
• Corrélation inter-produits avec RUM, Logs et APM pour le même service/env
• Correspondance des maps source téléchargées via les mêmes service et version que vous configurez lors du téléchargement

Un service est un dépôt de code indépendant et déployable qui correspond à un ensemble de pages :

• Si votre application de navigateur a été construite comme un monolithe, votre application Datadog possède un nom de service pour l’application.
• Si votre application de navigateur a été construite sous forme de dépôts séparés pour plusieurs pages, modifiez les noms de service par défaut tout au long du cycle de vie de votre application.

En savoir plus sur le tagging dans Datadog.

Référence de configuration

Consultez la Browser SDK API Reference pour obtenir la liste complète des options de configuration disponibles.

Étapes suivantes

Vous pouvez surveiller les exceptions non gérées, les rejets de promesses non gérés, les exceptions gérées, les rejets de promesses gérés et d’autres erreurs que le Browser SDK ne suit pas automatiquement. En savoir plus sur Collecting Browser Errors.

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

Suivi des erreurs avec RUM pour les applications Web JavaScriptCENTRE D'APPRENTISSAGE Code source datadog-ciCODE SOURCE Téléverser des maps source JavaScriptDOCUMENTATION Téléverser des symboles WebAssemblyDOCUMENTATION En savoir plus sur l'Error Tracking ExplorerDOCUMENTATION