Application Real-Time Monitoring Service:Diagnostic des erreurs JS

Accéder à la fonctionnalité

1. Connectez-vous à la console ARMS. Dans le volet de navigation de gauche, sélectionnez Browser Monitoring > Browser Monitoring.

2. Sur la page Browser Monitoring, sélectionnez une région dans la barre de navigation supérieure, puis cliquez sur le nom de l'application à gérer.

3. Dans le volet de navigation de gauche, sélectionnez Application > JS Error Diagnostics.

   Dans le coin supérieur droit de la page JS Error Diagnostics, sélectionnez une plage de temps.

Vue d'ensemble des erreurs

La section Error Overview affiche les statistiques clés et les tendances relatives aux erreurs JS pour la plage de temps sélectionnée, notamment les métriques suivantes :

• Errors : nombre total d'erreurs JS sur la plage de temps sélectionnée.

• JS Error Rate : pourcentage de pages vues contenant des erreurs par rapport au nombre total de pages vues sur la plage de temps sélectionnée.

• Affected Users : nombre et pourcentage d'utilisateurs affectés par les erreurs JS.

Dans la section Error Overview, vous pouvez :

• Survolez le graphique. Une infobulle s'affiche, indiquant le nombre d'erreurs, le taux d'erreur et le nombre d'utilisateurs affectés pour ce point temporel.

• Survolez un point de données du graphique jusqu'à ce que votre curseur prenne la forme d'une main, puis cliquez sur ce point pour ouvrir la boîte de dialogue Exception Insight. Pour plus d'informations, consultez la section Afficher Exception Insight.

• Cliquez et faites glisser le curseur sur une partie du graphique pour zoomer sur une période spécifique. Pour restaurer la vue initiale, cliquez sur Reset Zoom dans le coin supérieur droit.

Exception Insight

La boîte de dialogue Exception Insight affiche les détails des erreurs JS à un instant donné, y compris les métriques suivantes :

• Errors : nombre total d'erreurs JS à l'instant correspondant.

• JS Error Rate : pourcentage de pages vues contenant des erreurs par rapport au nombre total de pages vues à l'instant correspondant.

• Affected Users : nombre et pourcentage d'utilisateurs affectés par les erreurs JS.

• High frequency error Top 5 : cinq erreurs JS les plus fréquentes à l'instant correspondant. Cette liste inclut le message d'erreur capturé par ARMS, le nombre d'occurrences et le nombre d'utilisateurs affectés.

• Page Error Rate Top 5 : cinq pages présentant les taux d'erreur JS les plus élevés à l'instant correspondant. Cette liste inclut le nom de la page, le taux d'erreur JS de la page et le nombre de pages vues.

Dans la boîte de dialogue Exception Insight, vous pouvez :

• Cliquez sur l'onglet High frequency error Top 5. Dans la colonne Actions, cliquez sur Diagnosis pour accéder à la page Error details. Pour plus d'informations, consultez la section Afficher les détails de l'erreur.

• Cliquez sur l'onglet Page Error Rate Top 5. Dans la colonne Actions d'une page cible, cliquez sur Analyze pour afficher la vue d'ensemble des erreurs de cette page.

Pages classées par taux d'erreur

L'onglet Page Ranked by Error Rate répertorie les pages où des erreurs JS se sont produites, triées par taux d'erreur JS décroissant pour la plage de temps sélectionnée. La liste comprend les métriques suivantes :

• Page : page sur laquelle l'erreur JS s'est produite.

• Error Rate : pourcentage des pages vues totales de la page qui contenaient des erreurs durant la plage de temps sélectionnée.

• Views : nombre de pages vues pour la page.

Dans la colonne Actions, cliquez sur Analyze pour afficher la vue d'ensemble des erreurs de cette page spécifique.

Erreurs fréquentes

L'onglet Frequent Errors répertorie les erreurs JS survenues durant la plage de temps sélectionnée, triées par nombre d'occurrences décroissant. La liste comprend les métriques suivantes :

• Error Message : message d'erreur JS capturé par ARMS.

• Page : page sur laquelle l'erreur JS s'est produite.

• Errors : nombre d'occurrences de l'erreur JS.

• Affected Users : nombre et pourcentage d'utilisateurs affectés par l'erreur JS.

Dans la colonne Actions, cliquez sur Diagnosis pour accéder à l'onglet Error details. Pour plus d'informations, consultez la section Afficher les détails de l'erreur.

Détails de l'erreur

L'onglet Error details affiche les informations suivantes :

