Partager via

Outil Analyseur d’incident

  • Article

Utilisez l’outil Analyseur d’incident pour analyser et diagnostiquer rapidement les incidents de votre application web en production. Dans l’outil Analyseur d’incident, vous pouvez entrer une trace de pile JavaScript que vous avez collectée en production, puis appliquer vos mappages sources pour unminifier la trace de pile afin de pouvoir déboguer plus rapidement. L’outil Analyseur d’incident vous permet d’effectuer une trace de pile JavaScript minifiée et de travailler rapidement en arrière pour déterminer quelles lignes de code ont provoqué l’erreur.

Outil Analyseur d’incidents

Lorsqu’une application web se bloque ou se bloque de façon inattendue, cela peut entraîner une perte de données et une mauvaise expérience pour vos utilisateurs. La collecte d’informations sur les incidents rencontrés par vos utilisateurs est utile pour diagnostiquer et corriger la cause racine des incidents. Toutefois, le code qui s’exécute en production est souvent minifié, ce qui entraîne la minimisation des traces de pile JavaScript qui sont connectées aux incidents. L’outil Analyseur d’incident vous aide à mapper les traces de pile minifiées collectées en production au code source d’origine, afin que vous puissiez identifier rapidement la cause racine des incidents.

Voici un exemple de trace de pile minifiée que vous pouvez collecter à partir de votre application web en production :

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Les noms de variables et de fonctions sont souvent raccourcis, comme la variable t ci-dessus. Les URL de script pointent souvent vers un fichier groupé monoligne généré, comme le prod.bundle.js fichier ci-dessus.

En comparaison, voici un exemple de trace de pile nonminifiée, avec des noms de variables et de fonctions d’origine, ainsi que des noms de fichier source d’origine et des numéros de ligne :

Uncaught Error: test error
    at shorten (util.ts:9:9)
    at processUIString (util.ts:2:10)
    at todoMarkupBuilder (todo.ts:35:41)
    at Todo.render (todo.ts:24:12)
    at app.ts:36:39
    at Array.map (<anonymous>)
    at App.render (app.ts:36:22)
    at new App (app.ts:29:10)
    at index.ts:9:13
    at index.ts:9:33

Il existe deux étapes pour analyser les traces de pile de production minifiées dans l’outil Analyseur d’incident :

  1. Tout d’abord, vous collectez des traces de pile spécialement mises en forme à partir de votre application web en production.

    Il existe de nombreuses façons de collecter des traces de pile à partir des navigateurs que vos utilisateurs utilisent. La section Collecter les traces de pile en production ci-dessous fournit des exemples et des recommandations. Il explique également comment mettre en forme les traces de pile afin qu’elles puissent être analysées dans l’outil Analyseur d’incident .

  2. Ensuite, vous analysez les traces de pile dans l’outil Analyseur d’incident .

    La section Analyser les traces de pile dans l’outil Analyseur d’incident, ci-dessous, explique comment rendre les mappages sources accessibles dans DevTools, puis comment utiliser l’outil Analyseur d’incident pour analyser les traces de pile.

Collecter les traces de pile en production

L’outil Analyseur d’incident ne collecte pas les traces de pile pour vous. Vous devez d’abord collecter les traces de pile à partir de votre application web à l’aide des outils et services disponibles. Voici quelques façons de collecter les traces de pile en production :

  • Nous vous recommandons d’utiliser un système de télémétrie tel qu’Azure Monitor Application Insights qui peut capturer des informations sur les erreurs non gérées à partir de votre code JavaScript.

  • Vous pouvez également écrire du code JavaScript pour capturer les erreurs non gérées dans votre application web. L’exemple suivant montre comment utiliser le window.onerror gestionnaire d’événements pour capturer les erreurs non gérées dans une application web :

    window.onerror = function (message, source, line, column, error) {
  // Get the stack trace from the error object.
  const stackTrace = error.stack;

  // Send the stack trace to your telemetry system.
  // Code not shown.
};

Mettre en forme les traces de pile pour l’outil Analyseur d’incident

La collecte des traces de pile en production ne suffit pas. L’outil Analyseur d’incident a besoin de traces de pile pour inclure une section appelée Modules sources.

Voici un exemple de trace de pile qui inclut la section Modules source :

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Source modules:
    https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js 8b544e37b35d920a39d0e10f70fddc29b25d0db362741f3071eff86cef8613e9

La section Modules sources inclut les URL des fichiers JavaScript impliqués dans la trace de pile et un hachage du contenu de chaque fichier. Le hachage est une chaîne de 64 caractères hexadécimaux qui correspond au hachage SHA-256 du script en cours d’exécution. Il s’agit d’un hachage octet pour octet du contenu de chaque fichier JavaScript. Les URL et les hachages permettent à l’outil Analyseur d’incident de récupérer ultérieurement les mappages sources utilisés pour déminifier la trace de pile.

