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 :

  • network : erreurs XHR ou Fetch résultant de requêtes AJAX. Les attributs spécifiques aux erreurs network sont disponibles dans la documentation dédiée.
  • 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 : les erreurs envoyées avec l'API addError RUM ont par défaut la valeur custom.

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 Configuration avancée du RUM.

AttributTypeDescription
error.sourcechaîneL’origine de l’erreur (par exemple, console ou network).
error.typechaîneLe type d’erreur (ou le code dans certains cas).
error.messagechaîneUn message d’une ligne lisible et concis décrivant l’événement.
error.stackchaîneLa stack trace ou toutes informations complémentaires relatives à l’erreur.

Erreurs network

Les erreurs network comprennent des informations sur les requêtes HTTP ayant échoué. Les facettes suivantes sont recueillies :

AttributTypeDescription
error.resource.status_codenombreLe code de statut de la réponse.
error.resource.methodchaîneLa méthode HTTP (par exemple, POST ou GET).
error.resource.urlchaîneL’URL de la ressource.
error.resource.url_hostchaîneLa partie de l’URL correspondant au host.
error.resource.url_pathchaîneLa partie de l’URL correspondant au chemin.
error.resource.url_queryobjetLes parties de l’URL correspondant à la chaîne de requête, décomposées en attributs key/value de paramètres de requête.
error.resource.url_schemechaîneLe nom du protocole de l’URL (HTTP ou HTTPS).
error.resource.provider.namechaîneLe nom du fournisseur de ressources. Valeur par défaut : unknown.
error.resource.provider.domainchaîneLe domaine du fournisseur de ressources.
error.resource.provider.typechaîneLe type de fournisseur de ressources (par exemple, first-party, cdn, ad ou analytics).

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.

AttributTypeDescription
error.typechaîneLe 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,
    source: ErrorSource.CUSTOM | ErrorSource.NETWORK | ErrorSource.SOURCE = ErrorSource.CUSTOM
);

Remarque : la fonctionnalité de suivi des erreurs traite les erreurs envoyées avec la source custom ou source et qui contiennent une stack trace.

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 network
fetch('<UNE_URL>').catch(function(error) {
    datadogRum.addError(error, undefined, 'network');
})

// Envoyer une erreur d'exception gérée
try {
    //Logique de code
} catch (error) {
    datadogRum.addError(error, undefined, 'source');
}
// 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 network
fetch('<UNE_URL>').catch(function(error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error, undefined, 'network');
    });
})

// Envoyer une erreur d'exception gérée
try {
    //Logique de code
} catch (error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error, undefined, 'source');
    })
}
// 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 network
fetch('<UNE _URL>').catch(function(error) {
    window.DD_RUM && DD_RUM.addError(error, undefined, 'network');
})

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

Pour aller plus loin