• Summary

  • Name

  • Type

  • Time (heure de détection de l'erreur JS)

  • Device

  • Operating System

  • Browser

  • IP

  • Network Type

  • Region

  • Lines

  • Column

  • URL

  • File (chemin du fichier où l'erreur JS s'est produite)

  • App Version

• Stack Information : séquence des appels de fonction ayant conduit à l'erreur.

• User Behavior Backtracking : trace des actions utilisateur permettant de reproduire l'erreur.

Sur l'onglet Error details, vous pouvez effectuer les opérations suivantes :

• Pour identifier l'emplacement exact d'une erreur JS, développez une entrée dans la section Stack Information et cliquez sur Select SourceMap File. Dans la boîte de dialogue SourceMap File, sélectionnez un fichier source map existant ou téléchargez-en un nouveau, puis cliquez sur OK.

  ARMS utilise ensuite le fichier source map pour associer le code minifié au code source original, révélant ainsi l'emplacement précis de l'erreur.

• Pour consulter le parcours de l'utilisateur, reportez-vous à la section Trace du comportement utilisateur.

• Pour afficher la répartition de l'erreur, cliquez sur l'onglet Error Distribution.

Trace du comportement utilisateur

La section User Behavior Backtracking de l'onglet Error details affiche le parcours de l'utilisateur afin de vous aider à reproduire le contexte d'une erreur.

La section stack trace affiche le message d'erreur spécifique, tel que Error Request failed with status code 504, ainsi que la pile d'appels détaillée. Le journal des comportements inclut des types d'événements tels que API request, click event et page navigation, organisés par ordre chronologique. Cliquez sur View Session pour afficher la session complète.

Répartition des erreurs

L'onglet Error Distribution de la page de diagnostic des erreurs JS montre comment une erreur JS spécifique est répartie selon les dimensions suivantes :

• Time View : pris en charge uniquement pour la répartition des erreurs au niveau des pages.

• Browser View

• Operating System Distribution

• Device Distribution

• Version View

• Geographical View : les statistiques sont agrégées par province, municipalité ou région autonome dans la vue Chine, et par pays/région dans la vue Monde.

Sur l'onglet Error Distribution, vous pouvez :

• Dans la section Time View, survolez le graphique de répartition pour afficher le nombre d'erreurs spécifique.

• Dans les sections Operating System Distribution, Device Distribution, Version View et Browser View, survolez un graphique de répartition pour afficher le nombre d'erreurs spécifique et son pourcentage.

• Dans la section Geographical View, sous l'onglet China ou World, cliquez sur la flèche dans l'en-tête de la colonne Errors pour trier le tableau par ordre croissant ou décroissant.

FAQ

• Comment activer ou désactiver la fonctionnalité User Behavior Trace ?

  Cette fonctionnalité est activée par défaut. Pour la désactiver, ajoutez l'élément de configuration SDK behavior: false à l'objet config. Pour plus d'informations sur les configurations SDK, consultez la section Référence SDK.

• Après avoir activé User Behavior Trace, les messages imprimés par console.log lors du débogage sont tracés vers le fichier SDK ARMS bl.js au lieu de leur emplacement dans le code source. Comment résoudre ce problème ?

  Ce phénomène se produit car ARMS surveille la sortie de la console du navigateur en remplaçant les méthodes de l'objet console, telles que log. Voici la solution :

  • Méthode 1 (recommandée) : configurez le blackboxing dans Chrome.

    1. Ouvrez Chrome. Appuyez sur Ctrl+Maj+I pour ouvrir DevTools, puis cliquez sur l'icône Paramètres.

    2. Dans le volet de navigation de gauche du panneau Settings, cliquez sur Blackboxing. Cliquez sur Add pattern. Dans le champ Pattern, saisissez /bl.*\.js$, puis cliquez sur Add.

  • Méthode 2 : désactivez User Behavior Trace à l'aide de l'élément de configuration SDK behavior: false.

    <script>
        ! (function ( c , b, d, a ) {
            c [a] || ( c[a] = {});
            c [a].config = {
                pid: "xxxxx",
                imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
                sendResource: true,
                enableLinkTrace: true,
                behavior: false
            };
            with(b) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("crossorigin", "", src = d)
        })(window, document, "https://sdk.rum.aliyuncs.com/v1/bl.js", "__bl");
    </script>

  Après avoir suivi les étapes ci-dessus, les messages imprimés par console.log pointeront vers l'emplacement correspondant dans le code source.