Pour ajouter la section Modules sources à vos traces de pile d’erreurs, utilisez la bibliothèque Edge DevTools Crash Analyzer Support dans votre application web, comme suit :

  1. Ajoutez la bibliothèque Edge DevTools Crash Analyzer Support dans votre projet à l’aide de npm :

    npm install @microsoft/edge-devtools-crash-analyzer-support

  2. Importez la bibliothèque dans votre code JavaScript, puis appelez la installErrorStackModuleAnnotations fonction :

    import { installErrorStackModuleAnnotations } from '@microsoft/edge-devtools-crash-analyzer-support';

installErrorStackModuleAnnotations(Error);

Analyser les traces de pile dans l’outil Analyseur d’incident

L’outil Analyseur d’incident dans DevTools déminifie les traces de pile spécialement mises en forme que vous avez collectées auprès des utilisateurs en production. Si vos mappages sources contiennent également le code source d’origine, l’outil Analyseur d’incident affiche les noms de fichiers et de fonctions d’origine qui composent la trace de pile.

Rendre les mappages sources accessibles dans DevTools

L’outil Analyseur d’incident utilise les informations du module Source qui se trouvent dans la trace de pile pour récupérer les mappages sources qui correspondent aux fichiers de script dans la trace de pile. Cela signifie que vous devez d’abord rendre vos mappages sources accessibles dans DevTools.

L’outil Analyseur d’incident fonctionne mieux si vos mappages sources sont stockés en toute sécurité à l’aide du serveur de symboles Azure Artifacts. Cela est dû au fait que DevTools peut récupérer des mappages sources à partir du serveur de symboles Azure Artifacts à la demande lors de l’analyse de votre erreur. Consultez Déboguer en toute sécurité le code d’origine en publiant des mappages sources sur le serveur de symboles Azure Artifacts.

Si vous n’utilisez pas Azure Artifacts Symbol Server, vous pouvez toujours utiliser l’outil Analyseur d’incident, en vous assurant que les mappages sources correspondant à la trace de pile sont accessibles à DevTools. Par exemple, si vous avez déjà chargé des mappages sources à l’aide du //# sourceMappingURL= commentaire, DevTools met en cache les mappages sources pour une réutilisation ultérieure. Pour plus d’informations, consultez Mappages de sources dans DevTools dans Mapper le code traité à votre code source d’origine, pour le débogage.

DevTools ne met pas en cache les mappages de sources lorsque le nom de domaine est localhost. Cela signifie que si vous n’utilisez pas Azure Artifacts Symbol Server, l’outil Analyseur d’incidents fonctionne uniquement pour les traces de pile collectées à partir d’environnements de production, et non à partir d’environnements de développement locaux qui utilisent le localhost domaine.

Ouvrir l’outil Analyseur d’incident

L’outil Analyseur d’incident est un outil d’affichage rapide ; par défaut, il s’ouvre dans le panneau Affichage rapide, afin que vous puissiez l’utiliser avec les autres outils ouverts dans la barre d’activité.

Dans le menu Autres outils

Pour ouvrir l’outil Analyseur d’incident à l’aide du menu DevTools Autres outils :

  1. Dans Microsoft Edge, sélectionnez Paramètres et plus (icône> « Paramètres et plus ») Autres outils>Ouvrir Outils de développement (Ctrl+Maj+I (Windows, Linux) ou Commande+Option+I (macOS)). DevTools s’ouvre.

  2. Dans DevTools, appuyez sur Échap pour ouvrir la barre d’outils Affichage rapide en bas (si elle n’est pas déjà ouverte). Dans la barre d’outils Affichage rapide , cliquez sur le bouton Plus d’outils (icône « Plus d’outils ») puis sélectionnez Analyseur d’incident.

À partir du menu de commandes

Pour ouvrir l’outil Analyseur d’incident à l’aide du menu Commandes :

  1. Dans Microsoft Edge, sélectionnez Paramètres et plus (icône> « Paramètres et plus ») Autres outils>Ouvrir Outils de développement (Ctrl+Maj+I (Windows, Linux) ou Commande+Option+I (macOS)). DevTools s’ouvre.

  2. Dans DevTools, cliquez sur le bouton Personnaliser et contrôler DevTools (icône « Personnaliser et contrôler DevTools ») et sélectionnez la commande Exécuter. Ou, lorsque DevTools a le focus, appuyez sur Ctrl+Maj+P (Windows, Linux) ou Sur Commande+Maj+P (macOS). Le menu Commandes s’ouvre.

  3. Commencez à taper l’analyseur d’incident, puis sélectionnez la commande Afficher l’analyseur d’incident [Affichage rapide]. L’outil Analyseur d’incident s’ouvre dans le panneau Affichage rapide.

