Collecte d'erreurs du navigateur

Collecte d'erreurs du navigateur

Les erreurs frontend sont recueillies par le service Real User Monitoring (RUM). Le message d’erreur et la stack trace sont inclus lorsque cela est possible.

Origines des erreurs

Les erreurs frontend sont réparties en quatre catégories différentes, en fonction de leur error.origin :

  • source : exceptions non gérées ou objets Promise rejetés non gérés (ces erreurs sont liées au code source).
  • console : appels d’API console.error().
  • custom : erreurs envoyées avec l'API addError RUM.

Attributs d’erreur

Pour en savoir plus sur les attributs par défaut de tous les types d’événements RUM, consultez la section relative à la collecte de données RUM. Pour obtenir des instructions afin de configurer l’échantillonnage ou le contexte global, consultez la section Modifier des données RUM et leur contexte.

Attribut Type Description
error.source chaîne L’origine de l’erreur (par exemple, console).
error.type chaîne Le type d’erreur (ou le code dans certains cas).
error.message chaîne Un message d’une ligne lisible et concis décrivant l’événement.
error.stack chaîne La stack trace ou toutes informations complémentaires relatives à l’erreur.

Erreurs source

Les erreurs de type source comprennent des informations au niveau du code concernant l’erreur. Plus d’informations concernant les différents types d’erreurs sont disponibles dans la documentation MDN.

Attribut Type Description
error.type chaîne Le type d’erreur (ou le code dans certains cas).

Recueillir des erreurs manuellement

Surveillez les exceptions gérées, les objets Promise rejetés et les autres erreurs non suivies automatiquement par le SDK RUM avec l’API addError() :

addError(
    error: unknown,
    context?: Context
);

Remarque : la fonctionnalité de suivi des erreurs traite toutes les erreurs envoyées avec la source custom ou source et contenant une stack trace. Les erreurs envoyées avec une autre source (comme console) ne sont pas traitées.

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

// Envoyer une erreur custom avec un contexte
const error = new Error('Une erreur s'est produite.');

datadogRum.addError(error, {
    pageStatus: 'beta',
});

// Envoyer une erreur réseau
fetch('<UNE_URL>').catch(function(error) {
    datadogRum.addError(error);
})

// Envoyer une erreur d'exception gérée
try {
    // Logique de code
} catch (error) {
    datadogRum.addError(error);
}
// Envoyer une erreur custom avec un contexte
const error = new Error('Une erreur s'est produite.');

DD_RUM.onReady(function() {
    DD_RUM.addError(error, {
        pageStatus: 'beta',
    });
});

// Envoyer une erreur réseau
fetch('<UNE_URL>').catch(function(error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error);
    });
})

// Envoyer une erreur d'exception gérée
try {
    // Logique de code
} catch (error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error);
    })
}
// Envoyer une erreur custom avec un contexte
const error = new Error('Une erreur s'est produite.');

window.DD_RUM && DD_RUM.addError(error, {
    pageStatus: 'beta',
});

// Envoyer une erreur réseau
fetch('<UNE _URL>').catch(function(error) {
    window.DD_RUM && DD_RUM.addError(error);
})

// Envoyer une erreur d'exception gérée
try {
    // Logique de code
} catch (error) {
    window.DD_RUM && DD_RUM.addError(error);
}

Dépannage

Erreur de script

Pour des raisons de sécurité, les navigateurs masquent les détails des erreurs déclenchées par des scripts interorigines. L’onglet Error Details affiche alors une erreur avec comme seul message « Script error ».

Pour en savoir plus sur les scripts interorigines et découvrir pourquoi les détails sont masqués, consultez la section CORS et cette remarque sur les gestionnaires d’événement globaux. Votre erreur est potentiellement causée par l’une des situations suivantes :

  • Vos fichiers JavaScript sont hébergés sur un autre hostname (par exemple, example.com inclut des ressources de static.example.com).
  • Votre site Web inclut des bibliothèques JavaScript hébergées sur un CDN.
  • Votre site Web inclut des bibliothèques JavaScript tierces hébergées sur les serveurs du fournisseur.

Pour gagner en visibilité sur les scripts interorigines, suivez les deux étapes ci-dessous :

  1. Appelez les bibliothèques JavaScript avec crossorigin="anonymous".

    Grâce à crossorigin="anonymous", la requête servant à récupérer le script est sécurisée. Aucune donnée sensible n’est transmise via des cookies ou l’authentification HTTP.

  2. Configurez l’en-tête HTTP Access-Control-Allow-Origin.

    Cet en-tête a généralement pour valeur Access-Control-Allow-Origin: *, ce qui autorise toutes les origines à récupérer la ressource. Restreignez plutôt les origines pouvant accéder à votre ressource avec, par exemple, Access-Control-Allow-Origin: www.example.com.

Pour aller plus loin