Présentation

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.

Sources des erreurs

Les erreurs de frontend proviennent de plusieurs sources différentes :

• agent : de l’exécution du SDK
• console : des appels d’API console.error()
• custom : envoyées avec l’API addError RUM
• report : de l’API ReportingObserver
• source : d’exceptions non gérées ou d’objets Promise rejetés non gérés dans le code source

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.

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.

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 Browser 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, source ou report et contenant une stack trace. Les erreurs envoyées avec une autre source (comme console) ou envoyées depuis des extensions de navigateurs ne sont pas traitées par le suivi des erreurs.

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.');

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

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

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

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

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

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

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

Instrumentation des limites d’erreur de React

Vous pouvez instrumenter les limites d’erreur React pour surveiller les erreurs de rendu de React à l’aide de l’API addError() du SDK RUM Browser.

Les erreurs de rendu collectées contiennent une pile de composants, qui est déminifiée comme n’importe quelle autre trace de pile d’erreurs après avoir téléchargé les sourcemaps.

Pour instrumenter les limites d’erreur React à des fins de surveillance, procédez comme suit :

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

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    datadogRum.addError(renderingError);
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    DD_RUM.onReady(function() {
       DD_RUM.addError(renderingError);
    });
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

     window.DD_RUM &&
       window.DD_RUM.addError(renderingError);

  }

  ...
}

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 de réponse HTTP Access-Control-Allow-Origin sur :

   • Access-Control-Allow-Origin: * pour permettre à toutes les origines de récupérer la ressource.
   • Access-Control-Allow-Origin: example.com pour autoriser une origine spécifique uniquement. Si le serveur prend en charge les clients issus de plusieurs origines, il doit renvoyer l’origine du client spécifique qui effectue la requête.

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

Suivi des erreursDOCUMENTATION Real User MonitoringBLOG Explorer vos vues dans DatadogDOCUMENTATION Appliquer des visualisations sur vos événementsDOCUMENTATION Dashboards RUMDOCUMENTATION