Entrer une trace de pile dans l’outil Analyseur d’incident

Si vous souhaitez tester l’outil Analyseur d’incident mais que vous n’avez pas de trace de pile à analyser, procédez comme suit pour collecter un exemple de trace de pile :

  1. Dans Microsoft Edge, ouvrez la démonstration de DevTools Crash Analyzer dans une nouvelle fenêtre ou un nouvel onglet.

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  3. Dans DevTools, dans la barre d’activité, cliquez sur Console (icône console). L’outil Console s’ouvre.

  4. Sélectionnez la trace de pile d’erreurs qui s’affiche dans l’outil Console et copiez-la.

Pour utiliser l’outil Analyseur d’incident dans DevTools :

  1. Ouvrez l’outil Analyseur d’incident de DevTools, comme décrit dans Ouvrir l’outil Analyseur d’incident, ci-dessus.

  2. Entrez votre trace de pile spécialement mise en forme dans le volet gauche de l’outil Analyseur d’incident :

    Outil Analyseur d’incident, avec la pile des appels améliorée collée dans le volet gauche

  3. Dans l’outil Analyseur d’incident , cliquez sur le bouton Analyser (icône « Analyser ») (ou appuyez sur Ctrl+Entrée).

    Le volet de droite affiche les noms de fichiers et de fonctions d’origine qui composent la trace de pile :

    Utilisation de l’outil Analyseur d’incident pour déboguer une exception JavaScript non irrécupérable

    Cela charge les mappages sources qui correspondent aux modules sources et tente d’unminifier toutes les trames de pile pour lesquelles le contenu source JavaScript ou TypeScript était contenu dans le mappage source.

  4. Si le code source est disponible dans votre mappage source pour un frame, cliquez sur le cadre pour afficher le code source.

    Le code source d’origine apparaît dans l’outil Sources et la ligne en question est mise en surbrillance :

    Fichier de code et ligne de code non déminifiés accessibles en cliquant dans le volet droit de l’onglet Analyseur d’incident

  5. Pour copier la trace de pile nonminifiée, dans la barre d’outils de l’onglet Analyseur d’incident, cliquez sur le bouton Copier la trace de pile nonminifiée (icône Copier la trace de pile nonminifiée). Cela produit et copie dans le Presse-papiers la trace de pile complète et nonminifiée, en tant que trace de pile dans le format de trace de pile conventionnel, sauf avec les informations qui correspondent à votre code d’origine, notamment les noms de fonction, les noms de fichiers sources et les numéros de ligne et de colonne :

Uncaught Error: test error
    at shorten (webpack://devtools-crash-analyzer/src/util.ts:9:9)
    at processUIString (webpack://devtools-crash-analyzer/src/util.ts:2:10)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:39)
    at Array.map (<anonymous>)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:22)
    at constructor for App (webpack://devtools-crash-analyzer/src/app.ts:29:10)
    at [Global code: "webpack://devtools-crash-analyzer/src/index.ts"] (webpack://devtools-crash-analyzer/src/index.ts:9:13)
    at (anonymous function) (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:2:2897)

Fonctionnalités de l’interface utilisateur

L’outil Analyseur d’incident présente les fonctionnalités d’interface utilisateur suivantes :

Élément d’interface utilisateur Description
Volet gauche Trace de pile à analyser.
Volet droit Affiche les noms de fichiers et de fonctions d’origine qui composent la trace de pile.
Bouton Nouvelle analyse (icône « Nouvelle analyse ») Crée un volet gauche vide pour coller une nouvelle trace de pile.
Bouton Analyser (icône « Analyser ») Crée une analyse dans le volet droit, en fonction de la trace de pile dans le volet gauche.
La liste déroulante Analyses (la liste déroulante « Analyses ») Affiche la liste des analyses.
Bouton Supprimer cette analyse (icône « Supprimer cette analyse ») Supprime l’analyse actuelle.
Bouton Copier la trace de pile nonminifiée (icône Copier la trace de pile nonminifiée) Produit et copie dans le Presse-papiers la trace de pile complète et nonminifiée, en tant que trace de pile au format de trace de pile conventionnel, sauf avec les informations qui correspondent à votre code d’origine, notamment les noms de fonction, les noms de fichiers sources et les numéros de ligne et de colonne.
Bouton Ouvrir les paramètres du serveur de symboles (icône « Ouvrir les paramètres du serveur de symboles ») Affichez ou modifiez les paramètres du serveur de symboles Azure Artifacts.
Bouton Comment utiliser (icône « Comment utiliser ») Ouvre le présent article.

Fournir un commentaire

Laissez vos commentaires dans le référentiel de commentaires MicrosoftEdge/DevTools et faites-nous savoir ce qui fonctionne bien, ce qui ne fonctionne pas et ce que vous souhaitez pour ces fonctionnalités.

Voir également

Liens externes :